How do native modules bind to react in React-native?

Question

React

A little unsure of my understanding of how native modules work with React. Initially, React-native provides them in a good amount with, if possible, already implemented on both (ios, android) platforms at once, for example, a simple Text component is used to display text on both platforms at once, which means that it is washed down by facebook developers for ios and android - the corresponding implementation in objective-c and java languages, and then somehow connected it with react-th and js code, I don’t understand how the bridge itself and the link to js work with such modules?

Answer 1

They are exported in native code, for example, in java there is such a decorator that allows you to call this native function from a JS stream:

// my method class
 @ReactMethod
    public void setCurrentTime(final Integer key, final Float sec) {
        MediaPlayer player = this.playerPool.get(key);
        if (player != null) {
            player.seekTo((int) Math.round(sec * 1000));
        }
    }

Obj-C has its own:

// создается нативный модуль OutputVolume
@implementation OutputVolume

RCT_EXPORT_MODULE();

// Отдает метод get
RCT_REMAP_METHOD(get,  
                 resolver:(RCTPromiseResolveBlock)resolve
                 rejecter:(RCTPromiseRejectBlock)reject)
{
  float volume = [AVAudioSession sharedInstance].outputVolume;
  NSString* volumeString = [NSString stringWithFormat:@"%f", volume];

  if (volumeString) {
    resolve(volumeString);
  } else {
    reject(@"get_error", @"Error getting system volume", nil);
  }

}

And here is how to accept it in JS code:

import { NativeModules } from 'react-native';

const MyNativeModule = NativeModules.MyNativeModule;

Read:
- https://www.promptworks.com/blog/writing-native-mo...
- https://clever.ly/blog/2017/05/09/going-native-cre...
- https ://shift.infinite.red/native-modules-for-reac...