Skip to main content
Version: Next

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.