Load fragment in a React Native app

Question

I'm developing a bridge between an Android library of mine and ReactNative, to be able to use my library also on hybrid apps.

I first created a basic app with react-native init which has the default Android and iOS folders

Then I imported my library with gradle and created the files extending ReactContextBaseJavaModule and ReactPackage to make sure the App.js could see and call methods from my library, but now I have a problem.

One of these methods I call from React Native to my Android library gives back a Fragment I need to display and I am not sure how to do it.

So far I was able to write java code in the MainActivity.java present in the React Native project under the android folder to handle it in such a way

@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   fragment = MyLibrary.getFragmentMethod();
   getFragmentManager().beginTransaction().add(fragment, TAG).commit();
}

What I wanted to do instead is more like:

getFragmentManager().beginTransaction().replace(R.id.frame_layout_id, fragment, TAG).commit();

But I have no clue how to define which layout my React Native app would use

p.s. I tried to add the line setContentView(R.layout.main) in the onCreate method but that mede it so that the App.js was not visible anymore (probably because was overwriting the ReactNative "layout"

Answer 1

You can add your own container to the existing layout. For example:

window.decorView.findViewById<ViewGroup>(android.R.id.content)
            .addView(
                    FrameLayout(this).apply {
                        id = R.id.fragment_container
                        layoutParams = FrameLayout.LayoutParams(
                                FrameLayout.LayoutParams.MATCH_PARENT,
                                FrameLayout.LayoutParams.MATCH_PARENT
                        )
                    }
            )

Now you can add your fragment to this container. Also this library might be helpful - https://github.com/hudl/react-native-android-fragment