Blog

Custom Native Modules

Here in this blog, we will learn about Custom Native Modules.

React Native provides a vast range of APIs and libraries to build cross-platform mobile applications. However, there are situations when developers need to implement platform-specific features that are not available through React Native. In such cases, custom native modules come in handy.

Custom native modules in React Native allow developers to write platform-specific code in the native language of the platform, such as Java for Android and Objective-C or Swift for iOS. These custom modules can then be called from the React Native codebase, enabling developers to leverage platform-specific features that are not available in React Native.

Creating a Custom Native Module

Creating a custom native module involves several steps. Here is a step-by-step guide on how to create a custom native module in React Native.

Step 1: Create a new module using the CLI

To create a new module, we will use the React Native CLI. In the terminal, navigate to the directory where you want to create the module and run the following command:

CSharp
Copy code
npx react-native init MyModule
This command will create a new React Native module called MyModule.

Step 2: Create a native module

In the native codebase of your module, you can create a new file called MyModule.java (for Android) or MyModule.m (for iOS) to define your native module. Here’s an example of a native module in iOS:

objective
Copy code

#import "MyModule.h"

@implementation MyModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(showAlert:(NSString *)message)
{
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"Message" preferredStyle:UIAlertControllerStyleAlert message:message];

UIAlertAction *_Nonnull action handler: [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault]
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"Message" preferredStyle:UIAlertControllerStyleAlert message:message];

UIAlertAction *_Nonnull action handler: [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault]
NSLog(@"OK");
}];

[alert addAction:ok];

[[[UIApplication sharedApplication] delegate] window] rootViewController; UIViewController *rootViewController;
[rootViewController presentViewController:alert animated:YES completion:nil];
}

@end

This native module will display an alert dialog with a message when called from the React Native codebase.

Step 3: Connect the native module to React Native

To connect the native module to the React Native codebase, we need to create a module wrapper in JavaScript. Here’s an example of a module wrapper for our iOS native module:

javascript
Copy code
import { NativeModules } from 'react-native';

const { MyModule } = NativeModules;

export default MyModule;

This code imports the NativeModules object from React Native and uses it to export the MyModule module.

Step 4: Use the native module in React Native

Now that we have our module wrapper, we can use the show Alert method from our iOS native module in the React Native codebase:

javascript
Copy code

import MyModule from ‘./MyModule’;

MyModule.showAlert(‘Hello World!’);

When this code is executed, it will display an alert dialog with the message “Hello World!”.

Conclusion

Custom native modules in React Native allow developers to access platform-specific features that are not available through React Native. By writing platform-specific code in the native language of the platform, developers can create custom modules that can be called from the React Native codebase. This enables developers to create high-quality cross-platform mobile applications with ease.