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
• 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

Tooling Updates

Please note that Xcode 11+ is mandatory for using Flagship 9.

React Native 0.60 & 0.61

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 4

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

iOS Launch Screens: XIB to Storyboard

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.

RN 60 Auto-Linking

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

AndroidX

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

TypeScript

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.

Upgrade Instructions

1. Update your project's dependencies to the following:

• @brandingbrand/flagship*: "^9.0.0"
• "react": "16.11.0",
• "react-native": "0.61.5"
• "@babel/core": "^7.6.2",
• "@babel/runtime": "^7.6.2",
• "metro-react-native-babel-preset": "^0.56.0",
• "typescript": "~3.7.2"

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. 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.

5. Update app navigation to support React Native Navigation 4

See the above section regarding React Native Navigation 4 for instructions regarding this task.

6. Launch your app and test!