iOS
Open iOS project in XCode
- Create MyNativeModule.h
#import <Foundation/Foundation.h> #import <React/RCTBridgeModule.h> NS_ASSUME_NONNULL_BEGIN @interface MyNativeModule : NSObject <RCTBridgeModule> @end NS_ASSUME_NONNULL_END
- Create MyNativeModule.m
#import "MyNativeModule.h" #import <React/RCTLog.h> @implementation MyNativeModule // Bridge module name RCT_EXPORT_MODULE(NativeModuleName); // Bride method RCT_REMAP_METHOD( buildAPIURL, // native API name param1:(NSString *)baseURL // example param2:(NSString *)privateKey // example buildAPIURLWithResolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) { ... if (...) { resolve(result); } else { NSError *error = [NSError errorWithDomain:@"React Bridge" code:200 userInfo:@{@"Error reason": @"Invalid Input"}]; reject(@"no_events", @"There were no events", error); } } @end
Android
Open Android project in Android Studio
- Create MyNativeModule.java having native Android module
Java
package com.xxxxxx.yyy; import android.widget.Toast; import com.facebook.react.bridge.Promise; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.facebook.react.bridge.ReactMethod; import com.facebook.react.bridge.WritableArray; import com.facebook.react.bridge.WritableNativeArray; ... public class MyNativeModule extends ReactContextBaseJavaModule { public MyNativeModule(ReactApplicationContext reactContext) { super(reactContext); } @Override public String getName() { // Bridge module name return "NativeModuleName"; } // Create a native API @ReactMethod public void buildAPIURL(final String param1, final String param2, final Promise promise) throws Exception { ... promise.resolve(result); } // Create another native API @ReactMethod public void ToastText(String text) { Toast.makeText(getReactApplicationContext(), text, Toast.LENGTH_LONG).show(); } }
Kotlin
class MyNativeModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) { override fun getName(): String { return "NativeModuleName"; } @ReactMethod @Throws(Exception::class) fun buildAPIURL(param1: String?, param2: String?, promise: Promise) { ... promise.resolve(result) } @ReactMethod fun ToastText(text: String?) { Toast.makeText(reactApplicationContext, text, Toast.LENGTH_LONG).show() } }
- Create MyNativeModuleReactPkg.java to register native Android module with React Native
Java
package com.xxxxxx.yyy; import com.facebook.react.ReactPackage; import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.uimanager.ViewManager; import java.util.ArrayList; import java.util.Collections; import java.util.List; public class MyNativeModuleReactPkg implements ReactPackage { @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { List<NativeModule> modules = new ArrayList<>(); modules.add(new MyNativeModule( reactContext )); return modules; } }
Kotlin
class MyNativeModuleReactPkg : ReactPackage { override fun createViewManagers( reactContext: ReactApplicationContext ): MutableList<ViewManager<View, ReactShadowNode<*>>> = mutableListOf() override fun createNativeModules(reactContext: ReactApplicationContext): MutableList<NativeModule> { val modules: MutableList<NativeModule> = ArrayList() modules.add( MyNativeModule( reactContext ) ) return modules } }
- Edit MainApplication.java
... import com.xxxxxxxxx.yyy.MyNativeModuleReactPkg; ... @override protected List<ReactPackage> getPackages() { ... packages.add(new MyNativeModuleReactPkg()); return packages; }
React Native
Open React Native in Visual Studio Code
import { NativeModules } from 'react-native'; const nativeModule = NativeModules.NativeModuleName; export const getApiUrl = () => { const promise = new Promise((resolve, reject) => { const success = (response) => { resolve(response[0]); }; const fail = (error) => { reject(error); }; // Call an API from native module nativeModule.buildAPIURL(param1, param2) .then(success) .catch(fail); }); return promise; };
Leave a Reply