Trying to create the most simple native Android component, failing silently

[Carpetfizz]

Hello,

I'm trying to create a native UI component in Android. I believe I've followed the docs exactly, however the docs do not have an example of the ReactImageView which is the class that the view manager serves. I'm simply trying to display an Android TextView in RN. Once I get that to work I will move on to implementing my own class (so I don't strictly need TextView to work. The result of running this project is that literally nothing happens. It fails silently, and I don't see my "hello from android !" text appear on the screen and I don't know how to check if RN is even calling my Java code.

RCTScannerViewManager.java

public class RCTScannerViewManager extends SimpleViewManager<TextView> {

    public static final String REACT_CLASS = "RCTScannerView";

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    protected TextView createViewInstance(ThemedReactContext reactContext) {
        TextView tv = new TextView(reactContext);
        tv.setText("hello from android !");
        return tv;
    }
}

RCTScannerViewPackage.java

public class RCTScannerViewPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager> asList(
                new RCTScannerViewManager()
        );
    }
}

MainApplication.java

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              new RCTScannerViewPackage()
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

ScannerView.js

import React, { Component, PropTypes } from 'react'
import { Text, View, requireNativeComponent } from 'react-native'

var iface = {
    name: 'RCTScannerView',
    propTypes: {
    	...View.propTypes
    }
}

module.exports = requireNativeComponent('RCTScannerView', iface);

index.android.js

import React, { Component } from 'react'
import { AppRegistry, Text, View } from 'react-native';
import ScannerView from './ScannerView';

class AwesomeProject extends Component {
  render() {

    return (
    	<View>
			<Text> Hello world @@ </Text>
			<ScannerView test="hello world"></ScannerView>
		</View>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject)

I would love to use RN in my project, but there seems to be a lack of documentation online about how to create native modules in Android. I have posted this issue on Stack Overflow, but no one has responded.

[vonovak]

where is your stackoverflow question?

[Carpetfizz]

@vonovak http://stackoverflow.com/q/43455290/896112

[rzsombor]

Answered on the SO thread, I think you forgot to add layouting attributes. Just managed to fall into the same pit :)

[Carpetfizz]

That did the trick, thank you so much! Facebook should definitely provide an example like this in the docs!

[vonovak]

@Carpetfizz you can improve the docs by yourself now that you've gained the knowledge!