React Native iOS Native View send event with proper responseTag

Question

I have an iOS Native View, which is a UIView with a map view and a UIView. There is an event on the map called "regionDidChangeAnimated", I want to send the event to React Native. But responseTag is wrong.

- (UIView *)view { CGRect screenRect = [[UIScreen mainScreen] bounds]; UIView *frameView = [[UIView alloc] initWithFrame:screenRect]; CGRect frameRect = frameView.bounds; MAMapView *mapView; mapView = [[MAMapView alloc] initWithFrame:frameRect]; self.mapview = mapView; mapView.delegate = self; [frameView addSubview:mapView]; RCTFixedPin* pin = [[RCTFixedPin alloc] initWithFrame:CGRectMake(0, 0, screenRect.size.width, 260)]; pin.userInteractionEnabled = NO; [frameView addSubview:pin]; return frameView; } - (void)mapView:(MAMapView *)mapView regionDidChangeAnimated:(BOOL)animated { if (self.dragging) { self.dragging = NO; } MACoordinateRegion region = mapView.region; NSDictionary *event = @{ ***@"target": ,*** @"region": @{ @"latitude": @(region.center.latitude), @"longitude": @(region.center.longitude), @"latitudeDelta": @(region.span.latitudeDelta), @"longitudeDelta": @(region.span.longitudeDelta), } }; [self.bridge.eventDispatcher sendInputEventWithName:@"topChange" body:event]; } 

Answer 1

If you look in the reaction code for your own views that they implemented:

https://github.com/facebook/react-native/tree/master/React/Views

it looks like the documentation is out of date and instead of using:

 [self.bridge.eventDispatcher sendInputEventWithName... 

You should do the following:

 @property (nonatomic, copy) RCTBubblingEventBlock onTopChange; self.onTopChange(@{ @"region": @{ @"latitude": @(region.center.latitude), @"longitude": @(region.center.longitude), @"latitudeDelta": @(region.span.latitudeDelta), @"longitudeDelta": @(region.span.longitudeDelta), } }; 

There's also RCTDirectEventBlock I'm not sure what the difference is between this and RCTBubblingEventBlock

Looking at the lines of RCTComponent.m 160-169, it should automatically configure the target setting:

 // Special case for event handlers __weak RCTViewManager *weakManager = _manager; setterBlock = ^(id target, __unused id source, id json) { __weak id<RCTComponent> weakTarget = target; ((void (*)(id, SEL, id))objc_msgSend)(target, setter, [RCTConvert BOOL:json] ? ^(NSDictionary *body) { body = [NSMutableDictionary dictionaryWithDictionary:body]; ((NSMutableDictionary *)body)[@"target"] = weakTarget.reactTag; [weakManager.bridge.eventDispatcher sendInputEventWithName:RCTNormalizeInputEventName(name) body:body]; } : nil); }; 

Also in the Manager class, make sure you add:

 RCT_EXPORT_VIEW_PROPERTY(onTopChange, RCTBubblingEventBlock) 

And don't forget to actually hook up the event in your JSX:

 <MyComponent onTopChange={this.handleOnTopChange}/>