Interview Preparations

Establishing communication between a React Native app and a native app involves using a bridge that enables seamless interaction between JavaScript code (used in React Native) and native code (used in Android and iOS). React Native provides a native module system that facilitates this communication. Here's an overview of the process:

1. Create a Native Module:

In both the Android and iOS native codebases, you'll need to create a native module that exposes functionality to JavaScript. For Android, this involves creating a Java class that extends ReactContextBaseJavaModule, and for iOS, it involves creating an Objective-C class that conforms to the RCTBridgeModule protocol.

Example (Android):

// Android: MyModule.java
public class MyModule extends ReactContextBaseJavaModule {
    // Module implementation
}

Example (iOS):

// iOS: MyModule.m
@interface MyModule : NSObject <RCTBridgeModule>
@end

2. Implement Methods in the Native Module:

Define methods in the native module that you want to expose to JavaScript. These methods will contain the logic that you want to execute in the native code.

Example (Android):

// Android: MyModule.java
@ReactMethod
public void showToast(String message) {
    // Native code implementation (e.g., show a toast)
}

Example (iOS):

// iOS: MyModule.m
- (void)showToast:(NSString *)message {
    // Native code implementation (e.g., show a toast)
}

3. Register the Native Module:

Register the native module in the getModules method of your package class in Android (MainApplication.java) and in the RCT_EXTERN_MODULE macro in iOS (MyModule.m).

Example (Android):

// Android: MainApplication.java
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new MyModulePackage() // Add your package here
    );
}

Example (iOS):

// iOS: MyModule.m
RCT_EXTERN_MODULE(MyModule, NSObject)
 
RCT_EXTERN_METHOD(showToast:(NSString *)message)

4. Invoke Native Methods from JavaScript:

In your React Native JavaScript code, import the native module and call the methods you defined in the native module.

// React Native: App.js
import { NativeModules } from "react-native";
 
const { MyModule } = NativeModules;
 
// Call the native method
MyModule.showToast("Hello from React Native!");

5. Handle Callbacks and Events:

If your native module methods involve asynchronous operations or need to send events back to JavaScript, you can use callbacks and the RCTEventEmitter interface for both Android and iOS.

Example (Android):

// Android: MyModule.java
@ReactMethod
public void performAsyncOperation(Callback successCallback, Callback errorCallback) {
    // Native code with async operation
    if (success) {
        successCallback.invoke(result);
    } else {
        errorCallback.invoke(error);
    }
}

Example (iOS):

// iOS: MyModule.m
- (void)performAsyncOperation:(RCTResponseSenderBlock)successCallback
                       error:(RCTResponseSenderBlock)errorCallback {
    // Native code with async operation
    if (success) {
        successCallback(@[result]);
    } else {
        errorCallback(@[error]);
    }
}

6. Handle Data Types:

Ensure that you handle data types correctly when passing data between JavaScript and native code. React Native provides mappings for common data types like strings, numbers, and arrays.

7. Testing and Debugging:

Test your native module thoroughly, and use debugging tools like React Native Debugger or Chrome DevTools to inspect and debug your JavaScript and native code.

8. Document Your Native Module:

Provide documentation for your native module, specifying the methods and events it exposes to JavaScript developers.

9. Publish or Integrate:

Depending on your use case, you might want to publish your native module as a standalone package, or simply integrate it into your existing React Native project.

By following these steps, you can establish communication between a React Native app and a native app seamlessly, allowing you to leverage native functionality within your React Native project.

Mapbox Navigation