This guide will use the Toast example. Let's say we would like to be able to create a toast message from JavaScript.
We start by creating a native module. A native module is a Java class that usually extends the ReactContextBaseJavaModule class and implements the functionality required by the JavaScript. Our goal here is to be able to write ToastExample.show('Awesome', ToastExample.SHORT); from JavaScript to display a short toast on the screen.
package com.facebook.react.modules.toast;
+create a new Java Class named ToastModule.java inside android/app/src/main/java/com/your-app-name/ folder with the content below:
+// ToastModule.java
+
+package com.facebook.react.modules.toast;
import android.widget.Toast;
@@ -69,7 +72,10 @@ ReadableArray -><
Read more about ReadableMap and ReadableArray
Register the Module
The last step within Java is to register the Module; this happens in the createNativeModules of your apps package. If a module is not registered it will not be available from JavaScript.
-package com.facebook.react.modules.toast;
+create a new Java Class named CustomToastPackage.java inside android/app/src/main/java/com/your-app-name/ folder with the content below:
+// CustomToastPackage.java
+
+package com.facebook.react.modules.toast;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
@@ -80,7 +86,7 @@ ReadableArray -><
import java.util.Collections;
import java.util.List;
-public class AnExampleReactPackage implements ReactPackage {
+public class CustomToastPackage implements ReactPackage {
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
@@ -103,7 +109,7 @@ ReadableArray -><
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
- new AnExampleReactPackage()); // <-- Add this line with your package name.
+ new CustomToastPackage()); // <-- Add this line with your package name.
}
To make it simpler to access your new functionality from JavaScript, it is common to wrap the native module in a JavaScript module. This is not necessary but saves the consumers of your library the need to pull it off of NativeModules each time. This JavaScript file also becomes a good location for you to add any JavaScript side functionality.