How do we get the Android fragment that appears in response mode?

Question

I tried to create my own ui components, and this is often a hit or skip. The component is not displayed in reaction mode.

Although, on this issue, I specifically try to display the Android fragment inside the native-native, but nothing appears. Code example:

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; } @Override public String getName() { return REACT_CLASS; } @Override public FrameLayout createViewInstance(ThemedReactContext context) { Log.d(REACT_CLASS, "PreferenceView createViewInstance"); final FrameLayout view = new FrameLayout(context); view.setId(View.generateViewId()); // Testing if the view does get rendered, it should show white even if fragment is not rendered! view.setBackgroundColor(Color.WHITE); // not sure where to call fragment beginTransaction properly, the code below is just for testing view.postDelayed(new Runnable() { @Override public void run() { onAfterUpdateTransaction(view); } }, 2000); return view; } @Override public void onAfterUpdateTransaction(FrameLayout view) { super.onAfterUpdateTransaction(view); activityWeakReference.get().getFragmentManager().beginTransaction().replace(view.getId(), new PreferenceView()).commit(); Log.d(REACT_CLASS, "PreferenceView Commit"); // for debug } } 

With the view manager above, the place where the view is supposed to be is not even painted white, which means the FrameLayout itself is not displayed.

What am I doing wrong?

Answer 1

In fact, you are almost in the right direction. The reason your FrameLayout is not showing is because you have not explicitly added a style to ReactNative to determine its height and width. However, even in this case, your fragment will also not be displayed. There are several changes you can make to visualize your fragment.

In your ViewManager, make the following 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 trying to render a fragment in a ReactNative view

Answer 2

You need to set the fragment in the view manager , and then minimize the view manager to respond to your own javascript code.