-
Notifications
You must be signed in to change notification settings - Fork 140
Flagship 9
Contents
- Tooling Updates
- React Native 0.60 & 0.61
- React Native Navigation 4
- iOS Launch Screens: XIB to Storyboard
- RN 60 Auto-Linking
- Flagship forceLink
- A Note about React Native Restart
- AndroidX
- TypeScript
- Upgrade Instructions
Flagship 9 introduces the following major changes:
- React Native upgraded from version 0.59 to version 0.61
- React Native Navigation upgraded from version 1 to version 4
Please note that Xcode 11+ is mandatory for using Flagship 9.
For a comprehensive list of changes to React Native, please refer to the official release notes: https://github.com/react-native-community/releases/blob/master/CHANGELOG.md
- Added support for additional accessibility attributes (https://facebook.github.io/react-native/blog/2019/07/03/version-60#focus-on-accessibility)
- Android libraries have been migrated to AndroidX (https://facebook.github.io/react-native/blog/2019/07/03/version-60#androidx-support)
- Introduces auto linking for native dependencies (https://github.com/react-native-community/cli/blob/master/docs/autolinking.md)
- WebView, NetInfo, and Geolocation have been extracted from the RN core (https://facebook.github.io/react-native/blog/2019/07/03/version-60#lean-core-removals)
- Introduces Fast Refresh, a feature that unifies and replaces Live Reloading and Hot Reloading with better functionality
React Native Navigation v2 introduced a brand new API that will break apps using v1. One of the biggest changes is that Navigation can be imported directly from react-native-navigation instead of being passed through as a prop of screen-level components.
Please refer to their Screen documentation: https://wix.github.io/react-native-navigation/#/docs/screen-api
Flagship has created its own Navigator object that offers similar functionality to the previous one, along with compatibility with web. The main difference is that when you push or do similar screen transitions, it should look like:
navigator.push({
component: {
name: 'Home'
}
});
when before it was
navigator.push({
screen: 'Home'
});
Navigator should be imported from @brandingbrand/fsapp instead of react-native-navigation. A number of functions have been converted to work with react-native-navigation 3, but will give deprecation warnings instructing you how to use the updated syntax.
handleDeepLink and setOnNavigator event no longer are part of react-native-navigation, so you'll need to handle those transitions some other way and use the new events: https://wix.github.io/react-native-navigation/#/docs/events
Some additional migration direction can be found here: https://github.com/wix/react-native-navigation/blob/b174bcacbbf144e0e332e50e6183b6aea0e3bee6/website/docs/options-migration.mdx
If you were registering an additional component with Redux this is no longer supported, but you can manually wrap the component in a Provider from react-redux.
Due to changes in React Native Navigation, .xib launch screens need to be converted to storyboards. If this has not been completed, Flagship will throw a warning and use the generic Flagship launch screen. This must be performed in Xcode; you may be able to copy and paste assets between your XIB and new Storyboard depending on the complexity of the file.
React Native 0.60 introduced a new API for third-party libraries that include native dependencies so they can be installed without manual intervention.
As part of your upgrade to Flagship 9, you should review your third party modules that have native libraries and check to see if they've released newer versions that support auto-linking. If so, you should upgrade to these versions and remove any manual linking scripts that you've created.
Modules that do not support auto-linking will continue to work as they did prior to RN 60.
Please refer to the RN documentation for more information: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
Because of the aforementioned changes to linking in React Native, Flagship will no longer auto-link all installed dependencies. Instead, you must define which dependencies should be manually linked in your project's package.json file as such:
"flagship": {
"forceLink": [
"react-native-restart",
...
]
}
If your project doesn't rely on react-native-restart beyond the developer menu that's included out of the box with Flagship, then the aforementioned instructions should work. However, if your project explicitly includes react-native-restart, you'll need to make a few extra changes:
- Update your react-native-restart dependency in package.json to the following branch, which fixes a bug identified in the package's Android code:
"react-native-restart": "git+https://github.com/brandingbrand/react-native-restart#v0.0.13-hotfix"
- Add a react-native.config.js to your project's root, or update your existing one, to specify that react-native-restart shouldn't be autolinked:
module.exports = {
dependencies: {
'react-native-restart': {
platforms: {
android: null
}
}
}
}
React Native 0.60 upgrades Android dependencies to AndroidX, which is a new set of Android support libraries that have a more consistent naming convention and versioning scheme. Flagship 9 includes Jetifier, which is a tool that automatically runs through your project's node_modules and updates Android dependencies to the appropriate AndroidX version. Jetifier should take care of everything by itself, but if by chance you do run into Android library issues this is a likely culprit.
Review RN's documentation regarding AndroidX here: https://reactnative.dev/blog/2019/07/03/version-60#androidx-support
Most recent Android packages should work out of the box, however some older packages might not work. If the packages can't be upgraded you can have a script to try to upgrade these versions for a possible workaround. After running init, change the compileSdkVersion, buildToolsVersion, targetSdkVersion properties of each of the old package's android/build.gradle to match the root project.
TypeScript has been updated to 3.7.2. While this shouldn't introduce breaking changes, due to improved checks it may throw errors if types have not been properly implemented in your project. This also introduces new features such as optional changing and null coalescing.
0. Upgrade local TypeScript
Upgrade your globally installed version of TypeScript to the same as used by Flagship to avoid conflicts:
npm install -g [email protected]
1. Update your project's dependencies to the following:
- @brandingbrand/flagship and all @brandingbrand/fs* dependencies "^9.0.0"
- "react": "~16.11.0",
- "react-native": "0.61.5"
- "@babel/core": "~7.7.2",
- "@babel/runtime": "~7.5.5",
- "metro-react-native-babel-preset": "^0.57.0",
- "typescript": "~3.7.2",
- "react-redux": "^7.0.0"
devDependencies:
- "@react-native-community/cli-platform-ios": "3.0.0",
- "@types/react-redux": "^7.1.1",
2. Check for moved dependencies:
React Native moved the following out of the RN core and into separate dependencies managed by the react-native-community project:
- NetInfo (react-native-community/netinfo)
- WebView (react-native-community/webview)
- Geolocation (react-native-community/geolocation)
3. Check for updated third-party modules
Review the packages that your project uses that may include native libraries. Check to see if the packages have released versions that support RN 0.60 autolinking; if so, upgrade to that version and remove custom code from your project for manually integrating the dependency.
4. Add forceLink to package.json
You'll need to add a flagship.forceLink
property to your project's package.json that contains the names of all third party modules that still need to be linked by React Native. (These are the modules that don't support RN 60 auto-linking.) You'll need to include react-native-restart
for Flagship dev mode to work.
"flagship": {
"forceLink": [
"react-native-restart",
// ...add additional modules here...
]
}
5. Convert your custom launch screen to a Storyboard file
If your project has a custom iOS launch screen in the .xib format, it needs to be converted to a Storyboard file. This can typically be achieved by creating a new Storyboard file in Xcode and then copying the UI elements from your .xib board to the new Storyboard.
6. Update app navigation to support React Native Navigation 4
See the above section regarding React Native Navigation 4 for instructions regarding this task.
6. Update Travis configuration (if applicable)
If you're using Travis CI, update your travis.yml file to specify Xcode 11 for your iOS tests:
- osx_image: xcode10.1
+ osx_image: xcode11.3
7. Launch your app and test!
Getting Started
- Flagship Technical Introduction
- Setting up Your Development Environment
- Getting Started with Flagship
- Creating a Flagship App
How To
- Running Flagship Apps
- Managing Environments
- Creating App Icons
- Creating Launch Screens
- Signing Your Apps
- Using React Native Permissions v2
- Using SSL Certificate Pinning
- Initializing Multiple Xcode Targets
Major Releases