React Native
198 bites tagged React Native — interview questions with model answers, and 60-second explainers.
Returning a Promise from a Native Module Method
The exported method takes resolve and reject as its last parameters; do the async work off the main thread, then settle exactly once with a result or an error. native module async bridging.
Draggable Snap-Back Card with Gesture Handler and Reanimated
Shared values track offset, a Pan gesture updates them on the UI thread, an animated style applies translation, onEnd springs back to zero. gesture-driven animation.
Fetching REST Data with Loading and Error State
Track loading, data, and error; fetch in an effect, check response.ok, parse JSON, handle catch and finally. data fetching with state. ignoring non-2xx responses or leaving loading true on error.
Why react-native-gesture-handler Replaces the Responder System
The JS responder system runs on the JS thread so gestures lag under load; gesture-handler runs recognition natively for smooth, reliable gestures. gesture handling limits.
Debouncing a Search TextInput with Hooks
Keep input in state, in an effect set a timer that fires the search after a delay, clear the timer on each change so only the final pause triggers the call. debounce with hooks.
Responsive Layouts with Core React Native APIs
Lean on flexbox, percentage sizing, useWindowDimensions, SafeAreaView, and Platform; recompute on dimension change. responsive design without libraries. hardcoding pixel widths or reading Dimensions once.
JSI, Fabric, and TurboModules in the New Architecture
JSI gives JS direct synchronous access to native via C++, Fabric is the new renderer, TurboModules lazy-load native modules. New Architecture pillars. thinking it still routes everything through the async JSON bridge.
StyleSheet.create and Inline Style Tradeoffs
Styles are JS objects of subset-CSS properties; StyleSheet.create validates them and yields stable references, while inline objects allocate each render. RN styling model. claiming RN uses real CSS or cascading.
Limits of OTA Updates and Runtime Versions
OTA ships only JS and assets; native changes need a store build; runtime versions gate compatibility. OTA boundaries. assuming any change can ship OTA or ignoring runtime version mismatches.
Optimizing Slow iOS CI Build Times
Profile the build, cache CocoaPods and DerivedData, use prebuilt frameworks, parallelize, scope to changed work. CI build optimization. buying faster runners without measuring the bottleneck first.
Designing a Fastfile for Versioning, match, and Uploads
Lanes bump versions, run match for signing, build with gym and gradle, upload via pilot and supply; secrets come from CI env or a vault. Fastlane lane design. committing the match passphrase or keys to the repo.
CI/CD Pipeline for React Native to TestFlight and Play
A triggered workflow installs deps, builds signed artifacts on macOS and Linux runners, uploads via Fastlane to TestFlight and the Play internal track. mobile CI/CD design. storing signing secrets in the repo.
Over-the-Air Updates for JavaScript-Only Fixes
Ship a new JS bundle the app downloads at runtime and applies on next launch, with no store review. OTA update mechanics. thinking OTA can ship native code changes or bypass store policy.
Android App Bundles versus Universal APKs
An AAB is an upload format; Play generates per-device APKs via dynamic delivery, shrinking download size. Play distribution format. thinking an AAB installs directly on a device like an APK.
Managing Per-Environment Configuration in React Native
Use per-environment env files plus build flavors or schemes, inject at build time, keep secrets off the device. environment configuration strategy. hardcoding endpoints or branching on a runtime flag inside one bundle.
iOS Provisioning Profiles and Signing Certificates
The certificate proves developer identity, the App ID names the app, the profile binds certificate, App ID, and devices. iOS code-signing model. confusing the certificate with the profile or treating them as interchangeable.
How do you catch RN performance regressions?
Track TTI, JS and UI thread FPS, and memory; baseline them and gate CI with automated tools like Flashlight, using the React profiler and DevTools to diagnose. performance strategy and metrics.
What are the key challenges of setting up Detox E2E?
Maintain separate debug/release build configs, rely on Detox automatic synchronization but tame uncontrolled async like timers and animations, and stabilize CI with headless emulators and retries. real-world E2E setup.
RNTL or Detox for a navigation flow?
RNTL can test navigation logic by rendering the navigator in JS and asserting screen changes; Detox runs the real app for true end-to-end confidence including native transitions. choosing the right test level.
What does 'test behavior, not implementation' mean?
Query elements the way a user finds them (text, role, label) and assert observable behavior; for a Button, fire press and assert the visible effect, not internal state. testing philosophy.
How do you test a component using a native module?
Native code is absent in the Node-based Jest environment, so you mock the module with jest.mock to return fake values, often via the library's provided jest mock. handling native modules in Jest.
How do you mock a fetch call in Jest tests?
Replace global fetch with a Jest mock or a library like jest-fetch-mock, return a resolved Promise with a fake Response, and reset mocks between tests. deterministic network mocking.
Unit testing vs component testing in React Native
Unit tests verify isolated functions/logic with Jest; component tests render components and assert behavior with React Native Testing Library. testing taxonomy.
Why use a C++ TurboModule, and what are the risks?
C++ JSI bindings give synchronous, serialization-free calls and shared cross-platform code; challenges are manual memory ownership across the JS-C++ boundary, GC interaction, and thread safety. low-level native integration.
Get React Native bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.