Trying to create the most simple native Android component, failing silently #13553
Description
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.