O documento descreve como as bridges funcionam no React Native para permitir a comunicação entre o código nativo e JavaScript. As bridges serializam mensagens entre as threads nativas e a engine JavaScript de forma assíncrona. Duas categorias de bridges são mencionadas: módulos nativos, que expõem funções para o JS, e interfaces nativas de usuário, que expõem views para serem usadas como componentes no React Native.

1. Bridges no React Native
Lucas Santos Silva
@santoslucas
www.linkedin.com/in/lucassantossilva

2. Como o React Native funciona?
• Threads Nativas - main thread, lida com gestos e
views, modules, shadow node
• Thread JS - roda a engine JS em separado

3. Como o React Native funciona?

4. Como as threads interagem?

5. Como as threads interagem?

6. Bridge
• Fazem a comunicação entre o nativo e o JS
• As bridges são o core do React Native
• Assíncronas
• Mensagens serializadas

7. Exemplo

8. Bridge

9. Bridge
• React Native já oferece diversos componentes e
APIs
• Mas e se for necessário alguma SDK ou feature
nativa não disponível no RN?

10. Como implementar uma Bridge?

11. Como implementar uma Bridge?
• Android - Java ou Kotlin
• iOS - Objective-C ou Swift
• Dois tipos:
- Native module
- Native UI

12. Native Module
• Expões funções nativas para o Javascript
• Não retorna valores
- Usa-se callbacks ou promisses
- Também é possível usar EventEmitter

13. ToastAndroid
https://facebook.github.io/react-native/docs/
toastandroid.html

14. Toast Module (Android) - Java

15. Toast Module (Android) - Java

16. Toast Module (Android) - JS

17. AlertIOS
https://facebook.github.io/react-native/docs/
alertios.html

18. AlertIOS (iOS) - Objective-C

19. AlertIOS (iOS) - Objective-C

20. AlertIOS (iOS) - Objective-C

21. AlertIOS (iOS) - JS

22. Native UI
• Expões views nativas para serem usadas como
Componentes
• Recebe props do React Native

23. Native UI - ImageView

24. Native UI - ImageView

25. Native UI - JS

26. Native UI - JS

27. Gráfico no G1
• Não havia forma eficaz de
implementar gráficos no RN
• Libs só com Webview
• https://github.com/wuxudong/
react-native-charts-wrapper
• Android - MPAndroidChart
• iOS - charts

28. Gráfico no G1

29. Algumas dicas
• Avalie bem se você realmente precisa criar uma bridge
• Muitas dependências de projeto Android deixam o build
mais lento

30. Algumas dicas
• https://github.com/frostney/react-native-create-library
• https://github.com/peggyrayzis/react-native-create-bridge

31. Talks interessantes
• https://www.youtube.com/watch?v=GiUo88TGebs
• https://www.youtube.com/watch?v=NkbO-Vhqbl0
• https://www.youtube.com/watch?v=hDviGU-57lU

32. Artigos
• https://wetalkit.xyz/react-native-what-it-is-and-how-it-
works-e2182d008f5e
• https://www.logicroom.co/react-native-architecture-
explained/
• https://tadeuzagallo.com/blog/react-native-bridge/

33. Documentação do RN
• https://facebook.github.io/react-native/docs/native-modules-
ios.html
• https://facebook.github.io/react-native/docs/native-
components-ios.html
• https://facebook.github.io/react-native/docs/native-modules-
android.html
• https://facebook.github.io/react-native/docs/native-
components-android.html

34. Obrigado