Native Module with React Native
Hybrid framework provide a great way to develop your application with minimal efforts for multiple platforms. Sometimes you may want to reuse your existing code of Swift or Java code without writing Javascript or to accomplish some complex logic of Image processing or data processing, etc.
We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don’t expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn’t support a native feature that you need, you should be able to build it yourself.
Native Module Setup
Native modules are usually distributed as npm packages, apart from the typical javascript files and resources they will contain an Android library project. This project is, from npm’s perspective just like any other media asset, meaning there isn’t anything special about it from this point of view. To get the basic scaffolding make sure to read Native Modules Setup guide first.
Enable Gradle
If you plan to make changes in Java code, we recommend enabling Gradle Daemon to speed up builds. In this article you will learn how to create and implement your native code with your React Native app. This will be demonstrated by to exchange the simple text between React Native code and Native code of iOS and Android. Here is steps we will follow.
Steps to implement with Android
● Native custom view
● View manager for custom view
● Package for view manager and register in MailApplication.java
Steps to implement with iOS
● Native custom view and bridging header file and SwiftComponetModule.m file
● View manager for custom view
Steps to implement In React Native code
● React native view same as native custom view
● Bridge to connect react native with native code and configure both component in App.js
Native module integration with Android
Native custom view
First create layout file in android res/layout (if not create that folder). in which create TextInput ,TextView and Button.
Let’s create .java class for custom layout as show in below image. Initialise layout components as written in below code snippets. Don’t forgot to create getter, setter method and button click event for the view.
public class ExchangeAndroidView extends LinearLayout {
private Context mContext;
private EditText edtCommComp;
private TextView txtCommComp;
private Button btnCommComp;
private OnButtonClick onButtonClick;
public ExchangeAndroidView(Context context) {
super(context);
this.mContext = context;
init();
}
private void init() {
View view = inflate(mContext, R.layout.layout_exchange_android, this);
edtCommComp = (EditText) view.findViewById(R.id.edt_comm_comp);
txtCommComp = (TextView) view.findViewById(R.id.txt_comm_comp);
btnCommComp = (Button) view.findViewById(R.id.btn_comm_comp);
btnCommComp.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
if (onButtonClick != null)
onButtonClick.onClick(edtCommComp.getText().toString());
}
});
}
public String getInputText() {
return edtCommComp.getText().toString();
}
public void setTextView(String text) {
txtCommComp.setText(text);
}
public void setOnButtonClick(OnButtonClick onButtonClick) {
this.onButtonClick = onButtonClick;
}
public interface OnButtonClick {
void onClick(String text);
}
}
View manager for custom view
Similarly create, view manager class by File-> new -> JavaClass. This will extends from SimpleViewManagerClass. The view manager class is used to initialise view and update the view. Hence use custom class that created earlier.
public class ExchangeAndroidViewManager extends SimpleViewManager {
private static final String REACT_CLASS = “SwiftComponent”;
@Override
public String getName() {
return REACT_CLASS;
}
}
There will be another override method named ‘createViewInstance()’ in which you will create a new instance of custom view and return.
@Override
protected ExchangeAndroidView createViewInstance(ThemedReactContext reactContext) {
ExchangeAndroidView exchangeAndroidView = new ExchangeAndroidView(reactContext);
onReceiveNativeEvent(reactContext, exchangeAndroidView);
return exchangeAndroidView;
}
As a result create method to pass data to react components while you click on button. You can pass data using ‘WritableMap’ to React component and it will be done by using ‘createViewInstance’ method.
public void onReceiveNativeEvent(final ThemedReactContext reactContext, final ExchangeAndroidView exchangeAndroidView) {
exchangeAndroidView.setOnButtonClick(new ExchangeAndroidView.OnButtonClick() {
@Override
public void onClick(String text) {
WritableMap event = Arguments.createMap();
event.putString(“nativeObject”, text);
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(exchangeAndroidView.getId(), “topChange”, event);
}
});
}
Likewise you have to create method with setting text in custom view’s TextView while React Component button clicked. This method gets called while props “nativeText” of the react native code gets changed.
@ReactProp(name = “nativeText”)
public void setAndroidText(ExchangeAndroidView exchangeAndroidView, String text) {
exchangeAndroidView.setTextView(text);
}