Microsoft engineers Lorenzo Chandra and Tommy describe brownfield development, where teams build React Native features in separate repositories and integrate them into host apps such as Outlook and Teams. React Native Test App lets developers work without building a full host app, and rnx-kit check helps align package versions and fix dependency configuration across monorepos.
React Native EU 2021 - Virtual Conference: Day II
Speakers
React Native EU 2021’s second virtual conference day features Callstack and guest speakers discussing large React Native codebases, code splitting, debugging, animation, security, payments, testing, and real-time communication.
Callstack developer Paweł Trzciwa explains how code splitting can load features on demand in modular apps, super apps, and hardware companion apps. He presents Re.Pack, a webpack-based React Native solution, and outlines async chunks, dynamic scripts, and Module Federation. At the time of the talk, basic local and remote chunk loading was available, while Module Federation was planned.
Monica compares Flipper, React Native Debugger, and Reactotron, covering their plugins, breakpoints, profiling, and tradeoffs such as setup and performance overhead. Grant Sander demonstrates Reanimated 2 worklets, shared values, and gesture handling; Alexander Kotik compares React Native Animated, Lottie, and Reanimated for building purposeful animations that run smoothly.
Matthias Ingiro shows how app packages, Hermes bytecode, and stored data can be inspected, and discusses tools such as MobSF, Frida, and Objection. Thor from Stripe demonstrates PaymentSheet in an Expo app and explains that native UI handles card details without exposing them to the JavaScript bridge. He notes that digital goods generally require the app stores’ in-app purchase systems.
Louis Rusevsky demonstrates test-driven development with React Native Testing Library, using a Hacker News app to test story switching and link behavior. Lars Thorup presents recorded Bluetooth traffic as reusable integration-test data, reducing dependence on manual mocks. Akshat Paul and Wojciech Kwiatek cover WebRTC video and VoIP, including signaling, STUN and TURN, permissions, and native call handling.
Takeaways
- Use a lightweight React Native test app to shorten iteration when a full host app takes too long to build.
- Treat dependency alignment across monorepos as an automation problem, with shared profiles and checks.
- Choose code-splitting methods based on team boundaries and deployment needs; Module Federation adds coordination and QA complexity.
- Keep payment card handling in native UI components so sensitive details do not pass through the JavaScript bridge.
- Combine fast automated tests with a smaller number of tests based on real device traffic, especially for Bluetooth protocols.
Mentioned in this talk
Callstack
MicrosoftEquinox MediaFormidableHorizon AlphaAnka
Stripe
ExpoBAMSoundboksChannelsReact Native Test AppRe.PackReact Native DebuggerReactotronFlipperReanimatedLottie React NativeFridaStripe React NativeReact Native Testing LibraryReact Native BLE PLX Mock RecorderReact Native CallKeep
React NativeRNXKit
webpack
WebRTCCallKitTDDSearch inside this talk
What was claimed 25
- role atMonica Restrepo is software engineer at Equinox Media
“I am a software engineer currently helping build one of the most innovative mobile applications”
0:19inWhat went wrong?! Deep dive into debugging RN applicationsYouTube Verified2 sources· Talk
- role atGrant Sander is software engineer at Formidable
“I'm a software engineer at Formidable.”
0:29inModern Animating in RN - an Introduction to Reanimated V2YouTube Verified2 sources· Talk
- uses
“we could bridge this gap and make webpack compatible with React Native. And that’s exactly what we did.”
10:26inCode Splitting in React NativeYouTube Verified2 sources· Talk
- integrates withStripe React Native integrates with Expo
“the Stripe Direct Native SDK works with Expo”
21:45in"Show me the money" - securely accepting payments in React Native appsYouTube Verified2 sources· Talk
- integrates withReact Native CallKeep integrates with CallKit
“It manages CallKit on iOS”
25:52inCreating a VoIP app in React Native - the beginner's guideYouTube Verified2 sources· Talk
- role atLorenzo Chandra is senior software engineer atMicrosoft
“I'm a senior software engineer at Microsoft”
YouTube Unverified1 source· Talk
- role atTom Ingram is principal software engineer atMicrosoft
“I'm a principal software engineer at Microsoft”
YouTube Unverified1 source· Talk
- featureReact Native Test App: Supports iOS, Android, macOS, and Windows
“It works with iOS, Android, macOS, and Windows”
YouTube Unverified1 source· Talk
- featureRNXKit: Checks and updates package.json dependencies using configured profiles
“This tool understands the structure and dependencies within a package.json and can modify it based on a series of curated profiles.”
YouTube Unverified1 source· Talk
- role atPaweł Trzciwa is software developer atCallstack
“I'm a software developer at Callstack”
YouTube Unverified1 source· Talk
- featureRe.Pack: Makes webpack compatible with React Native and supports code splitting
“Re.Pack is a toolkit that makes webpack compatible with React Native.”
YouTube Unverified1 source· Talk
- featureReact Native Debugger: Supports breakpoints, layout and props inspection, Metro logs, network requests, and performance profiling
“it allows you to use breakpoints”
YouTube Unverified1 source· Talk
- featureReanimated: Runs JavaScript worklets on the UI thread and supports gesture-driven animations
“Reanimated executes JavaScript on a main thread via worklets and minimizes bridge trips.”
YouTube Unverified1 source· Talk
- foundedAlexander Kotik founded Horizon Alpha
“I founded my own software company here in Munich in 2012”
YouTube Unverified1 source· Talk
- role atAlexander Kotik is founder at Horizon Alpha
“I work at my own company, Horizon iPhone.”
YouTube Unverified1 source· Talk
- role atMatthias Ingiro is leader of the front-end chapter at Anka
“I work as the leader of the front-end chapter at Anka”
YouTube Unverified1 source· Talk
- featureFrida: Hooks code execution in an app so scripts can change runtime behavior
“Frida is an amazing reverse engineering tool that allows us to hook code execution from an app.”
YouTube Unverified1 source· Talk
- role at
“I'm a developer advocate at Stripe”
YouTube Unverified1 source· Talk
- featureStripe React Native: Provides native payment UI and keeps card information on the native side instead of exposing it to the JavaScript bridge
“the native components handle all the card information, and we don’t expose it to the JavaScript bridge.”
YouTube Unverified1 source· Talk
- role atLouis Rusevsky is software developer at BAM
“I'm actually French and work for BAM, a Paris-based mobile development agency.”
YouTube Unverified1 source· Talk
- featureTDD: Uses failing-test, implementation, and refactoring phases
“First, when you want to add a feature, you have to write a failing test.”
YouTube Unverified1 source· Talk
- role atLars Thorup is software engineer at Soundboks
“I started last year working with Soundboks.”
YouTube Unverified1 source· Talk
- featureReact Native BLE PLX Mock Recorder: Records real BLE traffic and replays it in fast Jest integration tests
“Because the recordings come from actual traffic with the device, this is true integration testing.”
YouTube Unverified1 source· Talk
- featureWebRTC: Enables real-time audio and video communication between browsers, mobile platforms, and other devices
“WebRTC helps build peer-to-peer real-time audio and video streams between two or more parties.”
YouTube Unverified1 source· Talk
- role atWojciech Kwiatek is CTO at Channels
“I'm the CTO at Channels.”
YouTube Unverified1 source· Talk
