React Native Update Guide

preface

React Native, as a cross-end framework, has one of its biggest headaches: version updates. Especially in the event of a major release update, the JavaScript, iOS, and Android configuration build files are very big changes, and sometimes the three configuration files are coupled together, often affecting the whole.

This paper assumes that the main players of React Native upgrade are front-end students who are familiar with a set of front-end construction processes mainly based on javaScript. If possible, it is strongly recommended to upgrade iOS and Android development, for some trivial upgrade details, face-to-face communication is far more efficient than search engines.

Tip: Because the nuggets have modified the moderation rules, each modification and new content will be hidden article review, I suggest reading the original blog for the best reading experienceCopy the code

👉 Read the original blog post

Think article useful words to you must remember to like oh 🌟, thank you, this is really very important to me!

A, sharpening the knife does not mistakenly cut wood workers

This part of knowledge is the most important in my opinion, after all, version update is eternal, operation process is not the same.

Before going into the details of each side of the build tool, let’s take a look at how most products are technically planned from the perspective of the entire project lifecycle:

• Early stage of the product: the architecture is relatively simple, and the whole project can be configured with a configuration file. The simpler the configuration file, the better, XML and JSON will be used
• Product development period: the need to configure more places, this time add a few configuration items add a few parameters, although some cumbersome, but the static configuration file is still enough
• Product maturity: Static configuration files are no longer sufficient for dynamic configuration, and a scripting language or DSL is often introduced to manage configuration
• ~~ product late: a fire to start again (remember to delete) ~~

Once you understand the life cycle of a technical product, you will have an overview of the configuration files used in daily development: Smelly, long configuration items, messy compatibility writing, unaesthetically pleasing DSLS, and the most amazing thing is that all of these things can make a project run. You’ll admire the human miracle the moment your Build succeeds — it’s called professional!

With that in mind, let’s get down to the technical details.

1. Configure Web front-end projects

Front-end engineering has always been a hot spot in the front end, although it has been very hot, but the concrete implementation is still a mess. I think there are two main reasons, one is the front-end construction from scratch, relatively weak foundation; One is community driven, where a thousand flowers bloom without uniform standards. Take the main configuration files on the front end today:

• withpackage.jsonManagement of NPM package
• Implement process management with NPM Script, and sometimes plug in related scriptspackage.json 里
• Eslint is used to code specifications, and sometimes even to write one.eslintrc.js
• Use Babel for syntactic compatibility, and sometimes write onebabel.config.js
• Use Webpack to build projects and package them for release
• .

These are just a few of the major configurations listed above, and it should come as no surprise that you now have five configuration files in your project, which can be referenced and coupled to each other under the glue of JavaScript, the front-end all-purpose scripting language, which makes the development experience less than half as good as iOS and Android.

If you think I’m just criticizing the front end, you’re wrong. What I’m trying to say is, if you can handle such a complex configuration, isn’t iOS and Android project configuration easy?

2. Configure the iOS project

IOS projects have two main points: project.pbxProj and CocoaPods. Once you know these two things, you can upgrade RN completely.

1 ⃣ ️ project. Pbxproj with Xcode

Project. Pbxproj is an iOS project configuration file, which looks like JSON in terms of data structure characteristics, can be traced back to NeXT, and is basically 0 readability. Every Git merge is a pure black nightmare. Take a look at this picture. It’s for people.

Something so unreadable can be handed down, in fact, XCode is the IDE to keep it alive. Every configuration we change in XCode, such as Build Settings, will be reflected in the project. Pbxproj configuration file, which is a kind of alternative DSL.

I recommend the following articles to give you a better understanding of the iOS compilation and packaging process:

• Project. Pbxproj in iOS development Xcode — In depth: introduces some features of the project. Pbxproj file

• Pbxproj: Xcode configuration and project. Pbxproj file have a deeper understanding of the corresponding relationship

• Xcode_target, xcode_target, xcode_target

• XCode Build process

2 ⃣ ️ CocoaPods

CocoaPods is a tool for managing third-party open source libraries in iOS projects. Mainstream iOS projects use CocoaPods to manage third-party libraries.

React Native finally uses CocoaPods in 0.60, bringing it into line with the iOS community. The benefit of this is that subsequent maintenance and iterations are much less stressful, and WHO knows how I’ve survived upgrading various iOS SDKS in the past.

Compared to project. Pbxproj, CocoaPods is much simpler, the Ruby language for writing configuration scripts is much cleaner, and podfiles are much more readable.

platform :ios.'9.0'
require_relative '.. /node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'Project Name' do
  pod 'React'.:path= >'.. /node_modules/react-native/'
  pod 'React-Core'.:path= >'.. /node_modules/react-native/React'

  use_native_modules!
end
Copy the code

You can find CocoaPods learning materials in the following section, or search for them yourself:

CocoaPods Tutorial

3.Android project configuration

Android project configuration is largely controlled by Gradle files written by Groovy, the scripting language of the JVM family. The idea here is obvious, we just need to know some Groovy syntax and gradle writing, you can read and modify Android configuration files. Here are a few of the tutorials I recommend to give you an idea:

• Groovy Scripting Basics Walkthrough
• Gradle Script Basics Overview
• Gradle tips and tricks

Once you’ve learned the basics of syntax, get back to the Android project. The Android project configuration is mainly controlled by three files, which are also the most conflicting files during the upgrade:

• settings.gradle: indicates which modules Gradle should include when building an application
• build.gradle: Defines build configurations that apply to all modules in the project
• app/build.gradle: Defines the build configuration of the App

In my opinion, Android Gradle configuration is relatively easy to get started, because Gradle files have the advantage of being able to add comments freely. Take the time to comment out each configuration item so you don’t freak out during the upgrade process.

4.RN official upgrade Assistant

React Native released the Upgrade Helper Diff widget in the July 2019 0.60 update. Through this tool we can easily see the version update when the configuration script changes, very convenient.

Ii. Upgrade process

My upgrade process for RN is like this:

• A free-flowing network environment, with free access to Google
• Check out the official blog for major updates
• Read CHANGELOG on RN GitHub for details about the changes to the version update and to adapt to API changes
• Read third-party dependenciesREADME.mdFile, whether to synchronize the upgrade
• Use Upgrade Helper to do version Diff, and read the relevant blog posts on upgrad-React-Native to modify the project configuration files and configuration scripts
• Delete node_modules and cache and rebuild the project. If the Build fails, search or ask the Native developer according to the error information
• Regression testing

In the update process, I suggest atomizing git commit as much as possible to facilitate subsequent redisk and rollback. Caution is never too safe.

In my actual upgrade, it took me two weeks to upgrade React Native 0.59 to 0.60 due to the great changes and complicated business. One week was spent on iOS and one week on Android. The 0.61 and 0.62 upgrades are relatively easy and can be upgraded in an hour or two.

React Native 0.60

React Native 0.60 was released on July 3, 2019. It’s a major update that doesn’t add new features, but makes a lot of improvements to the underlying configuration:

• Remove WebView components and submit them to the React-native community for maintenance
• Use CocoaPods to manage third-party iOS dependencies and keep up with the mainstream iOS configuration
• Android is migrated to AndroidX for subsequent upgrades and updates
• React Native has some third-party packages that link automatically, eliminating the need for manual usereact-native link * 了

You must be patient when upgrading 0.60. It is impossible to succeed at one time. Please refer to the blog posts of Upgrade Helper and Upgrade to React Native 0.60.

Before upgrade, ensure that the third-party package is of the latest version.

1.React Native

JavaScript here is relatively easy to upgrade, after all, is the home of front-end programmers. After upgrading the version number based on Diff differences, note the following:

1 one ️ Part of RN built-in components to community maintenance

NetInfo, WebView, and Geolocation are removed from React Native and maintained by the React Native community. So we need to change the import path.

Slider, AsyncStorage, CameraRoll, Clipboard, and other components are also scheduled to be removed.

It’s worth noting that in an update to react native WebView, in response to App Store policy, UIWebView has been removed and only WKWebView is supported. If you’ve done any mobile adaptation, you know that WKWebview is not very cookie friendly. Another point is that if RN and H5 pages interact via postMessage, there will be some incompatible updates to the relevant API, which needs to be adapted. For details, please refer to the documentation.

2 ⃣ ️ SwipeableFlatList removed

SwipeableFlatList SwipeableFlatList SwipeableFlatList SwipeableFlatList SwipeableFlatList SwipeableFlatList SwipeableFlatList SwipeableFlatList SwipeableFlatList SwipeableFlatList Probably not happy with the implementation of this component, it was officially removed in 0.60. In order not to let the project error, we may need to take out your SwipeableFlatList related source manually maintained by oneself, someone bring up relevant code maintains a NPM package — the react – native – swipeable – lists, you can introduce excessive temporarily.

2.iOS

React Native supports CocoaPods. In 2020, RN finally supports CocoaPods. Before CocoaPods, we had to manually drag library files into the main project in order to use iOS third-party libraries. Upgrade and maintenance are very inconvenient. Because version 0.61 is the only package management solution available, it is highly recommended to upgrade directly to CocoaPods.

1 one ️ migration to CocoaPods & Autolinking support

Before migrating CocoaPods, type unlink Native Modules on the CLI:

react-native unlink
Copy the code

After unlink, migrate to CocoaPods. Make sure that Ruby and CocoaPods are installed successfully before migrating. The installation process is not the focus of this article.

Let’s create a new file, Podfile, in the ios directory and type in the following code:

platform :ios.'9.0'
require_relative '.. /node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'Project Name' do
  pod 'React'.:path= >'.. /node_modules/react-native/'
  pod 'React-Core'.:path= >'.. /node_modules/react-native/React'
  pod 'React-DevSupport'.:path= >'.. /node_modules/react-native/React'
  pod 'React-RCTActionSheet'.:path= >'.. /node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation'.:path= >'.. /node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob'.:path= >'.. /node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage'.:path= >'.. /node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking'.:path= >'.. /node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork'.:path= >'.. /node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings'.:path= >'.. /node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText'.:path= >'.. /node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration'.:path= >'.. /node_modules/react-native/Libraries/Vibration'
  pod 'React-RCTWebSocket'.:path= >'.. /node_modules/react-native/Libraries/WebSocket'

  pod 'React-cxxreact'.:path= >'.. /node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi'.:path= >'.. /node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor'.:path= >'.. /node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector'.:path= >'.. /node_modules/react-native/ReactCommon/jsinspector'
  pod 'yoga'.:path= >'.. /node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion'.:podspec= >'.. /node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog'.:podspec= >'.. /node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly'.:podspec= >'.. /node_modules/react-native/third-party-podspecs/Folly.podspec'

  target 'Project name Tests' do
    inherit! :search_paths
    # Pods for testing
  end

  use_native_modules!
end
Copy the code

This code, which starts with pod, imports the react-native code from node_modules. The following two lines of code implement autolink:

require_relative '.. /node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'Project Name' do. use_native_modules!end
Copy the code

Once your Podfile is configured, run Pod Install in the ios folder to install the dependencies.

An XCWorkspace space will be generated upon successful installation, at which point you will need to exit the current XCodeProJ project and open xcWorkspace.

In XCWorkspace, there are first two top-level folders, your XCodeProJ project and the Pods folder (left) : the former contains your business code and the latter manages the third-party library files installed. At this point, you need to manually delete the *. Xcodeproj files in your project /Libraries directory (➊ at the red box on the right) because they already existed in the Pods folder (by bluebeard’s call at the red box on the right).

2 discount ️ Modify Header Search Path

The React Native project references were changed in the previous step, but there is still a problem. The address header file path is not changed.

• $(SRCROOT)/.. /node_modules/*

• Using CocoaPods, the path changes to $(PODS_CONFIGURATION_BUILD_DIR)/*

At that time, this change was stuck for a day, and this change was in Project. Pbxproj, which was very difficult to read and ignored. The problem was later discovered by creating a new RN project. The solution is to delete the original Header Search Path content and manually add the new Path.

After completing the above two steps, you can try to build the project. Chances are you will find that you still cannot build it. I can’t cover all of them because there are so many different reasons, but it’s easier to ask Google.

3 discount ️ Added the Start Packager script

At this point, if you have built your iOS project, you will notice that the node server will automatically start when the iOS Build is successful. We need to manually start the node server NPM run start, very inconvenient.

What’s the problem? The react. xcodeProj library has a Start Packager script that will automatically Start a Node server when the project builds successfully:

After migrating to Pods, this script was gone and needed to be added manually in the main project. The adding method is also very simple, I have marked it in the picture below, click the project folder, click ➕ in the TARGETS Build Phases, click New Run Script Phase to add a Script area, and then fill in the following code:

export RCT_METRO_PORT="${RCT_METRO_PORT:=8081}"
echo "export RCT_METRO_PORT=${RCT_METRO_PORT}" > "${SRCROOT}/.. /node_modules/react-native/scripts/.packager.env"
if [ -z "${RCT_NO_LAUNCH_PACKAGER+xxx}"];then
  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then
    if ! curl -s "http://localhost:${RCT_METRO_PORT}/status" | grep -q "packager-status:running" ; then
      echo "Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly"
      exit 2
    fi
  else
    open "$SRCROOT/.. /node_modules/react-native/scripts/launchPackager.command" || echo "Can't start packager automatically"
  fi
fi
Copy the code

The Start Packager script is also carefully placed, preferably between Check Pods manifest.lock and Compile Sources, otherwise it will cause an error when starting the Node server.

4 ⃣ ️ new LaunchScreen. Storyboard

With the increase of iPhone product line, the size of iPhone has increased. The original LaunchImage with one size is no longer suitable. At this time,  official recommends using launchscreen. storyboard to create the LaunchScreen. And require all apps to do so by 2021.

Specific configuration there are a lot of tutorials on the net, we search reference configuration is good. I personally refer to the following tutorials:

• How to use Launch Screen Storyboard for iOS development
• Add a LaunchScreen for RN applications using launchscreen.storyboard
• IOS 13 uses launchscreen.storyboard to adapt to various launch sizes

5 Discount ️ Modify xcodeBuild script

If the project was previously configured with an automatic packaging script, some changes will have to be made to the original packaging script as the upgrade moves to workspace:

Xcodebuild archive-project Project name xcodeProjCopy the code

⬇ ️

Xcodebuild archive -workspace Project name xcworkspaceCopy the code

You can refer to these two articles on XcodeBuild:

• Use the Xcodebuild command for automated packaging
• Xcodebuild goes from beginner to master

3.Android

The 0.60 Android update has three main points:

• React Native project upgraded to AndroidX
• React Native third-party dependencies support Autolink
• Support for Hermes, an open source Javascript engine for Facebook

Gradle and Groovy versions need to be updated before you can upgrade. For details, see Upgrade Helper.

1 discount ️ Upgrade to AndroidX

The AndroidX push is mainly because Google is officially fed up with Android’s current mess of Android.support and has replaced it with a unified AndroidX. Update with Android official documentation, I mainly refer to the following documentation:

• Keep hearing about AndroidX, what is AndroidX anyway?

• AndroidX overview

• Migrating to AndroidX

• Android AndroidX migration

The migration work is mainly to modify the import path. The workload may be a little heavy, but the psychological burden is small. In essence, it is to change the name, and the problem is not big.

2 ⃣ ️ Autolinking support

Before Autolinking is integrated, try running the React-Native Unlink to see if it automatically unlinks. If cancellation fails, manually remove the old link code and add the new Autolinking code yourself. Here I use the react-native-SVG third-party library as an example:

1. Check android/settings.gradle, delete the old include configuration, and add the following new code:

rootProject.name = 'Your Project'

- include ':react-native-svg'
- project(':react-native-svg').projectDir = new File(rootProject.projectDir, '.. /node_modules/react-native-svg/android')

+ apply from: file(".. /node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
Copy the code

2. Check Android /app/build.gradle, delete the old configuration, and add a configuration line to the last line of the file:

dependencies {
-   implementation project(':react-native-svg')
}

+ apply from: file(".. /.. /node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
Copy the code

3. Check mainApplication. Java and delete old references:

- @Override
- protected List<ReactPackage> getPackages(a) {-return Arrays.<ReactPackage>asList(
-     new MainReactPackage(),
-     new SvgPackage()
-   );

+   @SuppressWarnings("UnnecessaryLocalVariable")
+   List<ReactPackage> packages = new PackageList(this).getPackages();
+   returnpackages; -}Copy the code

It is worth noting that our business may package some Native Modules by itself. After the above modifications, the way of importing Native Modules should also be modified accordingly. Here you can refer to the official Android Register the Module document:

+ import com.your-app-name.CustomToastPackage; // <-- Add this line with your package name.

protected List<ReactPackage> getPackages(a) {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
+   packages.add(new CustomToastPackage()); // <-- Add this line with your package name.
  return packages;
}
Copy the code

3 ⃣ ️ Hermes support

Hermes is an open source Javascript engine for Facebook that is optimized for package size and startup speed compared to the current JSC. There are many articles about Hermes on the community, and I found a few good ones. If you are interested in Hermes, you can check them out.

• Ctrip’s research on Hermes, RN’s new generation JS engine
• React Native has released a new JS engine called Hermes
• Hermes Engine que

Hermes features are not the focus of this article, so I won’t cover them.

To use Hermes on Android, you must use React Native with a version number greater than 0.60.4 and make some changes to Android /app/build.gradle:

project.ext.react = [
-  entryFile: "index.js"
+  entryFile: "index.js",
+  enableHermes: false.// clean and rebuild if changing
]

- def useIntlJsc = false
+ def jscFlavor = 'org.webkit:android-jsc:+'

dependencies {
-  if (useIntlJsc) {
-    implementation 'org.webkit:android-jsc-intl:+'-}else {
-    implementation 'org.webkit:android-jsc:+'-} +if (enableHermes) {
+    def hermesPath = ".. /.. /node_modules/hermesvm/android/";
+    debugImplementation files(hermesPath + "hermes-debug.aar")
+    releaseImplementation files(hermesPath + "hermes-release.aar") +}else {
+    implementation jscFlavor
+  }
}
Copy the code

Only the major changes are listed above, and if you don’t want to use Hermes, you can leave the changes at all; If you want to give it a try, it’s best to follow the detailed changes listed by Upgrade Helper and then read Using Hermes on the React Native website for configuration and debugging.

React Native 0.61

React Native 0.61’s main update is the introduction of Fast Refresh, which greatly improves the development experience.

The addition of Fast Refresh has two advantages. The first is to combine the two functions of live reloading and hot reloading into one and enhance the functions. The second one finally supports Hooks hot updates. Although 0.59.10 already supported hooks, the functional components at the time did not support hot updates and the development experience was too poor. React Native 0.61 is now available.

Overall, the 0.61 update is small and can be completed in an hour or two. Before upgrading, it is recommended to refer to the blog posts of Upgrade Helper and Upgrade to React Native 0.61. I will supplement what is not explained in the article.

1.React Native

JavaScript here is mainly some API changes and upgrades, follow the error message to modify, not too difficult.

1 ️ React upgrade to 16.9

After the React upgrade to 16.9, apis such as componentWillMount are deprecated and must be migrated to apis with the prefix UNSAFE_componentWillMount.

In the main project, these APIS are easy to reconstruct and replace. The trouble is that some third-party JS packages have not been maintained for a long time. At this time, you need to manually Fork a code maintenance, or replace the third-party packages that are being maintained with the same function.

2 discount ️ Citation path modification

The reference paths of some methods and components have changed after the update, and we need to adapt them:

1.ErrorUtils is bound to global by default. There is no need to import ErrorUtils from ErrorUtils

2. The RCTNetworking reference path is changed and needs to be changed as follows:

const RCTNetworking = require('react-native/Libraries/Network/RCTNetworking');
Copy the code

3. The Dimensions import mode has also changed and needs to be modified:

import Dimensions from 'Dimensions';
Copy the code

⬇ ️

import { Dimensions } from 'react-native';
Copy the code

2.iOS

After 0.61, React Native iOS only supports the Cocoapods Link. If 0.60 has been upgraded to Cocoapods, the iOS upgrade will be very fast. You just need to change the import paths of some libraries in your Podfile.

Specific differences can be seen in the Upgrade Helper. It is very simple, and then compare and modify the pod install again.

3.Android

Android 0.61 is also easy to Upgrade. You can Upgrade Gradle and change the reference path of Hermes by following the Upgrade Helper Diff.

React Native 0.62 upgrade

React Native 0.62 also improves the developer experience. The RN project introduces Flipper, a mobile debugging tool made by Facebook, by default. React DevTools V4 supports the new LogBox. It is more friendly than the original error message and thus easier to locate the problem.

In addition to improving the development experience, this update also supports Dark Mode, which will be available after RN.

Overall, the 0.62 update is also very small and can be completed in an hour or two. Before upgrading, it is recommended to refer to the blog posts of Upgrade Helper and Upgrade to React Native 0.62. I will supplement what is not explained in the article.

1.React Native

1 discount ️ useNativeDriver explicitly specified

When Animated apis are used before React Native, the useNativeDriver defaults to false, which means that the JS thread draws the animation by default. After the version upgrade, the value of useNativeDriver must be explicitly specified. I think the point of this update is that every time you use Animated, it forces developers to think about whether they can make animations run on Native threads and optimize the animation experience.

2 ⃣ ️ LogBox open

LogBox was disabled by default in 0.62 and enabled by default in 0.63. In 0.62, you need to perform the following operations:

1. Create a new before.js file in the root directory of your project.

require('react-native').unstable_enableLogBox();
Copy the code

2. Import this file in the first line of index.js, the entry of all JS files:

import './before';
Copy the code

The above two steps must be strictly followed, otherwise there will be a red screen error.

2.iOS

1 ⃣ ️ CocoaPods updates

Cocoapods also has some changes in this release. Except for Flipper related pods, the changes are very minor and can be modified according to the Diff differences in the Upgrade Helper.

2 ⃣ ️ Swift support

React Native 0.62 upgrade (Xcode)

3.Android

Android 0.61 is also relatively easy to Upgrade. The Gradle version is upgraded, and the changes are minimal except flipper-related updates. You can modify the Diff of the Upgrade Helper in turn.

4.Flipper

After 0.62, Flipper is added in RN’s project by default, so it is convenient to view Layout, network, log and other information.

When the old project was upgraded, Flipper was actually optional, and the installation was a bit bumpy. Here’s what Flipper looks like (version 0.52.1) :

• Put the React of the Nativeconsole.logInformation and Native log information in the same application, more convenient to view
• You can view Native Layout, and it’s built inReact DevTools v4, the comparison between the two can be convenient to view the layout
• Network makes it easy to view Network information, which has been a sore point for RN debugging
• Quick screen capture and recording helps communicate with the UED
• Support custom plug-ins

The above are the advantages, there are still many disadvantages, I say I use down to feel the deficiency:

• Network support for UTF-8 is not very good. Flipper did not deal with the code properly, resulting in garbled codes in Chinese. I have raised issues to the official, but I have not been answered
• Network image parsing also has problems, being interpreted as garbled text
• The log module’s data is all strings, so even if you log an object, it’s just for presentationJSON.stringifyAfter the data

The above is my experience, whether to use it in the project, I think it is better for you to experience it yourself.

If you want to integrate flippers in your project, you can just do it according to the Upgrade Helper, which is not too difficult.

Afterword.

Here’s how to upgrade the React Native version. This tutorial will continue to be updated, so check out the blog for the best experience.

Think article useful words to you must remember to like oh 🌟, thank you, this is really very important to me!

More excellent articles recommended:

• React Native Performance Optimization Guide analyzes six points of RN performance optimization from the perspective of the rendering layer, and explains the implementation principle of FlatList in graphic form
• An introduction to the 5 most confusing things in Webpack, nuggets of nearly 800 likes, explains the concepts in Webpack that look alike but mean different things
• A detailed introduction to what webpack DLL is, and gives two best practices, get rid of cumbersome DLL configuration