improving 0.60 upgrade notes

[kelset]

Based on this conversation on twitter, Nick & Ram (& others) want to help people upgrading to 0.60 avoiding the pitfalls they've fallen into.

The most helpful approach will likely be by adding inline comments - feature we added via #18 (but still needs to be properly documented, see #28) - so let's use this issue to coordinate about what to write where :)

(protip: we have also been using dedicated issues like #47 to give in-depth descriptions and linked that inline)

[rabingaire]

One problem that I faced was with pods, after linking the native dependency, I had to manually run command pod install and the way you link fonts has been changed and I had to do lot of work to make custom font work. (It might me because, I didn't knew about new way of linking the fonts)

[JonnyBurger]

Some general education about how linking works on iOS in the context of React Native would help a lot of people I think!

• What autolinking does under the hood

• When to run pod install

• How to opt out of autolinking for specific modules
  Since not every module works well with this yet, this would give users another chance to bail out and get their build working.

• Explain different way of adding libraries to your project:

  • "Linked Framework and Libraries"
  • "Embedded Binaries"
  • "Header Search Paths"
  • "Other Linker Flags"
  • "Build Phases -> Compile Sources"
  • Dragging another Xcode project into your project
  • Definining a dependency in your Podfile, like pod 'RNVideo', :path => '../../node_modules/react-native-video/'

  What these sections do and how they should be configured.
  Having these configured in the wrong way can cause obscure and hard to understand Xcode error messages. In the context of upgrading to RN 0.60, I think users need to remove all traces of previous native module installations, otherwise things can get linked twice and break.

I would gladly read a longer post if it helps me understand how the architecture works 😃 The better understanding I get, the more easily I can resolve issues myself.

Despite some upgrade challenges, I should mention that the upgrade helper is really awesome and makes it a lot easier to upgrade 😁👏

[pvinis]

I can help with that documentation. Where should we put it? Should we just start writing it out here?

[lucasbento]

@pvinis: my suggestion is to write everything here and later on we check where to put what, some of them can be the inline comments in code and others can have their separate section inside of a Troubleshooting part.

[dayhaysoos]

Started my upgrade process from 0.59.8 to 0.60.3

This post is just for ios

Using upgrade helper:

https://react-native-community.github.io/upgrade-helper/?from=0.59.8&to=0.60.3

I just updated everything in package.json, new additions to my package.json:

-I didn't have the lint command for scripts object
-I didn't have react-test-renderer
-I didn't have @babel/core or @babel/runtime

I also didn't have .flowconfig, don't know what it does

I added Cocoa Pods to gitignore, for some reason I never thought to do this before when I was using Cocoa Pods this whole time. Major yikes, as it's especially the same as not having node_modules in .gitignore

I had node version 10.5.0, I had to upgrade to like v12 lol eslint v6 isn't compatible with node 10.5.0

Gonna delete node_modules and reinstall with yarn and run-ios to see what happens.

This was the result:

error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: 
  - @react-native-community/async-storage (to unlink run: "react-native unlink @react-native-community/async-storage")
  - react-native-code-push (to unlink run: "react-native unlink react-native-code-push")
  - react-native-gesture-handler (to unlink run: "react-native unlink react-native-gesture-handler")
  - react-native-iap (to unlink run: "react-native unlink react-native-iap")
  - react-native-linear-gradient (to unlink run: "react-native unlink react-native-linear-gradient")
  - react-native-reanimated (to unlink run: "react-native unlink react-native-reanimated")
  - react-native-splash-screen (to unlink run: "react-native unlink react-native-splash-screen")
  - react-native-webview (to unlink run: "react-native unlink react-native-webview")
  - tipsi-stripe (to unlink run: "react-native unlink tipsi-stripe")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.

I gotta unlink all of these manually

Not 100% sure what I should be doing with pods. I have added everything from the upgrade helper, left what I already put in there. I'm guessing I should delete my pods folder, the pod lock file and do pod install

Just did pod deintegrate

5k file changes HHHNNNGGGGG

Getting errors regarding that the libraries I'm using like RN splash screen can't be found. I think I need to link manually

Done, now I'm getting HELLA duplicate symbol errors, like this for example:

❌  duplicate symbol _OBJC_IVAR_$_RCTHTTPFormDataHelper._multipartBody in
> libReact-RCTNetwork.a(RCTNetworking.o)
> libRCTNetwork.a(RCTNetworking.o)

I've never seen most of these libraries, I'm actually not sure what to do from here. Gonna do some Googling

This worked for me:

facebook/react-native#23613 (comment)

Build successful, however metro bundler didn't get kicked off at all.

So it looks like I need to run react-native start in a separate terminal first, then run react-native run-ios

It looks like I've successfully upgraded iOS, however, my app seems to be frozen on the splash screen. Going to troubleshoot on my own real quick

Update

So I need to link tons of libraries in my pod file. RN Gesture Handler, RN-iap, I needed to add a new Firebase pod... Pretty much everything I unlinked I need to re-link again in pod files

Also, I switch to the Eslint config provided by a a new RN project and I'm getting very weird conflicts with single-quotes. I would prefer single quotes so that's configed in my eslint.js file, but prettier wants to put double quotes. No idea how to shut prettier up:

https://gfycat.com/impressionablebiodegradableannelida

One thing worth mentioning, these errors do not show up on the phone. I can only see them on xcode. I got nothing but success messages on metro bundler and build process

Update 2

A N D R O I D

okay, this space will be for my attempt on upgrading android too. I only did all the changes for iOS

My first step was to run react-native run-android and hope to god that everything is okay.

conclusion: there is no god

Going through the changes on app/builde.gradle

I didn't have this line, it wasn't highlighted green:

implementation "com.facebook.react:react-native:+"

I figured it'd be easiest to get the differences from making a new React Native project and referencing from there. I have so many dependencies and stuff in my android app that I can't tell what to remove and what to keep. It's been helping so far, still sorting out library issues

[pvinis]

Thanks for this. That's a bunch of possible problems for many people. I'll take some time to address them. 0.60 will be messy because of the autolink and pods and half of the libs not ready for it. :/

[nxz91]

@rabingaire How has the way you link fonts been changed? Can't get it to work.

[dayhaysoos]

@pvinis
I realized yesterday that every library I've unlinked I need to link myself in the Pod file.

When is auto-linking supposed to happen? Does auto-linking add the libs to Pods? I just want to see what a successful auto-link is like

[kelset]

@ndejesus1227 AFAIK when you upgrade you should modify the Pod file to be similar to the new one, unlink the libraries, and then the autolink will not modify the Pods file - but when you run the pod install it will add the pods and you can see that happening via the podlock file.

But let me cc in @thymikee since he could explain this better

[thymikee]

What @kelset said. Successful autolink will update your Podfile.lock with RN libraries that you have in your dependencies (or local if provided). It will also signal this in the pod install output:

[dayhaysoos]

Thank you @kelset and @thymikee

Okay so should I remove all the pod (except for the RN provided stuff) from my pod file, delete my Pods and Podfile.lock and run pod install again to confirm that the libraries in my dependencies are getting auto linked? I've done so much manual re-adding that I can't actually tell if auto-linking is doing its job.

I also seem to be getting a different experience from react-native run-ios and running the build on Xcode.

run-ios is telling me to go back to unlinking all my linked libraries and it's NOT kicking off the metro bundler

doing it on xcode doesn't give me the warnings, it kicks off metro bundler but ends up failing due to a missing module (but it won't specify what modules)

Both lead to the app freezing at the splash screen, though. Doing react-native run-ios provides no errors at all, where xcode provides very vague errors

Update

So after running pod install, I am not getting a single library from my node_modules in my pod file.

That whole, "Detected React Native pod modules" never happens for me.

feelsbadman.jpg

[thymikee]

@ndejesus1227 you can run yarn react-native config – it will output a JSON configuration that is used for autolinking. It should have "dependencies" entry with your deps included.

It's a good idea to bump the CLI the RN libraries version to the latest, as some of them adopted changes that make autolinking work out of the box.

I can see you upgraded Node to 12. Please make sure it's 12.4 or lower, as we got reports that 12.5+ causes Metro to run out of memory.

Could you share the project somehow (could be through mail if it's not public)?

[dayhaysoos]

@thymikee

I downgraded to 12.4, thanks.

I think I have the latest version of the CLI, although I will admit that I feel like my project has been out of sync with metro bundler since upgrading from .54 to .59 (before my release builds on android I have to manually run the bundler command)

Just wanted to give you that context.

As far as the config file, I see the dependencies just fine. For some reason they aren't getting picked up when it's time to autolink.

My project is here, I made a branch called rn-upgrade:

https://github.com/ndejesus1227/t7-chicken-plus/tree/rn-upgrade

[thymikee]

You're missing the most important part that makes autolinking happen: use_native_modules!

--- a/ios/Podfile
+++ b/ios/Podfile
@@ -28,6 +28,8 @@ target 't7chickenplus' do
   pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

+  use_native_modules!
+
   # Pods for t7chickenplus

   target 't7chickenplusTests' do

Also, RN 0.60 ships with Metro 0.54.1 so it's probably safer to use that version of the babel preset (however 0.55 may work, I didn't try that)

[dayhaysoos]

@thymikee god damn it! When I was copy/pasting I was assuming all I needed was the RN pods.

I'm getting this now:

Undefined symbols for architecture x86_64:
  "_GADAdSizeFromCGSize", referenced from:

I will spend some time looking into that, though.

Metro bundler still isn't firing from react-native run-ios. I'm not using any babel preset for it as far as I know, I'll investigate that as well.

[dayhaysoos]

Just fyi @thymikee iOS works now!

So the biggest thing was the user_native_modules, after that, it was only working on Xcode, not react-native run-ios

So I had to manually go and delete the build folder ios/build manually and run the react-native run-ios again and it worked.

Only weird thing now is that I'm getting a bunch of deprecation warnings. It's saying that I need to get rid of componentWillUpdate and componentDidReceiveProps, however, I'm not using any of those in my code.

Going to now try to get Android up and running. Thank you for your help!

[lucasousi]

@rabingaire How has the way you link fonts been changed? Can't get it to work.

rnpm is deprecated now.
Go to react-native.config.js and put your assets links, like:

module.exports = { dependencies: { "react-native-gesture-handler": { platforms: { android: null, ios: null } } }, assets: ['./src/assets/fonts'] };

after that, run react-native link command

[thymikee]

@lucasousi gesture handler is perfectly valid with autolinking, please don't disable it.

[erdemkaragoz]

module.exports = {
  assets: ['./src/assets/fonts/']
};

after running react-native link works, thanks.

@rabingaire How has the way you link fonts been changed? Can't get it to work.

rnpm is deprecated now.
Go to react-native.config.js and put your assets links, like:

module.exports = { dependencies: { "react-native-gesture-handler": { platforms: { android: null, ios: null } } }, assets: ['./src/assets/fonts'] };

after that, run react-native link command

[lucasousi]

@lucasousi gesture handler is perfectly valid with autolinking, please don't disable it.

I just disabled for tests and I didn't mind pasting the code here.

I will adjust now.

Thanks