react-native-navigation/website/docs/docs-externalComponent.mdx

---
id: docs-externalComponent
title: External Component
sidebar_label: 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
```java
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.

```java
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
```java
public class MainApplication extends NavigationApplication {
  @Override
    public void onCreate() {
        super.onCreate();
        registerExternalComponent("MyExternalComponent", new FragmentCreator());
    }
}
```

## iOS
### ViewController registration

```objectivec
[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:
```js
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.
:::