How to do bridging iOS native to React Native Js code?

Lots of time we want to use native methods in our React Native code, like example for fetching current location, device info, get geocode address for lat-long etc. So for small things we don’t want to use an external library every time.

If we avoid using external library for small things and will create our own code, then it will help to reduce app size as well.

Here we will go step by step how we can write code in the native and we will use in the our JS code.

Let’s take one example of Geo map API’s:

1. We need to write native code in iOS using Object C.

2. Create one folder GeoMap in the ios folder.

3. In the GeoMap folder will create two files GeoMap.h and GeoMap.m files.

4. A native module is an Objective-C class that implements the RCTBridgeModule protocol, So We need to import RCTBridgeModule In our GeoMap.h class.

   // GeoMap.h
   #import <React/RCTBridgeModule.h>
   @interface GeoMap : NSObject <RCTBridgeModule>@end
   

5. Now we need to export our class, for that firstly we need to write GeoMap.m file

   // GeoMap.m 
   #import "GeoMap.h" 
   @implementation GeoMap 
   // To export a module named GeoMap
   RCT_EXPORT_MODULE(); 
   // This would name the module GeoMapManager instead
   // RCT_EXPORT_MODULE(GeoMapManager); 
   @end
   

6. So above we have RCT_EXPORT_MODULE we can specify by name that will take as a module name in the Javascript, otherwise it will take the file name as a module name in the Javascript code.

7. Now lets add one method in the our GeoMap.m class file

   // GeoMap.m
   #import "GeoMap.h"
   #import <React/RCTLog.h>
   @implementation GeoMap
   // To export a module named GeoMap
   RCT_EXPORT_MODULE();
   // This would name the module GeoMapManager instead
   // RCT_EXPORT_MODULE(GeoMapManager); @end
   RCT_EXPORT_METHOD(geocodeAddress:(NSDictionary *)location {
     RCTLogInfo(@"GeoCode Address object is  %@", location);
    // GeoCode Address object is {latitude: 123454, longitude:123432}
   }
   

8. Once we create both the classes, then we need to drag and drop our GeoMap folder in MyProject folder using Xcode for the linking, Like below.

   

   

    After linking done, it will show as added to the MyProject folder.
   

9. Once linking will be done, We can use above method setProfileName in the our javascript code like below.

   import { NativeModules } from 'react-native';
   const GeoMap = NativeModules.GeoMap;
   // below 
   GeoMap.geocodeAddress({latitude: 123454, longitude:123432});
   

10. Argument Types (Source: React Native)

        RCT_EXPORT_METHOD supports all standard JSON object types, such as:
        string (NSString)
        number (NSInteger, float, double, CGFloat, NSNumber)
        boolean (BOOL, NSNumber)
        array (NSArray) of any types from this list
        object (NSDictionary) with string keys and values of any type from this list
        function (RCTResponseSenderBlock)
    

11. Reference Link: https://reactnative.dev/docs/0.62/native-modules-ios

Thanks for reading

Hopefully You have found this article useful to do bridging from iOS native to Javascript.
If you have any recommendation please let me know in the below comment section.