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

Question

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 a

Answer 1

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:

@Override
public FrameLayout createViewInstance(ThemedReactContext context) {
    final FrameLayout view = new FrameLayout(context);
    MyFragment fragment = MyFragment.newInstance();
    // Add the fragment into the FrameLayout
    reactContext.getCurrentActivity().getFragmentManager()
            .beginTransaction()
            .add(fragment, "My_TAG")
            .commit();
    // Execute the commit immediately or can use commitNow() instead
    reactContext.getCurrentActivity().getFragmentManager().executePendingTransactions();
    // 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 (
      <View>
        <Text>Hello</Text>
        <RCTPreferenceView
          {...this.props}
          style={{ height: "80%", width: "100%" }}
        />
      </View>
    );
  }
}

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

Answer 2

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