Home

Integrate react native into android fragment

Dependencies:

1. "react": "16.0.0-alpha.12.
2. "react-native": "0.46.0".
3. "react-native-code-push": "3.0.1-beta".

Setting up

1. Follow the Microsoft guides to setup CodePush for your android app (I recommend to do it manually if your integrating react native with an existing android app). We only need the part that guides you how to link code push projects to your app, the rest is ignorable.

2. As of this writing I'm using Android Studio 3 Canary 5 so if you want to use my example or run it, you should either get AStudio preview version or downgrade the gradle file to suite your needs.

3. Copy my BaseApplication.java and ReactBaseFragment.java to your code (Remember to add this line your android manifest file in application tag to android:name=".BaseApplication" or whatever your application name, path is). Everything that I implement in BaseApplication.java is to create a ReactNativeHost to host ReactInstanceManager to server as a bridge between React Native and Android app. Also, in base application input your staging/production key for code push.

4. As of now you only need to create Fragment by extending ReactBaseFragment app and override getMainComponentName() method and make it return or receive the component's name that you wish to open.

5. Incase you want to pass Bundle from android to react-native you can override the onActivityCreated and write your own mReactRootView.startReactApplication code Ex:

 @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
       try {
           Bundle initialBundleThatNeedToBePass = new Bundle();
           //Pass parameter to bundle
           mReactRootView.startReactApplication(
                   mReactInstanceManager,
                   getMainComponentName(),
                   initialBundleThatNeedToBePass
           );
           findViews();
       } catch (NullPointerException e) {
           Log.d("ReactBaseFragment", "mReactRootView or mReactInstanceManager is null");
       }
    }