Native modules in React Native

Transcript

1. Native modules in React Native
2. Jénaïc Cambré •  Software architect •  AS3, Javascript •  PHP, Node.JS •  Phonegap, Titanium
3. Dating app
4. Disclaimer •  Developers •  Project managers
5. Native modules What? When? How?
6. Bridge What?
7. RN architecture https://speakerdeck.com/felipecsl/react-native-at-airbnb What?
8. Modules vs. UI components What?
9. Native modules What? When? How?
10. When? Not in core SDK Migration
11. Not in the core •  I18n •  Device info •  Share •  3D Touch •  Access external storage When?
12. Community When?
13. SDK •  Reuse a service API •  Push Notifications - OneSignal •  Firebase •  Twitter Fabrics When?
14. Migration When?
15. Native modules What? When? How?
16. Data types Javascript iOS Android string NSString String boolean BOOL Boolean number NSInteger, NSNumber, etc… Integer, Double, Float, etc… object NSDictionary ReadableMap (HashMap) array NSArray ReadableArray (ArrayList) Function/ Promise RCTResponseSenderBlock Callback How?
17. Example - iOS How?
18. Example - iOS How?
19. Example - iOS Build Settings => Header Search Path How?
20. Example - Android How?
21. Example - Android How?
22. Example - Android How?
23. Example - Android How?
24. react-native link
25. Example - RN How?
26. Example - RN How?
27. iOS API •  RCT_EXPORT_MODULE() •  RCT_EXPORT_METHOD() •  constantsToExport •  Events •  @objc (Swift) How?
28. Android API •  ReactContextBaseJavaModule class •  getName() •  @ReactMethod •  getConstants() •  Events •  createNativeModule() How?
29. Personal experience •  Doc & Github •  Build failing •  RNPM for free •  Convention RN<Module> •  Wrong arguments – Wrap module How?
30. Summary •  Based on RN architecture •  Not necessary •  Knowledge of native environment •  Limitless How?
31. Questions? Github: @kadiks Twitter: @kryptonikco Blog: kryptonik.net