Breaking Down React Native Bridging

on YouTube ↗23m

" summary

Bridge mechanics get demystified with concrete numbers and tools: the prototype is 77% JavaScript 23% native, native code communicates via a JSON message signature over a single asynchronous bridge and message queue, and visibility comes from RN Snoopy (uses rxjs, filters streams, triggers yellow-box warnings). A CLI called react-native-create-bridge generates Obj‑C/Swift/Java/Kotlin templates. Performance tips include keeping data flat, minimizing passes, using native driver for animations, and preferring callbacks/promises/events or DeviceEventEmitter/eventDispatcher for cross‑side communication.

AI-written summary · about

" chapters (8)

1. 0:00Intro
2. 1:14BRIDGING IN REACT NATIVE: HOW YOU COMMUNICATE BETWEEN JAVASCRIPT & NATIVE CODE
3. 4:25UNDERSTANDING REACT NATIVE INTERNALS WILL HELP YOU LEARN BRIDGING FASTER
4. 7:28MESSAGEQUEUE CONGESTION WILL SLOW DOWN YOUR REACT NATIVE APP.
5. 11:23HOW TO BRIDGE NATIVE MODULES & UI COMPONENTS
6. 14:05NATIVE UI COMPONENTS CROSS-PLATFORM CONCEPTS
7. 16:49NATIVE MODULES CROSS-PLATFORM CONCEPTS
8. 22:56Recording and Production Confreaks

" related talks

• 34mReact Native - Under The BridgeChen Feldman · Reversim Summit 2019
• 29mBuilding React NativeParashuram N · ReactNext 2018
• 10mUnderstanding "Native" in React NativeYeswanth Swami · React Native EU 2018
• 33mReact NativeChen Feldman · ReactNext 2019
• 26mReact Native: Under the HoodAlexander Kotliarskyi · You Gotta Love Frontend 2015
• 53mHow React-Native shapes the way we think about native appsIlya Ivanov · Mobile Fest 2018
• 35mBridging the Gap: How to use React Native in existing large native code basesLeland Richardson · ReactiveConf 2016
• 21mReact Native under the hoodPhillip Pan · App.js Conf 2024