Getting Started: Android Integration with existing apps is inaccurate and outdated! #2118
Labels
Stale
Issues/PR that are not getting much activity and are closer to be closed
📼 Outdated Docs
Documentation is there, but outdated or wrong.
Description
The current docs for integration with Android app are inaccurate and outdated: https://reactnative.dev/docs/integration-with-existing-apps
I ran into this as I was trying to set up a brand new Android app with React Native and was mislead by the official docs and couldn't get the integration to work on the latest React Native version (v0.63).
When I googled a bit I found a Medium article by Danial which walks through the latest changes needed for Android: https://levelup.gitconnected.com/how-to-integrate-an-existing-android-app-with-react-native-6403ac4724f3
I was able to get the setup to work and so I think we need to make the effort to update the official docs so other developers don't run into the same roadblock.
Updates needed
Configuration
Here are the configuration changes needed for
react-native: 0.60+
Use Hermes JS Engine
Docs: https://reactnative.dev/docs/hermes
Usage:
yarn add hermes-engine
Use JSC build scripts for Android
Docs: https://github.com/react-native-community/jsc-android-buildscripts#readme
Usage:
yarn add jsc-android
Setup Flipper
Docs: https://fbflipper.com/docs/features/react-native/
Usage: Flipper is enabled out of the box in React Native version 0.62 and higher. But it still needs some config in
DEBUG
mode.Setup Autolinking
Docs: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md#platform-android
Usage: Need to add
native_modules.gradle
toSettings.gradle
andapp/build.gradle
filesUsage
Here are the usage changes needed for
react-native: 0.60+
Implement
ReactApplication
in theMainApplication
classDocs: https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/ReactApplication.java
Use
ReactNativeHost
to manageReactInstanceManager
The current docs suggest creating and managing your own instance of
ReactInstanceManager
which isn't recommended (that's the sole job ofReactNativeHost
)Docs: https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java
Initialize
Flipper
inMainApplication
Docs: https://github.com/facebook/react-native/blob/973198667d7bbbf3b5d8890fc0a53dc99d0bce18/RNTester/android/app/src/main/java/com/facebook/react/uiapp/RNTesterApplication.java#L68
Extend
ReactActivity
for any React Native screenThe current docs don't even use
ReactActivity
- which shows how outdated the docs are.ReactActivity
basically does all the basic setup for Android React Native screen such as setting up keys for dev menu, back button handling, getting instances ofReactNativeHost
,ReactInstanceManager
etc.Docs: https://github.com/facebook/react-native/blob/973198667d7bbbf3b5d8890fc0a53dc99d0bce18/RNTester/android/app/src/main/java/com/facebook/react/uiapp/RNTesterActivity.java#L17
Next Steps
Most of the changes outlined above such as using
ReactApplication
,ReactNativeHost
, andReactActivity
have already been implemented in the official RNTester application. So we know it works and more importantly, that it's the right way to set up React Native in an Android app.If these changes are welcome, I can go ahead and submit a PR to update the docs with the above-outlined changes. 🙂
Documentation version
Current (outdated) documentation for integration React Native in Android: https://github.com/facebook/react-native-website/blob/master/docs/integration-with-existing-apps.md
The text was updated successfully, but these errors were encountered: