To see this working, head to your live site.

React Native : add fragment to mainactivity using Android Native Modules

I have a specific Android native library to integrate the camera features. The library provides the Fragment with the all it features. I just want to integrate that with Mainactivity in React Native app.

I have followed the link "Add fragment into react-native view"

Also i have gone through many tutorials. But I am stuck up at the place where we add the fragment into the Mainactivity container layout of React native app.

Update:

React Component (JS file):

export default class MyCustomView extends Component {
render() {
   return (
      <View >
       {
        MyLayout.openBlankFragment(12345)

       }
      </View>
   );
  }
  }
 const MyLayout = NativeModules.MyModule;

MyModule (Java Code):

@ReactMethodprivate void openBlankFragment(final int viewId) {
//        Log.v("View Tag", "View ID: "+viewId); it prints tag 12345UIManagerModule uiManager = getReactApplicationContext().getNativeModule(UIManagerModule.class);

                uiManager.addUIBlock(new UIBlock() {
            @Overridepublic void execute(NativeViewHierarchyManager nativeViewHierarchyManager) {
                View view = nativeViewHierarchyManager.resolveView(viewId);

                final Activity activity = getCurrentActivity();
                BlankFragment fragment = new BlankFragment();
                FragmentTransaction transaction = ((MainActivity)activity).getSupportFragmentManager().beginTransaction();
                transaction.add(view.getId(), fragment);
                transaction.commit();

            }
        });
    }

view.getId() is not recognized. Need help here. If i set the activity root view id like "transaction.add(android.R.id.content, fragment);". Its working fine and i can my fragment. But i need to setup my fragment as view in React screen like a frame.

1 comment

Answers (1)

AnswerDeveloper

Dec 24, 2022

To add a native fragment to a specific location in a React Native component, you'll need to use the UIManagerModule to execute a UIBlock that adds the fragment to the native view hierarchy. To do this, you'll need to pass the React component's viewId to the native module method, which you can then use to get a reference to the View object in the native view hierarchy.

Here's an example of how you might modify your code to achieve this:

React component (JS file):


import { View, NativeModules, UIManager } from 'react-native';

export default class MyCustomView extends Component {
  componentDidMount() {
    UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
  }

  render() {
    return (
      <View ref={(ref) => { this.view = ref; }}>
        {/* Other JSX elements here */}
      </View>
    );
  }
}

const MyLayout = NativeModules.MyModule;

Native module (Java code):


@ReactMethodprivate void openBlankFragment(final int viewId) {
  UIManagerModule uiManager = getReactApplicationContext().getNativeModule(UIManagerModule.class);
  uiManager.addUIBlock(new UIBlock() {
    @Overridepublic void execute(NativeViewHierarchyManager nativeViewHierarchyManager) {
      View view = nativeViewHierarchyManager.resolveView(viewId);

      final Activity activity = getCurrentActivity();
      BlankFragment fragment = new BlankFragment();
      FragmentTransaction transaction = ((MainActivity)activity).getSupportFragmentManager().beginTransaction();
      transaction.add(view.getId(), fragment);
      transaction.commit();
    }
  });
}

To add the native fragment to the React component's view, you'll need to pass the viewId of the View component to the native module method, which you can do using the ref prop. The ref prop will give you a reference to the View object, which you can pass to the native module method like this:


MyLayout.openBlankFragment(this.view.getId());

This should allow you to add the native fragment to the specific location in the React component's view hierarchy.