Exposing Native Modules with React Native

A deep dive into exposing Native Modules with React Native. We'll learn how to build libraries that expose native functionality and how to use them in our applications. Along the way, we'll identify best practices, helpful resources and understand why the Native Modules API might be React Native's most important feature.

Supporting videos for these slides are available at https://www.youtube.com/playlist?list=PLpW5mhrbAJliS_gRGaez78tAdk1wXh2aA

Event: React Montreal
Location: Mobeewave

Transcript

1. Exposing Native Modules with React Native
2. Hi, I’m Naoufal Naoufal
3. Hi, I’m No-Fell Senior UI Engineer @ Unsplash
4. Hi, I’m No-Fell Senior UI Engineer @ Unsplash
5. Hi, I’m No-Fell Senior UI Engineer @ Unsplash
6. Unsplash Do whatever you want high-resolution photos
13. Join the Team javascript@unsplash.com
14. What’s React Native Build mobile apps using only JavaScript real
15. What’s React Native Build mobile apps using only JavaScript real
16. What’s React Native Build mobile apps using only JavaScript real
17. React Structure
18. React Structure React React Native React DOM
19. React Structure React React Native React DOM
20. React Structure React React Native React DOM
21. React Structure React React Native React DOM
22. React Structure React React Native React DOM
23. React Structure React React Native React DOM
24. React Structure React React Native React DOM Native UI Components & Modules
25. What are Native Modules
26. What are Native Modules
27. Some of my Packages
28. Exposing Native Modules
29. Exposing Native Modules • Create a new Library with the RN CLI
30. Exposing Native Modules • Create a new Library with the RN CLI • Linking your Library to a Project
31. Exposing Native Modules • Create a new Library with the RN CLI • Linking your Library to a Project • Define your Methods in JS
32. Exposing Native Modules • Create a new Library with the RN CLI • Linking your Library to a Project • Define your Methods in JS • Match those Methods in Native
33. Exposing Native Modules • Create a new Library with the RN CLI • Linking your Library to a Project • Define your Methods in JS • Match those Methods in Native • Implement the code
34. New Library
35. New Library
36. Link your Library
37. Link your Library react-native link*
38. Link your Library react-native link*
39. JavaScript Methods
40. JavaScript Methods
41. Native Methods
42. Native Methods
43. Implementation
44. Implementation
45. Using your Library
46. Using your Library
47. Using your Library
48. Helpful Tools
49. Helpful Tools • RCTConvert for converting Types
50. Helpful Tools • RCTConvert for converting Types • RCTUtils for error handling
51. Helpful Tools • RCTConvert for converting Types • RCTUtils for error handling • Sending Events to JavaScript
52. Helpful Tools • RCTConvert for converting Types • RCTUtils for error handling • Sending Events to JavaScript • Export Constants to avoid bridge round-trips
53. Helpful Tools • RCTConvert for converting Types • RCTUtils for error handling • Sending Events to JavaScript • Export Constants to avoid bridge round-trips • Apple Developer Documentation
54. Thank you @naoufal on Twitter & GitHub