Getting to the Native in React Native

The Native part in React Native can look very scary and intimidated but is does not have to be that way, so in this talk you will see what the most frequent challenges are when working on the native side of React Native and how to conquer them.

Transcript

1. Getting to the Native 
 in React Native by Wouter van den Broek
2. Who is Wouter https://twitter.com/wbroek
 
 https://github.com/wbroek
 
 https://linkedin.com/in/wbroek woutervdbroek@gmail.com Freelance mobile developer
 Technical lead @ Synappz
3. Native is hard A lot of moving parts
4. Native modules The bridge to the native OS
5. Native modules by Claire Couvrat Native modules
6. @interface RCTVibration : NSObject <RCTBridgeModule> @end @implementation RCTVibration RCT_EXPORT_MODULE() // or RCT_EXPORT_MODULE(RCTVibration) RCT_EXPORT_METHOD(vibrate) { AudioServicesPlaySystemSound(kSystemSoundID_Vibrate); } RCTVibration.m Native modules
7. @ReactModule(name = "Vibration") public class VibrationModule extends ReactContextBaseJavaModule { public VibrationModule(ReactApplicationContext reactContext) { super(reactContext); } @Override public String getName() { return "Vibration"; } @ReactMethod public void vibrate(int duration) { Vibrator v = (Vibrator) getReactApplicationContext() .getSystemService(Context.VIBRATOR_SERVICE); if (v != null) { v.vibrate(); } } } Native modules VibrationModule.java
8. @interface RCTVibration : NSObject <RCTBridgeModule> @end @implementation RCTVibration RCT_EXPORT_MODULE() RCT_EXPORT_METHOD(vibrate) { AudioServicesPlaySystemSound(kSystemSoundID_Vibrate); } RCTVibration.m Native modules
9. @interface RCTVibration : NSObject <RCTBridgeModule> @end @implementation RCTVibration RCT_EXPORT_MODULE() RCT_EXPORT_METHOD(vibrate) { callback(@[[NSNull null]]); } RCTVibration.m Native modules
10. @interface RCTVibration : NSObject <RCTBridgeModule> @end @implementation RCTVibration RCT_EXPORT_MODULE() RCT_EXPORT_METHOD(vibrate) { if (vibration) { resolve(vibration); } else { reject(@"no_vibration"); } } RCTVibration.m Native modules
11. @interface RCTVibration : RCTEventEmitter<RCTBridgeModule> @end @implementation RCTVibration RCT_EXPORT_MODULE() - (NSArray<NSString *> *)supportedEvents { return @[@"vibrate"]; } RCT_EXPORT_METHOD(vibrate) { [self sendEventWithName:@"vibrationDone" body:@{@"done": true}]; } RCTVibration.m Native modules
12. Native modules Vibration.js const RCTVibration = require('NativeModules').Vibration; RCTVibration.vibrate();
13. Native modules
14. Native modules
15. @interface RedViewManager : RCTViewManager @end @implementation RedViewManager RCT_EXPORT_MODULE() - (UIView *)view { return [UIView new].backgroundColor = UIColor.RedColor; } @end Native modules RedViewManager.m
16. import { requireNativeComponent } from 'react-native'; const redView = requireNativeComponent(‘RedView', null); render() { return ( <RedView /> ); } Native modules RedView.js
17. - (NSDictionary *)constantsToExport { return @{ @"shake": @"off" }; } Native modules RCTVibration.m const RCTVibration = require('NativeModules').Vibration; const Shake = RCTVibration.shake;
18. @objc(Vibration) class Vibration: NSObject { @objc(vibrate) func vibrate() -> Void { AudioServicesPlaySystemSound.kSystemSoundID_Vibrate } @objc func constantsToExport() -> [String: Any]! { return ["shake": "off"] } } Native modules RCTVibration.Swift
19. #import <React/RCTBridgeModule.h> @interface RCT_EXTERN_MODULE(Vibration, NSObject) RCT_EXTERN_METHOD(vibrate) @end Native modules RCTVibrationBridge.h
20. dependencies { … classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.2.30" } apply plugin: "kotlin-android" apply plugin: "kotlin-android-extensions" dependencies { … compile "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.2.30" } Native modules build.gradle
21. class VibrationModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) { override fun getName(): String { return "Vibration" } @ReactMethod fun vibrate() { val v = reactApplicationContext.getSystemService(Context.VIBRATOR_SERVICE) as Vibrator v.vibrate() } } Native modules VibrationModule.kt
22. Extending Native modules Use the language
23. @interface RCTVibrationExtend : RCTVibration @end @implementation RCTVibrationExtend RCT_EXPORT_METHOD(vibrateEvenMore) { AudioServicesPlaySystemSound(kSystemSoundID_VibrateHeavy); } @end Extending native modules RCTVibrationExtend.m
24. RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@“Example" initialProperties:@{@“googleKey”: @“12345”} launchOptions:launchOptions]; Extending native modules AppDelegate.m
25. public class ReactActivity public class MainActivity extends ExampleReactActivity public ReactActivityDelegate public class ExampleReactActivityDelegate Bundle getLaunchOptions() { Bundle options = new Bundle(); options.putString("googleKey", "12345"); return options; } Extending native modules ExampleReactActivity.java ExampleReactActivityDelegate.java
26. class App extends React.Component { constructor(props){ super(props); // use the prop: prop.googleKey } } Extending native modules App.js
27. Building
28. Building
29. Building Compile the day away
30. Building Terminal
31. Building Xcode
32. Android Studio Building
33. Building Xcode
34. Building Android
35. subprojects { afterEvaluate { project -> if (project.hasProperty("android")) { android { compileSdkVersion 27 buildToolsVersion '27.0.3' } } } } Building build.gradle
36. Building Android
37. Building Android
38. implementation(project(':react-native-onesignal')) { exclude group: 'com.google.firebase } implementation(project(':react-native-onesignal')) { exclude group: 'com.google.firebase', module: 'firebase-messaging' } implementation ('com.google.firebase:firebase-messaging:12.0.1') { force = true; } Building build.gradle
39. subprojects { project.configurations.all { resolutionStrategy.eachDependency { details -> if (details.requested.group == 'com.android.support' && !details.requested.name.contains('multidex')) { details.useVersion "27.1.1" } } } } Building build.gradle
40. allprojects { repositories { ... configurations.all { resolutionStrategy { force ‘com.google.android.gms:play-services-gcm:12.0.0’ } } } } Building build.gradle
41. apply plugin: 'com.google.gms.google-services' com.google.gms.googleservices.GoogleServicesPlugin.config.disableVersionCheck = true Building build.gradle
42. Building Cocoapods
43. Cocoapods Building
44. productFlavors { exampleFree { applicationId 'com.example.free' } examplePaid { applicationId 'com.example.paid' } } Building build.gradle
45. Building Android flavor structure
46. Building Xcode build configuration
47. Building Xcode build configuration
48. Building Xcode scheme editor
49. "xcodeSchemes": { "Debug": ["Debug", "DebugFree"], "Release": ["Release", "ReleaseFree"] } "scripts": { "postinstall": "react-native-schemes-manager all" } Building package.json
50. Native gives
 more flexibility More then meets the eye
51. Thank you Always available for questions https://twitter.com/wbroek
 
 https://github.com/wbroek
 
 https://linkedin.com/in/wbroek woutervdbroek@gmail.com