Exposing Native Modules with React Native

0781a471438822cdb4f69bcb2efc28e0?s=47 Naoufal Kadhom
September 15, 2016

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

0781a471438822cdb4f69bcb2efc28e0?s=128

Naoufal Kadhom

September 15, 2016
Tweet

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

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  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