Skip to content

Flagship 9

Jump to bottom
Brett Weissbart edited this page May 8, 2020 · 18 revisions

Contents

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

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

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.

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

Flagship forceLink

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",
    ...
  ]
}

A Note about 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:

  1. 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"
  1. 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
            }
        }
    }
}

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

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

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

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

How To

Major Releases

Clone this wiki locally