Upgrade to Pro — share decks privately, control downloads, hide ads and more …

So you want to use React Native in a Native app?

So you want to use React Native in a Native app?

(Presented at React Day Berlin: Nov 30, 2018)

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.

Karan Thakkar

November 30, 2018
Tweet

More Decks by Karan Thakkar

Other Decks in Technology

Transcript

  1. What are we going to cover? Showing a React Native

    screen Practical use cases Reusing React Native components in Native
  2. Showing a React Native screen View Controller View UIViewController *vc

    = [UIViewController new]; vc.view = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:moduleName initialProperties:initialProperties launchOptions:nil];
  3. 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)
  4. Initialising the bridge Creating the React Native View [[RCTRootView alloc]

    initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties];
  5. 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
  6. Sync translation strings and constants NSDictionary *props = @{@“lang”: “en”};

    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@“HelloWorld” initialProperties:props]; use initialProperties during first load
  7. Sync translation strings and constants use setAppProperties on language/locale change

    NSDictionary *props = @{@“lang”: “ar”}; [rootView setAppProperties:props]; use initialProperties during first load NSDictionary *props = @{@“lang”: “en”}; RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@“HelloWorld” initialProperties:props];
  8. Relayout screen import “RCTI18nUtil.h”; "// … [[RCTI18nUtil sharedInstance] forceRTL:YES]; RCTRootView

    *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@“HelloWorld” initialProperties:props]; Recreate the React Native view
  9. Optimise image caching - (void)addImageToCache:(UIImage *)image URL:(NSString *)url size:(CGSize)size scale:(CGFloat)scale

    resizeMode:(RCTResizeMode)resizeMode responseDate:(NSString *)responseDate { "// Save to the native image cache } create addImageToCache to store images to cache
  10. Optimise image caching create imageForUrl to read images from cache

    - (UIImage *)imageForUrl:(NSString *)url size:(CGSize)size scale:(CGFloat)scale resizeMode:(RCTResizeMode)resizeMode responseDate:(NSString *)responseDate { "// Read from the native image cache }
  11. Optimise image caching Replace React Native default cache import "MyCustomImageCache.h";

    "// ""... RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:nil]; RCTImageLoader *loader = [bridge imageLoader]; [loader setImageCache:MyCustomImageCache];
  12. View Controller View UIViewController *vc = [UIViewController new]; RCTRootView *rootView

    = [[RCTRootView alloc] initWithBridge:jsCodeLocation moduleName:@“Widget” initialProperties:nil]; [vc.view addSubview:rootView]; Reusing React Native components in Native