Skip to content

Flagship 10

Jump to bottom
Brett Weissbart edited this page Oct 9, 2020 · 23 revisions

Contents

Features & Changes

React Native 0.63

Flagship 10 upgrades React Native from 0.62 to 0.63. This upgrade introduces several new features, but unlike the upgrade from 0.59 to 0.60, does not require substantial changes to projects that use Flagship. Some highlights:

  • Android SDK targets API 29
  • LogBox: brand new interface to display errors and warnings in development
  • New Pressable component
  • Native system colors exposed to RN

The full blog post can be found here: https://reactnative.dev/blog/2020/07/06/version-0.63

This release also supports Flipper, Facebook's open-source native app debugger. Read more on the RN blog and download the desktop application from the Flipper website. When you run Flipper the first time you'll be prompted to download a few additional libraries to support RN debugging.

React Native Navigation v6

Flagship 10 upgrades React Native Navigation from v4 to v6; this is required to support iOS 14. The upgrade is mainly behind-the-scenes; you'll likely only need to upgrade your dependency to support this version.

Version 5 includes some minor breaking changes to the API: https://github.com/wix/react-native-navigation/blob/master/CHANGELOG.md#breaking-changes-1

For a full list of changes, please refer to their changelog: https://github.com/wix/react-native-navigation/blob/master/CHANGELOG.md

React Native Permissions v2

Flagship 10 updates React Native Permissions to v2, which has a new linking scheme and an updated API. To view upgrade and usage instructions, please refer to the following wiki page: https://github.com/brandingbrand/flagship/wiki/Using-React-Native-Permissions-v2

TypeScript 4

Flagship 10 upgrades TypeScript to version 4. You can view the full list of features in Microsoft's blog post: https://devblogs.microsoft.com/typescript/announcing-typescript-4-0/

While TypeScript 4 doesn't have any substantial breaking changes (only a few edge cases are affected), expect to see some TypeScript errors in your project as TS 4's more robust checks may catch errors that were ignored before.

Tcomb Form Deprecations

The Flagship team is preparing to remove tcomb-form-native and form components built with it in Flagship 11. tcomb-form-native is a complex, poorly-documented library and Flagship's Form wrapper adds an additional layer of complexity.

Going forward, forms within Flagship will be written with Formik, a form library built from the ground up for React and React Native. The team is working on providing Formik versions of many of the existing forms.

The following components have been marked deprecated in Flagship 10 and will be removed in Flagship 11:

  • Form
  • AddressForm
  • CMSFeedback
  • ChangePasswordComponent
  • CreditCardForm
  • EmailForm
  • StatefulTextbox
  • LoginForm
  • PromoForm
  • RegistrationForm
  • SingleLineForm
  • UpdateNameOrEmail

React Native Web 0.13

Support for react-native-web is updated from version 0.11 to version 0.13. Major changes include aligning with React Native, following modern React conventions, and cleaning up the code.

Flagship has been updated to support RN Web 0.13, but you may have to take action within your project to update code to the latest APIs. Review the changelogs, especially the Breaking Changes sections, for more information.

Fastlane Updates

https://github.com/brandingbrand/flagship/pull/1288

This removes the apiToken env config that could be used to configure App Center uploads. This was previously deprecated in favor of passing in an environment variable instead: APPCENTER_API_TOKEN.

This also removes the :beta lanes from the Fastfiles, as these attempted to upload builds to Hockeyapp which has been shut down. The available lanes are :appcenter and :build for iOS and :appcenter, :appcenter_bundle, and :build for Android.

SSL Certificate Pinning

Flagship 10 upgrades FSNetwork to support SSL Certificate Pinning. For setup and usage instructions, please refer to our wiki page on the subject: https://github.com/brandingbrand/flagship/wiki/SSL-Pinning-with-FSNetwork

Multiple iOS Targets

Flagship 10 introduces support for adding multiple targets to iOS projects. Please refer to the following wiki for details: https://github.com/brandingbrand/flagship/wiki/Initializing-Multiple-Xcode-Targets

Custom Fields Support for Google Analytics

The Google Analytics adapter for fsengage has been updated to support adding custom fields to analytics calls. For more information, please refer to the fsengage README.

analytics.impression.product({
  component: 'ProductComponent',
  properties: {
    identifier: 'abc123',
    name: 'Large Blue Pants',
    gaQueryParams: { // <-- new
      tcc: 'SALE45'
    }
  }
});

Server-Side Rendering

Flagship 10 includes enhanced support for running fsweb projects with server-side rendering. Documentation on adding this functionality to Flagship web projects can be found in the Running Flagship Apps guide.

Upgrading to Flagship 10

1. Update These Dependencies (if in your project)

  • "typescript": "^4.0.2"
  • "@babel/core": "~7.8.4"
  • "react": "^16.13.1"
  • "react-native": "^0.63.2" (see section: React Native 0.63)
  • "@react-native-community/cli-platform-android": "^4.7.0"
  • "@react-native-community/cli-platform-ios": "^4.7.0"
  • "@react-native-community/cli": "^4.7.0"
  • "@types/react-native": "^0.63.18"
  • "babel-jest": "^25.1.0"
  • "babel-loader": "~8.0.6"
  • "jest": "^25.1.0"
  • "metro-react-native-babel-preset": "^0.59.0"
  • "react-native-web": "^0.13.12"
  • "@react-native-community/async-storage": "^1.9.0"
  • "react-native-navigation": "^6.0.0" (see section: React Native Navigation v6)
  • "react-native-permissions": "^2.0.0" (see section: React Native Permissions v2)

2. Change These Dependencies (if in your project)

  • "tcomb-form-native" ==> "@brandingbrand/tcomb-form-native": "^0.6.20"

3. Remove These Dependencies (if in your project)

  • "@babel/runtime"

4. Update React Native Permissions

If your project uses react-native-permissions, you need to upgrade to version 2. See our wiki page for full instructions, but to summarize:

  1. Update the version number of react-native-navigation in package.json to ^2.0.0
  2. Update your project's env files to list the permissions your project needs to support
  3. Update your project's envs to remove hardcoded usage descriptions related to permissions
  4. Update your code to adhere to the new request and response schemes in the version 2 API.

5. Audit react-native-web API Changes

As noted, react-native-web has been bumped to include two major new releases. If your project uses web, review the changelog to verify that you're not using any features that have changed or been removed:

6. Update Travis Configuration

If you use Travis for CI, update your .travis.yml to support the newest frameworks:

node_js: '12' // or above

osx_image: xcode12

Getting Started

How To

Major Releases

Clone this wiki locally