Integrate Native module w/o Auto Linking in React Native

Photo by Andriyko Podilnyk on Unsplash

This week I had to help one of my engineers understand how to integrate a Native Module that is not enabled by Auto Linking and how it works for iOS and Android. It might happen to one of us who is not familiar with changes that occurred in the React Native ecosystem over the years.

The following are the reasons you might have to use manual linking Native modules for iOS, Android, or both.

• There is a 3rd party, and they don't yet support or configured Auto Linking
• The 3rd party you are using is creating issues with iOS/Android builds

For example, when adding flipper-plugin-reactotron, you need to add react-native-flipper as a dependency. In this case, the flipper dependency copies the scripts to debug and release targets. As you know already, Flipper only supports in debug scheme. Hence, we need this solution.

Here is how you can achieve it-

1. Run auto-linking manually
   react-native link <module-name>

2. Review and commit changes for iOS and Android
   git commit -am "Add 3rd party module - XYZ"

3. Disable auto-linking for that particular module such that React Native stops warning or error in your console.

   • Create a file react-native.config.js, if not exist, in your project root dir. If not, add to the dependencies object.

4. Commit the file changes
   git commit -am "Ignore React Native auto-linking for react-native-flipper"
   https://gist.github.com/rnagella/318c43a2d75e845395a87f581a8e71ab

5. In case, you need to update to next version. You need to unlink and link it again

   • react-native unlink <module-name>
   • git commit -am "Unlink <module-name>"
   • yarn upgrade --latest
   • Comment the dependency within react-native-config.js
   • react-native link <module-name>
   • git commit -am "Update <module-name> to latest"