Skip to content

Commit

Permalink
Upgrade React Native from v0.59 to v0.60.
Browse files Browse the repository at this point in the history
Closes zulip#3548!

Using the RN Upgrade Helper, a web app showing the diff from the
release/0.59.10 and the release/0.60.6 branches of the
`react-native-community/rn-diff-purge` repo, at
https://react-native-community.github.io/upgrade-helper/?from=0.59.10&to=0.60.6.

A lot of work has already been done toward this:

- most of the fixes necessary to adapt to Flow 0.98, without
  upgrading Flow yet (zulip#3827). We do the upgrade in this commit, with
  warnings temporarily suppressed, for smaller commits.

- updating to AndroidX (zulip#3852)

- migrating to using CocoaPods at all (zulip#3987)

Also, do what needs to be done atomically with the upgrade, as
follows.

----- Platform-agnostic --------------------------------------------

After the upgrade, we get this peer dep warning:

warning " > [email protected]" has incorrect peer dependency "react-native@>=0.57 <0.60".

`[email protected]` is the minimum supported with RN
v0.60.0. But if we try to get `[email protected] before the
upgrade, we get this warning:

warning " > [email protected]" has incorrect peer dependency "react-native@>=0.60 <0.62".

So, handle `react-native-webview` in this commit.

Also run `yarn yarn-deduplicate && yarn`, as prompted by
`tools/test deps`.

We've left "scripts" in `package.json` alone; ours work fine as-is.

----- Android ------------------------------------------------------

There are no updates on the Android side that must happen atomically
with the RN upgrade.

Some Android changes never appear in this series:

- Adding the `debug.keystore` file and its config in
  `android/app/build.gradle`. See more explanation and a code
  comment there in another commit in this series.

- Adding `android.useAndroidX=true` and
  `android.enableJetifier=true` in `android/gradle.properties`.
  These were done in e433197.

- Deleting `android/keystores/BUCK` and
  `android/keystores/debug.keystore.properties`: We don't use Buck
  (removal of some of its boilerplate was 1c86488), and we don't
  have an `android/keystores` directory. As mentioned in another
  commit in this series, we're happy with the Android
  Studio-provided debug keystore, and our own release keystore
  described in our release guide.

----- iOS ----------------------------------------------------------

facebook/react-native@2321b3fd7 appears to be the only cause of iOS
changes that must happen atomically with the RN v0.60 upgrade.

In that commit, all the "subspecs" that were nested under the
"React" pod are un-nested so they each become their own pod, with
many of these living in their own directory under
node_modules/react-native/Libraries [1].

In our own code, this means changing our Podfile to refer to all
these new pods, instead of the "React" pod's subspecs. So, do.

Our Podfile has a list of "Pods we need that depend on React
Native". We must also be sure all the dependencies in this list
adapt to facebook/react-native@2321b3fd7.

The syntax for pointing explicitly to a subspec is a slash, as in
"React/Core" [2]. Knowing this, we check that list for pods that
explicitly depended on those subspecs, with "React/[...]":

```
grep -Rl dependency.*React/ --include=\*.podspec \
  --exclude="node_modules/react-native/*" node_modules
```

There are two, and they both have new versions that adapt to the new accepted shape:

- `zmxv/react-native-sound@2f2c25a69`: "React/Core" -> "React"
- `joltup/rn-fetch-blob`, `01f10cb10^..0f6c3e3cc`: "React/Core" -> "React-Core"

So, take these new versions, and job done.

Some iOS changes from the upgrade guide don't appear in this series.
They fall neatly into a few touched files:

- ios/ZulipMobile-tvOS/Info.plist: We're not (yet) in the TV
  business. ;)

- ios/ZulipMobile.xcodeproj/project.pbxproj: The purge of many large
  chunks of this file, often known as "the Xcode config file", was
  already done, in 33f4b41.

- ios/ZulipMobile.xcworkspace/contents.xcworkspacedata: After
  33f4b41, this file already looks the way it should.

- ios/ZulipMobile/Info.plist: These changes are done upstream in
  facebook/react-native@7b44fe56f. They fix a duplication issue and
  a code-comment issue, which were apparently causing build
  failures. Our code doesn't have these issues to begin with.

[1]: They do still live in node_modules. It's possible for pods to
     be hosted online and downloaded on `pod install`, npm-style.
     For an example, see the 'Toast' dependency in
     node_modules/react-native-simple-toast/react-native-simple-toast.podspec.
     But that's not what's happening here, yet.
     facebook/react-native@2321b3fd7 hints that this will be the way
     of the future for React Native, "to make the experience nicer
     for library consumers".

[2]: https://guides.cocoapods.org/syntax/podspec.html#subspec
  • Loading branch information
chrisbobbe committed Jun 1, 2020
1 parent 833c581 commit 309a91f
Show file tree
Hide file tree
Showing 5 changed files with 637 additions and 711 deletions.
2 changes: 1 addition & 1 deletion .flowconfig
Original file line number Diff line number Diff line change
Expand Up @@ -134,4 +134,4 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
suppress_comment=\\(.\\|\n\\)*\\$FlowMigrationFudge

[version]
^0.92.0
^0.98.0
43 changes: 21 additions & 22 deletions ios/Podfile
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,28 @@ platform :ios, '10.3'

require_relative '../node_modules/react-native-unimodules/cocoapods.rb'

# This list will need to change for RN >= v0.60. If you're changing it
# for any other reason, first look at the example Podfile for v0.59 at
# https://github.com/facebook/react-native-website/blob/ded79d2cf/docs/integration-with-existing-apps.md#configuring-cocoapods-dependencies.
target 'ZulipMobile' do
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge',
'DevSupport',
'RCTText',
'RCTNetwork',
'RCTWebSocket',
'RCTAnimation',
'RCTImage',
'RCTPushNotification',
'ART',
'RCTAnimation',
'RCTCameraRoll',
'RCTActionSheet',
'RCTGeolocation',
'RCTLinkingIOS', # RCTLinking?
'RCTSettings',
'RCTVibration',
]
# Pods from React Native
pod 'React', :path => '../node_modules/react-native/'
pod 'React-Core', :path => '../node_modules/react-native/React'
pod 'React-DevSupport', :path => '../node_modules/react-native/React'
pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'
pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
# This is deprecated upstream; removing it is #4115. See
# https://reactnative.dev/docs/pushnotificationios.html.
pod 'React-RCTPushNotification', :path => '../node_modules/react-native/Libraries/PushNotificationIOS'
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
Expand Down
Loading

0 comments on commit 309a91f

Please sign in to comment.