Detailed explanation of the interaction between React Native and IOS

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface nativeModule : NSObject <RCTBridgeModule>

@end

#import <Foundation/Foundation.h>
#import "nativeModule.h"

@interface nativeModule ()

@end

@implementation nativeModule

@end 

//Omit the above code @implementation nativeModule

// This code is required to export the module so that the nativeModule module can be accessed in RN
RCT_EXPORT_MODULE();

// Receive string RCT_EXPORT_METHOD(addHelloWord:(NSString *)name location:(NSString *)location)
{
  NSLog(@"%@,%@", name, location);
}
@end

import { Button, NativeModules } from 'react-native'
const { nativeModule } = NativeModules

<Button title={'Pass 2 parameters to native'} onPress={() => {
    nativeModule.addHelloWord('your name', 'Location: Zhejiang')
}}/>

// Accepts only one parameter - an array of parameters to be passed to the JavaScript callback function.
RCT_EXPORT_METHOD(checkIsRoot:(RCTResponseSenderBlock)callback) {
  NSArray *array = @[@"string", @"number"];
  callback(array);
}

<Button title={'js passes a callback to native, and receives an array in the callback'} onPress={() => {
    nativeModule.checkIsRoot((str: string, num: string) => {
      console.log(str, num)
    })
}}/>

@interface nativeModule ()

@property (nonatomic) RCTPromiseResolveBlock normalResolve;
@property (nonatomic) RCTPromiseRejectBlock normalReject;
@property (nonatomic) NSInteger num;

@end


// This is a timer - (void)startTime: (NSArray*) data{
  NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:2 repeats:YES block:^(NSTimer * _Nonnull timer) {
    
    NSArray *events =@[@"Promise ",@"test ",@" array"];
    if (events) {
      self.normalResolve(events);
      [timer invalidate];
    } else {
      [timer invalidate];
      NSError *error=[NSError errorWithDomain:@"I am calling back the error message..." code:101 userInfo:nil];
      self.normalReject(@"no_events", @"There were no events", error);
    }
  }];
  
  [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];
}

// callback parameters to RN, callback error information RCT_EXPORT_METHOD(getHBDeviceUniqueID: (RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject) {
  
  // Task to be executed self.normalResolve = resolve;
  self.normalReject = reject;
  
  [self performSelectorOnMainThread:@selector(startTime:) withObject: [NSArray arrayWithObjects: @"1", @"2", nil] waitUntilDone:YES];
}

<Button title={'native passes a promise to JS'} onPress={() => {
    nativeModule.getHBDeviceUniqueID().then((arr: string[]) => {
      console.log('resolve', arr)
    }).catch((err: string) => {
      console.error(err)
    })
}}/>

// This is a timer 2
-(void)startTime2: (NSArray*) data{
  NSLog(@"data%@",data);
  
  NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1 repeats:YES block:^(NSTimer * _Nonnull timer) {
    
    NSLog(@"%d", (int)self.num);
    
    self.num = self.num + 1;
    
    NSLog(@"%d", (int)self.num);
    
    if (self.num > 4) {
      [timer invalidate];
      NSLog(@"end");
      self.normalResolve(data);
    }
    
  }];
  
  [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];
}

// RCT_REMAP_METHOD is the same as RCT_EXPORT_METHOD, but this method is called synchronously from JS on the JS thread and may return a result.
// Synchronization may have performance issues. It is recommended not to use RCT_REMAP_METHOD(findEvents,
                 findEventsWithResolver:(RCTPromiseResolveBlock)resolve
                 rejecter:(RCTPromiseRejectBlock)reject)
{
  self.normalResolve = resolve;
  self.normalReject = reject;
  
  
  self.num = 0;
  
  [self performSelectorOnMainThread:@selector(startTime2:) withObject: [NSArray arrayWithObjects: @"1", @"2", nil] waitUntilDone:YES];
}

<Button title={'native passes a promise to JS2'} onPress={() => {
    nativeModule.findEvents().then((arr: string[]) => {
      console.log('resolve', arr)
    }).catch((err: string) => {
      console.error(err)
    })
}}/>

NSArray *imageList = @[@"http://foo.com/bar1.png",
                @"http://foo.com/bar2.png"];

NSDictionary *props = @{@"images" : imageList};


RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"learn" initialProperties:props];
// This line of code already exists, the difference is initialProperties:props

// Rewrite APP, images is the data provided by iOS, here we pass data through context export default class App extends React.Component<{ images: string[] }> {

  render() {
    return <NativeProps.Provider value={this.props.images}>
      <AppContainer/>
    </NativeProps.Provider>
  }
}

// Simply use in hooks const images = useContext(NativeProps);

<Text>This is the initial data from the native side {JSON.stringify(images)}</Text>

// Event names available for monitoring - (NSArray<NSString *> *)supportedEvents
{
  return @[@"EventReminder"];
}


RCT_EXPORT_METHOD(postNotificationEvent:(NSString *)name)
{
  NSLog(@"calendarEventReminderReceived");
    [self sendEventWithName:@"EventReminder" body:@{@"name": name}];;
}

- (void)calendarEventReminderReceived:(NSNotification *)notification
{
  // This is an example from the official website NSLog(@"calendarEventReminderReceived");
  NSString *eventName = notification.userInfo[@"name"];
  [self sendEventWithName:@"EventReminder" body:@{@"name": eventName}];
}

RCT_EXPORT_METHOD(Send){
  NSDictionary *dict = @{@"name" : @"veuimyzi"};
  
  NSNotification *notification = [[NSNotification alloc] initWithName:@"EventReminder" object:nil userInfo:dict];
  
  [self calendarEventReminderReceived:notification];
}

const ManagerEmitter = new NativeEventEmitter(nativeModule)

const [msg, setMsg] = useState([])

// Use in hooks, similar to componentDidMount lifecycle useEffect(() => {
    const subscription = ManagerEmitter.addListener(
      'EventReminder',
      (reminder) => {
        setMsg(prevState => {
          return prevState.concat(reminder.name)
        })
        console.log('This is the monitored EventReminder event response', reminder.name)
      }
    )

    return () => {
      subscription.remove()
    }
}, [])


<Button title={'js listens to events, let native send notifications to js'} onPress={() => {
    nativeModule.postNotificationEvent('test')
}}/>

<Button title={'js listens to events, let native send notifications to js'} onPress={() => {
    nativeModule.Send()
}}/>

{
    msg.map((item, index) => {
      return <Text key={item + index}>item:{item}</Text>
    })
}

@implementation nativeModule
{
  bool hasListeners;
  // a local variable }

-(void)startObserving {
  hasListeners = YES;
}

-(void)stopObserving {
  hasListeners = NO;
}
// Add judgment when sending listeners. Send only if there are listeners, effectively reducing the calls of bridge code if (hasListeners) { 
    [self sendEventWithName:@"EventReminder" body:@{@"name": name}];;
}