How to show Android Fragment in Fabric Native Component ? Couldn't find related documentation

[ndu-aspira]

Hi，
I‘m trying to migrate my project to the new architecture. Our map component was placed in an Android Fragment and it works well on the old architecture. I tried to put the Fragment in the new Frbric Native Component following this guide https://github.com/reactwg/react-native-new-architecture/blob/main/docs/fabric-native-components.md. It gives no error but displays blank screen. I put some log in my Map fragment. The lifecycle method of the Fragment seems good ( on create, onCreateView, onStart..) all got invoked.

I also tried the simplest Fragment, ( a TextView in LinearLayout) and result is the same.

Is there any document of How to integrate Android Fragment into Fabric native component like the old one (https://reactnative.dev/docs/0.74/native-components-android#integration-with-an-android-fragment-example)

My rn version is 0.74.5
Any help is Appreciated.

My current code snippet.
js side:

Android Native Side:

Thanks.

[cortinico]

I've recently updated the integrating with Android Fragment guide here:
https://reactnative.dev/docs/next/integration-with-android-fragment

@ndu-aspira
Could you make sure you follow it and report back if things are not working properly?

[cortinico]

The linked is issue is different from the one you're reporting.

[Vadko]

+1, any plans for documenting it?

[kevindice]

I'm also seeking to put a native fragment (from a vendor) into a React Native app as a Fabric component. I've had a working implementation for the last year prior to enabling the New Architecture, but it renders as blank now.

[ndu-aspira]

After a lot of trying, I managed to make it work. There're 2 part of changes need te be made in my case.

• do not use ViewManagerDelegate, stick with receiveCommand.
• when manuallyLayoutChildren you need to specify the right and bottom your self.

attaching part of my view manager for reference.

ReactModule(name = GISMapViewManager.REACT_CLASS)
public class GISMapViewManager extends ViewGroupManager<FrameLayout> implements ReactContextProvider, CampsiteGisMapManagerInterface<FrameLayout> {

    private static final String TAG = "GISMapViewManager";

    public static final String REACT_CLASS = "CampsiteGisMap";
    public final int COMMAND_CREATE = 110;

    private final ReactApplicationContext reactContext;

    private final ViewManagerDelegate<FrameLayout> mDelegate;

    public GISMapViewManager(ReactApplicationContext reactContext) {
        this.reactContext = reactContext;
        MainApplication.reactApplicationContext = reactContext;
        mDelegate = new CampsiteGisMapManagerDelegate<>(this);
    }

//     @Nullable
//     @Override
//     protected ViewManagerDelegate<FrameLayout> getDelegate() {
//         return mDelegate;
//     }
 

    /**
     * Return a FrameLayout which will later hold the Fragment
     */
    @Override
    public FrameLayout createViewInstance(ThemedReactContext reactContext) {
        FrameLayout layout = new FrameLayout(reactContext);
        layout.setId(View.generateViewId());
        return layout;
    }

    /**
     * Map the "create" command to an integer
     */
    @Nullable
    @Override
    public Map<String, Integer> getCommandsMap() {
        return MapBuilder.of("create", COMMAND_CREATE);
    }

    /**
     * Handle "create" command (called from JS) and call createFragment method
     */
    @Override
    public void receiveCommand(@NonNull FrameLayout root, String commandId, @Nullable ReadableArray args) {
        super.receiveCommand(root, commandId, args);
        int reactNativeViewId = args.getInt(0);
        // int commandIdInt = Integer.parseInt(commandId);

        switch (commandId) {
            case "create":
                createFragment(root, reactNativeViewId);
                break;
            default: {
            }
        }
    }


    /**
     * Replace your React Native view with a custom fragment
     */
    public void createFragment(FrameLayout root, int reactNativeViewId) {
//        ViewGroup parentView = (ViewGroup) root.findViewById(reactNativeViewId);
//        setupLayout(parentView);
        setupLayout(root);

        SiteMapFragment siteMapFragment = SiteMapFragment.newInstance();
        siteMapFragment.setReactApplicationContext(reactContext);

        FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
        activity.getSupportFragmentManager()
                .beginTransaction()
                .replace(reactNativeViewId, siteMapFragment, String.valueOf(reactNativeViewId))
                .commitNow()

    }

    public void setupLayout(View view) {
        Choreographer.getInstance().postFrameCallback(new Choreographer.FrameCallback() {
            @Override
            public void doFrame(long frameTimeNanos) {
                manuallyLayoutChildren(view);
                view.getViewTreeObserver().dispatchOnGlobalLayout();
                Choreographer.getInstance().postFrameCallback(this);
            }
        });
    }

    /**
     * Layout all children properly
     */
    public void manuallyLayoutChildren(View view) {
        // propWidth and propHeight coming from react-native props
        int width = propWidth;
        int height = propHeight;

        view.measure(
                View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
                View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY));

        view.layout(view.getLeft(),view.getTop(), view.getLeft() + width, view.getTop() + height);
    }

    @Override
    public ReactApplicationContext provideReactContext() {
        return reactContext;
    }

}

[kevindice]

Thank you, this helped a lot.