Using Android /iOS native code In a React Native app

Do you fear that the current React Native ecosystem doesn’t fit your needs? Or maybe you already have native apps and want to reuse part of your code while moving to React Native?

React Native offers a better future for hybrid apps by wrapping its native components. It’s really easy to create native modules in android or iOS, and to use them in a React Native app. In this lightning talk, we will discover how to create a native module with React Native, with a concrete use case: downloading a music playlist for offline playback. We will use Kotlin and Objective-C for that. Fanny will share with you our experience with React Native at 7digital, what we’ve learnt, why we prefer React Native to Cordova, and what could be improved.

Transcript

1. Using Android /iOS native code In a React Native app @FannyDemey
2. Mobile Developer @7digital Leader of GDG Lille Organizer of Devfest Lille (400 attendees) @FannyDemey
3. “Not a mobile web app, an HTML5 app, or a hybrid app. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java”
4. How React Native works ?
5. JS
6. JS Thread Native Thread Native Modules
7. JS Thread Native Thread Native Modules
8. JS Thread Native Thread Native Modules Bridge
9. JS Thread Native Thread Native Modules Bridge
10. Why developing its own bridge with React Native ?
11. Why developing its own bridge with React Native ? • Access native API • Integrate a native SDK • Performance
12. How to develop its own bridge ?
13. Module or Component ? Native Modules Native UI Component
14. 1. Choose a language Objective C
15. Special prize for Kotlin
16. 2. Create your bridge react-native-create-library
17. 3. Module definition Kotlin
18. 4. Module subscription Java
19. 5. Javascript module JS
20. 6. Link your bridge
21. 5. Tada ! JS
22. Traffic Jam
23. 5. Véhicules autorisés 5. Authorized vehicles
24. Events % of download progression ? Current track playing time ? Any action on the lock screen player ?
25. 5. Event Kotlin
26. iOS ?
27. iOS module Obj-C
28. iOS event Obj-C
29. Moment of loneliness with React-native
30. When I become as red as this screen
31. Remote JS Debugging : The slow motion effect !
32. When React-native plays “cache-cache” (hide&seek)
33. Conclusion
34. @FannyDemey Thank you for your attention. Any question ?