React Native fundamentals for brownfield iOS apps

(Presented at App.js Conf: April 4, 2019)

In this talk, Karan will share his learnings from working on the React Native infrastructure at Skyscanner. These are concepts, issues and roadblocks that a developer would encounter in their journey of integrating React Native in a brownfield app. Knowing these ahead of time would help folks take the right decisions when building their own React Native infrastructure.

Transcript

1. React Native Fundamentals for Brownfield iOS Apps @geekykaran
2. Karan Thakkar Sr. Software Engineer, Skyscanner @geekykaran
3. What are we going to cover? Showing a React Native screen Navigation Reusing React Native components in Native
4. Showing a React Native screen View Controller View UIViewController *vc = [UIViewController new]; vc.view
5. Showing a React Native screen vc.view = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:moduleName initialProperties:initialProperties launchOptions:nil];
6. View Controller UIViewController *vc = [UIViewController new]; Showing a React Native screen vc.view = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:moduleName initialProperties:initialProperties launchOptions:nil]; Initialising the bridge (RCTBridge) Creating the React Native View
 (RCTRootView) Just in time Ahead of time
7. Initialising the bridge Creating the React Native View Just in time Ahead of time
8. Showing a React Native screen [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:nil]; Initialising the bridge Creating the React Native View
9. Initialising the bridge Creating the React Native View [[RCTRootView alloc] initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties];
10. Navigation Integrating 3rd party is not straightforward Consistency with in-house implementation
11. Figure out how navigation works in your app Create a bridge module that expose methods So how do you solve them? - Opening a screen - Closing a screen
12. http://bit.ly/rdb-navigation
13. Reusing React Native components in Native Reuse complex business logic
14. View Controller View UIViewController *vc = [UIViewController new]; vc.view Reusing React Native components in Native
15. Reusing React Native components in Native RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@“Widget” initialProperties:nil]; [vc.view addSubview:rootView];
16. Demo: http://bit.ly/rdb-widget
17. Thank you! @karanjthakkar @geekykaran