React Native: How to invoke native Android layout from module?

Regarding this question, I’ve been trying to get this done via native modules in Android.

I’ve declared my Module at .../java/com/myproject/multiplecamerastream following the example at React Native ToastModule (functionality here is not important):

public class MultipleCameraStreamModule extends ReactContextBaseJavaModule {

  private static final String CAMERA_FRONT = "SHORT";
  private static final String CAMERA_BACK = "LONG";

  public MultipleCameraStreamModule(ReactApplicationContext reactContext) {

  public String getName() {
    return "MultipleCameraStream";

  public Map<String, Object> getConstants() {
    final Map<String, Object> constants = new HashMap<>();
    constants.put(CAMERA_FRONT, Toast.LENGTH_SHORT);
    constants.put(CAMERA_BACK, Toast.LENGTH_LONG);
    return constants;

  public void show(String message, int duration) {
    Toast.makeText(getReactApplicationContext(), message, duration).show();

Then, my module packager:

public class MultipleCameraStreamPackage implements ReactPackage { 

  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();

  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new MultipleCameraStreamModule(reactContext));
    return modules;

I’ve been able to register it and to make it work. However, it only calls to a Toast in Android (no layout involved).

I’d like to set a layout, so when I call <MultipleCameraStream /> in JSX it renders a native Android layout, like the following:

/* .../multiplecamerastream/MultipleCameraStreamLayout.xml */
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""
    <TextView android:id="@+id/multipleCameraText"
              android:text="Hello, I am a TextView" 
    <Button android:id="@+id/multipleCameraButton"
            android:text="Hello, I am a Button" 

How can I make that layout to be invoked from my module scripts (MultipleCameraStreamModule), and how can I make reference to its elements so I can interact with them from the Android module side programatically?

Thank you.


There’s explanation in the RN Native UI website itself, but I got lost in it too. 🙁

But here goes, let me know if there’s improvement needed on this:

1) Create a View that will inflate your xml MultipleCameraStreamLayout.xml. Ideally, this CustomView can be used in Android pure code.

public class CustomView extends LinearLayout {
 private Context context;
 public CustomView(Context context) {
   super(context);//ADD THIS
   this.context = context;
 public void init() {
   //modified here.
    inflate(context, R.layout.xxxxxxxxx, this);

2) Once set, put this into another class(View Manager) extending SimpleViewManager. Sample:

public class MyCustomReactViewManager extends SimpleViewManager<CustomView> {
   public static final String REACT_CLASS = "MyCustomReactViewManager";

   public String getName() {
     return REACT_CLASS;

   public CustomView createViewInstance(ThemedReactContext context) {
     return new CustomView(context); //If your customview has more constructor parameters pass it from here.

3) Now add it into the React package createViewManager method, you have created it in MultipleCameraStreamPackage. So, it’ll be:

public List<ViewManager> createViewManagers(
        ReactApplicationContext reactContext) {
    return Arrays.<ViewManager>asList(
            new MyCustomReactViewManager() //Add here.

4) You can now use the Android code, by reinstalling it

react-native run-android

5) Expose it in javascript. Create some file CustomView.js

import {requireNativeComponent, ViewPropTypes} from 'react-native';
module.exports = requireNativeComponent('MyCustomReactViewManager', null); //Add props are bit different.

6) Start using it into your views. Eg.

import CustomView from './CustomView.js';
render() {
  <CustomView style={{height:200, width:200}}/>

Hope this helps.

If you need a code sample it’s uploaded here.

Source: stackoverflow
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .