$30 off During Our Annual Pro Sale. View Details »

Exposing Native Modules with React Native

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

Naoufal Kadhom

September 15, 2016
Tweet

More Decks by Naoufal Kadhom

Other Decks in Technology

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
    [email protected]

    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