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 am specifically trying to render an Android fragment inside react-native but nothing is showing up. Example code:
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 above view manager, the place where the view is supposed to be is not even colored white signifying that the FrameLayout itself does not get rendered.
What am I doing wrong?
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：
You would have to expose the Fragment in a view manager and then bridge the view manager to the react native javascript code.
Tags: androidandroid, react-native
