Upgrading to Flagship 3 (React Native 0.57)

Flagship 3.0 upgrades support of React Native to 0.57.8 and includes dependency bumps and native changes as required for RN 57.

• Developer requirements
• Major dependency changes
• Platform changes
• React Native changelog
• React getDerivedStateFromProps()
• Upgrade steps
  • 1. Update dependencies
  • 2. Update Travis OSX image
  • 3. Verify iOS Launch Screen

Developer requirements

• XCode 10: Refer to this guide on how to install Xcode 10 without overwriting Xcode 9
• Android SDK 27: Install in Android Studio via Tools > SDK Manager
• Cocoapods: Upgrade to 1.6.1+ if you're experiencing EXPANDED_CODE_SIGN_IDENTITY: unbound variable build error

Major dependency changes

• React Native 0.57.8
• React 16.6.3
• Babel 7.0.0

Platform changes

• Xcode 10
• Android SDK 27
• Gradle 4.4

React Native changelog

View React Native's full release notes here: https://github.com/facebook/react-native/releases

View changes to the RN project template here: https://github.com/ncuillery/rn-diff/compare/rn-0.55.4...rn-0.57.0

React getDerivedStateFromProps()

In 16.4.0, the React team fixed a bug that had caused unintended behavior with the getDerivedStateFromProps lifecycle method. In previous versions of React, getDerivedStateFromProps would only be invoked whenever the parent component triggered a re-render. However, getDerivedStateFromProps was actually intended to be called whenever its component renders. Many projects leveraged the buggy behavior of getDerivedStateFromProps to use it as a replacement for componentDidUpdate to perform actions whenever the props change; however, this was never the intention of the method. As such, getDerivedStateFromProps will now get called more than before and may lead to breakages, such as if an app was using the method to perform initialization tasks.

Read React's reasoning for the change and why misusing getDerivedStateFromProps was an anti-pattern: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

Here's an example refactor of getDerivedStateFromProps that occurred in PirateShip because of this change: https://github.com/brandingbrand/flagship/commit/77177b3b0f49e36395b23b8ee48fb4b417690065#diff-1408d1690719c0ff6c23927fc5592af7

Upgrade steps

1. Update dependencies

Update your dependencies to the following:

• Upgrade all Flagship dependencies (e.g., @brandingbrand/flagship, @brandingbrand/fsapp, etc) to the latest 3.0.x release
• "react": "16.6.3"
• "react-native": "0.57.8"
• "@types/react-native": "0.57.30"
• "react-native-navigation": "1.1.493"
• "jsc-android": "236355.x.x" (if applicable) (the x's are intentional and should stay as-is)
• "react-native-svg": "^8.0.0" (if applicable)

If you receive errors running your application that relate to duplicate modules being found in the js haste map, chances are that you have multiple versions of the specified package in your node_modules. You can see a list of all installed npmdependenciesin your project by running npm list. Once all versions of your dependency are in sync,npm list should show the dependency as "deduped" meaning that all dependencies point to the same package and version.

For this or any react-native bundler error: Plugin/Preset files are not allowed to export objects, only functions. Check whether you have .babelrc file generated under project folder first. If yes remove the file and try again.

2. Update Travis OSX image

Update your .travis.yml file and update any instance of osx_image to xcode10.1

3. Verify iOS Launch Screen

While we haven't identified any breaking issues with launch screens in Xcode 10, you may see some problems arise on new devices (e.g., iPhone XS Max or XR) if your launch screen doesn't use proper constraints. (An example is constraining a Tab Bar to the global view instead of a Safe Area).

1. In Xcode 10, open your app's .xcworkspace file inside of the ios directory
2. In the file navigator, open LaunchScreen.xib which is located within a directory with the name of your project
3. Use the "View as" tools in the interface builder to preview your Launch Screen on different phones
4. Make changes as appropriate and copy the .xib file and .xcassets directory into your project, typically in assets/launchScreen/ios