Version: 7.11.0

External Component

The ExternalComponent layout allows you to display any native view as a screen. To use the External Component we'll need to register it with a string name. This name is then used when declaring layouts in JS.

Android

Implementing the native component

When it comes to implementing an external component on Android, you have two choices. We recommend you use a base class extending View. If you're required to use Fragments, you'll find an basic example below.

ViewGroup

public class ViewGroupComponent implements ExternalComponent {
private final FrameLayout content;
ViewGroupComponent(FragmentActivity activity, JSONObject props) {
content = new FrameLayout(activity);
}
@Override
public View asView() {
return content;
}
}

Fragment

Using a Fragment as an external component is done by attaching the Fragment to a FrameLayout, and returning the FrameLayout from the asView() method of the ExternalComponent.

public class FragmentComponent implements ExternalComponent {
private final FrameLayout content;
FragmentComponent(FragmentActivity activity, JSONObject props) {
// Create the FrameLayout to which we'll attach our Fragment to
content = new FrameLayout(activity);
content.setId(R.id.fragment_screen_content);
// Attach the Fragment to the FrameLayout
activity.getSupportFragmentManager()
.beginTransaction()
.add(R.id.fragment_screen_content, createFragment(props))
.commitAllowingStateLoss();
}
private FragmentScreen createFragment(JSONObject props) {
FragmentScreen fragment = new FragmentScreen();
// Pass the props sent from Js in a bundle
Bundle args = new Bundle();
args.putString("text", props.optString("text", ""));
fragment.setArguments(args);
return fragment;
}
@Override
public View asView() {
return content;
}
}

Registering the component

public class MainApplication extends NavigationApplication {
@Override
public void onCreate() {
super.onCreate();
registerExternalComponent("MyExternalComponent", new FragmentCreator());
}
}

iOS

ViewController registration

[ReactNativeNavigation registerExternalComponent:@"MyExternalComponent" callback:^UIViewController *(NSDictionary *props, RCTBridge *bridge) {
return [[ExternalViewController alloc] initWithProps:props];
}];

Using the component from JS

Once you've registered the external component in native, you can use it in your layout declarations. For example, to show an external component modally:

Navigation.showModal({
externalComponent: {
name: 'MyExternalComponent',
passProps: {
text: "Text from JS"
}
}
});
caution

props passed to external components are sent over the bridge and therefore must be serializable.