React Native Fundamentals for Brownfield iOS Apps

(Presented at React Native London March Meetup)

In this talk, Karan will share his learnings from working on the React Native infrastructure at Skyscanner. These are concepts and use-cases 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.

Original Keynote presentation link: http://bit.ly/rn-ldn-mar-keynote

Transcript

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