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
   

   View Slide

2. Hi, I’m Naoufal
   Naoufal
   

   View Slide

3. Hi, I’m No-Fell
   Senior UI Engineer @ Unsplash
   

   View Slide

4. Hi, I’m No-Fell
   Senior UI Engineer @ Unsplash
   

   View Slide

5. Hi, I’m No-Fell
   Senior UI Engineer @ Unsplash
   

   View Slide

6. Unsplash
   Do whatever you want high-resolution photos
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. Join the Team
    javascript@unsplash.com
    

    View Slide

14. What’s React Native
    Build mobile apps using only JavaScript
    real
    

    View Slide

15. What’s React Native
    Build mobile apps using only JavaScript
    real
    

    View Slide

16. What’s React Native
    Build mobile apps using only JavaScript
    real
    

    View Slide

17. React Structure
    

    View Slide

18. React Structure
    React
    React Native
    React DOM
    

    View Slide

19. React Structure
    React
    React Native
    React DOM
    

    View Slide

20. React Structure
    React
    React Native
    React DOM
    

    View Slide

21. React Structure
    React
    React Native
    React DOM
    

    View Slide

22. React Structure
    React
    React Native
    React DOM
    

    View Slide

23. React Structure
    React
    React Native
    React DOM
    

    View Slide

24. React Structure
    React
    React Native
    React DOM
    Native UI Components & Modules
    

    View Slide

25. What are Native Modules
    

    View Slide

26. What are Native Modules
    

    View Slide

27. Some of my Packages
    

    View Slide

28. Exposing Native Modules
    

    View Slide

29. Exposing Native Modules
    • Create a new Library with the RN CLI
    

    View Slide

30. Exposing Native Modules
    • Create a new Library with the RN CLI
    • Linking your Library to a Project
    

    View Slide

31. Exposing Native Modules
    • Create a new Library with the RN CLI
    • Linking your Library to a Project
    • Define your Methods in JS
    

    View Slide

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
    

    View Slide

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
    

    View Slide

34. New Library
    

    View Slide

35. New Library
    

    View Slide

36. Link your Library
    

    View Slide

37. Link your Library
    react-native link*
    

    View Slide

38. Link your Library
    react-native link*
    

    View Slide

39. JavaScript Methods
    

    View Slide

40. JavaScript Methods
    

    View Slide

41. Native Methods
    

    View Slide

42. Native Methods
    

    View Slide

43. Implementation
    

    View Slide

44. Implementation
    

    View Slide

45. Using your Library
    

    View Slide

46. Using your Library
    

    View Slide

47. Using your Library
    

    View Slide

48. Helpful Tools
    

    View Slide

49. Helpful Tools
    • RCTConvert for converting Types
    

    View Slide

50. Helpful Tools
    • RCTConvert for converting Types
    • RCTUtils for error handling
    

    View Slide

51. Helpful Tools
    • RCTConvert for converting Types
    • RCTUtils for error handling
    • Sending Events to JavaScript
    

    View Slide

52. Helpful Tools
    • RCTConvert for converting Types
    • RCTUtils for error handling
    • Sending Events to JavaScript
    • Export Constants to avoid bridge
    round-trips
    

    View Slide

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
    

    View Slide

54. Thank you
    @naoufal on Twitter & GitHub
    

    View Slide