Getting Started: Android Integration with existing apps is inaccurate and outdated!

[Monte9]

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 to Settings.gradle and app/build.gradle files

Usage

Here are the usage changes needed for react-native: 0.60+

• Implement ReactApplication in the MainApplication class
  Docs: https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/ReactApplication.java

• Use ReactNativeHost to manage ReactInstanceManager
  The current docs suggest creating and managing your own instance of ReactInstanceManager which isn't recommended (that's the sole job of ReactNativeHost)
  Docs: https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java

• Initialize Flipper in MainApplication
  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 screen
  The 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 of ReactNativeHost, 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, and ReactActivity 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

[gedeagas]

+1 the docs on integration need an urgent update.

[stale]

👋 Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. Thank you for your contributions.

[Monte9]

Yes, it still needs to be updated! @Simek thoughts?

[stale]

👋 Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. Thank you for your contributions.

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.