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.