Android fragment view on react native page not showing up

Question

I'm trying to render an Android Fragment on react native page using react native bridge. As soon as I try to replace the react native view with the android fragment, it shows a complete blank view.

I used Layout Inspector and found out that the fragment view (containing the text view mentioned in the screenshot) is in the stack but are not show. Attaching the screenshot for the same. Layout Inspector screenshot

Code for Android:

protected FrameLayout createViewInstance( ThemedReactContext reactContext) {
      return new FrameLayout(reactContext);

    @Override
    public Map<String, Integer> getCommandsMap() {
        return MapBuilder.of(
                "create", 1
        );
    }

    @Override
    public void receiveCommand(FrameLayout root, int commandId, @Nullable ReadableArray args) {
        super.receiveCommand(root, commandId, args);
        int reactViewId = args.getInt(0);
        createFragment(root, reactViewId);
    }

public void createFragment(FrameLayout root, int reactViewId) {
        MyFragment fragment = MyFragment.newInstance(this.mCallerContext);
        mActivity = (FragmentActivity)mCallerContext.getCurrentActivity();
        mActivity.getSupportFragmentManager().beginTransaction()
                .replace(reactViewId, fragment, String.valueOf(R.id.my_view_id))
                .commitNow();
        mActivity.getSupportFragmentManager().executePendingTransactions();
    }

React native code:

const MyComponent = requireNativeComponent("MyComponent");


componentDidMount() {
        setTimeout(()=>{
            this.create();
        }, 2000);
    }

create = () => {
        const androidViewid = findNodeHandle(this.nativeComponentRef);
        UIManager.dispatchViewManagerCommand(
            androidViewid,
            UIManager.MyComponent.Commands.create,
            [androidViewid],
        );
    };

render() {
        return (
            <View style={{ height: "100%", width: "100%", flex: 1 }} >
                <Text> IN REACT NATIVE</Text>
             <MyComponent style={{ height: "90%", width: "90%", flex: 1 }} ref={(nativeRef)=>(this.nativeComponentRef = nativeRef)} />
             </View>
        );
    }

Can you please help why the android view is not showing up?

Android fragment view on react native page not showing up

0 Answers0