How can I introduce my own UIViewController in React Native? (You cannot use only UIView)

Question

I am trying to use ABNewPersonViewController in my React Native application. Here's how it is used in Objective-C:

ABNewPersonViewController *picker = [[ABNewPersonViewController alloc] init]; picker.newPersonViewDelegate = self; UINavigationController *navigation = [[UINavigationController alloc] initWithRootViewController:picker]; [self presentViewController:navigation animated:NO completion:nil]; 

How can I do this in React Native? I can not write a bridge component of the user interface because it is a UIViewController, not a UIView.

Please do not tell me to override it.

Answer 1

This is what ultimately works for me.

CreateContact.h:

 #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> #import <AddressBook/AddressBook.h> #import <AddressBookUI/AddressBookUI.h> #import "RCTBridgeModule.h" @interface CreateContact : NSObject <ABNewPersonViewControllerDelegate, RCTBridgeModule> @end 

CreateContact.m:

 #import "CreateContact.h" #import "AppDelegate.h" @implementation CreateContact RCT_EXPORT_MODULE(CreateContact); RCT_EXPORT_METHOD(presentContact) { dispatch_async(dispatch_get_main_queue(), ^{ ABNewPersonViewController *picker = [[ABNewPersonViewController alloc] init]; picker.newPersonViewDelegate = self; UINavigationController* contactNavigator = [[UINavigationController alloc] initWithRootViewController:picker]; AppDelegate *delegate = (AppDelegate *)[[UIApplication sharedApplication] delegate]; [delegate.window.rootViewController presentViewController:contactNavigator animated:NO completion:nil]; }); } - (void)newPersonViewController:(ABNewPersonViewController *)newPersonViewController didCompleteWithNewPerson:(ABRecordRef)person { [newPersonViewController dismissViewControllerAnimated:YES completion:nil]; } @end 

This guide is more detailed: http://moduscreate.com/leverage-existing-ios-views-react-native-app/

I will update when I implement the best way to transfer information back to RN.

Answer 2

You want to implement a bridge user interface component that mounts an empty UIView and is primarily responsible for presenting your UIViewController. The simplest example of this method is in RCTModalHostView; check the source code .

Remarkably, React Native defines a category in UIView that adds a property called reactViewController that goes up the view hierarchy to find the closest UIViewController. Use this UIViewController to present your custom view controller:

 - (void)didMoveToWindow { [super didMoveToWindow]; if (!_isPresented && self.window) { [self.reactViewController presentViewController:_customViewController animated:NO completion:nil]; _isPresented = YES; } }