Home » Android » How do we get an Android fragment to show up in react-native?

How do we get an Android fragment to show up in react-native?

Posted by: admin May 14, 2020 Leave a comment


I’ve tried building native ui components and it is often a hit or miss. The component does not appear to be rendered in react-native.

Though, for this question, I am specifically trying to render an Android fragment inside react-native but nothing is showing up. Example code:

public class PreferenceViewManager extends SimpleViewManager<FrameLayout> {
    public static final String REACT_CLASS = "RCTPreferenceView";

    private WeakReference<Activity> activityWeakReference;

    public PreferenceViewManager(WeakReference<Activity> activityWeakReference) {
        this.activityWeakReference = activityWeakReference;

    public String getName() {
        return REACT_CLASS;

    public FrameLayout createViewInstance(ThemedReactContext context) {
        Log.d(REACT_CLASS, "PreferenceView createViewInstance");
        final FrameLayout view = new FrameLayout(context);
        // Testing if the view does get rendered, it should show white even if fragment is not rendered!
        // not sure where to call fragment beginTransaction properly, the code below is just for testing
        view.postDelayed(new Runnable() {
            public void run() {
        }, 2000);
        return view;

    public void onAfterUpdateTransaction(FrameLayout view) {

        activityWeakReference.get().getFragmentManager().beginTransaction().replace(view.getId(), new PreferenceView()).commit();
        Log.d(REACT_CLASS, "PreferenceView Commit"); // for debug

With the above view manager, the place where the view is supposed to be is not even colored white signifying that the FrameLayout itself does not get rendered.

What am I doing wrong?

How to&Answers:

Actually you are almost in the right direction. The reason your FrameLayout is not rendered is because you did not explicitly add a style in ReactNative to specific its height and width. However, even so, your fragment will not be rendered as well. There are a few changes that you can perform to render your fragment.

In your ViewManager, perform this few changes:

public FrameLayout createViewInstance(ThemedReactContext context) {
    final FrameLayout view = new FrameLayout(context);
    MyFragment fragment = MyFragment.newInstance();
    // Add the fragment into the FrameLayout
            .add(fragment, "My_TAG")
    // Execute the commit immediately or can use commitNow() instead
    // This step is needed to in order for ReactNative to render your view
    addView(fragment.getView(), LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
    return view;

Then in your ReactNative Component

class ExampleComponent extends React.Component {
  render() {
    return (
          style={{ height: "80%", width: "100%" }}

Hope this helps someone out there who is trying to render a fragment inside a ReactNative View


You would have to expose the Fragment in a view manager and then bridge the view manager to the react native javascript code.