React Native

Fabric is React Native's New Architecture renderer: a shared C++ core that turns React's tree into native views through an immutable shadow tree. It enables synchronous layout reads, concurrent features such as Transitions and Suspense, and flattening on both platforms.

Hermes is React Native's default JavaScript engine. In release builds its compiler, hermesc, turns the Metro bundle into bytecode on the build machine, so at launch the device runs ready bytecode instead of parsing and compiling JavaScript source.

The JavaScript thread runs your bundle: React rendering, state updates, event handlers, timers and fetch callbacks. The UI (main) thread is the only one that creates and mutates native views, and it handles raw touches, native scrolling and native animations.

The legacy bridge sent serialized, batched messages asynchronously, so native calls normally answered through callbacks or promises. JSI lets JavaScript call C++ host functions synchronously and hold references to C++ host objects, with no serialization step.

No. The New Architecture is the only architecture since React Native 0.82: newArchEnabled=false on Android and RCT_NEW_ARCH_ENABLED=0 on iOS are ignored with a warning, and the app still runs on it, with old libraries loaded through interop layers.

Autolinking finds the app's dependencies that ship native code and adds them to the iOS and Android builds automatically. You still run pod install on iOS, rebuild the native app, and do any library-specific setup such as permissions.

A Turbo Module is a set of native functions with no UI, called from JavaScript. A Fabric native component is a platform view in the React tree, configured by props, reporting through events, driven by commands. A signature pad draws on screen, so it needs a component.

Subclass the generated abstract NativeXxxSpec, passing the ReactApplicationContext to its constructor, and override every abstract method it declares, with a Promise parameter for async results and a plain return for sync ones. Then return an instance from a BaseReactPackage.

Return a Promise for one asynchronous result that can fail, declare an EventEmitter for many values over time, and treat a callback as a one-shot legacy alternative; a plain return value suits only cheap, immediate data.

The class adopts the generated NativeXxxSpec protocol, implements every selector it declares, returns the generated NativeXxxSpecJSI from getTurboModule:, returns the JavaScript name from +moduleName, and is registered in codegenConfig.ios so React Native can map that name to the class.

The React Native docs recommend starting new apps with a framework, and Expo is the one they name, because it already solves routing, native dependencies, native builds and upgrades; a bare project means assembling and maintaining those pieces yourself.

pod install reads ios/Podfile, resolves React Native's pods and every native library's pods, writes Podfile.lock and generates a Pods project plus an .xcworkspace that joins it to the app project, so Xcode must build the workspace.

React Native's JavaScript runs on the device with no Node process, so process.env holds only NODE_ENV. Per-environment values must be inlined into the bundle at build time or read from native build config, and both are readable in the shipped app.

Metro compiles .ts and .tsx with Babel, where @react-native/babel-preset's TypeScript plugin deletes type annotations without checking them. Type errors are only reported by tsc, which @react-native/typescript-config runs as a noEmit checker.

Bump react-native and react to the versions the Upgrade Helper's package.json shows, then hand-apply its diff of the project template to the iOS, Android and JavaScript config files, update native libraries, reinstall pods and rebuild both platforms.

On a physical Android device the debug app asks for the Metro dev server at localhost:8081 on the phone itself. adb reverse forwards the phone's port 8081 over USB to port 8081 on your computer, where Metro listens.

Open the React Native Dev Menu with Ctrl+Cmd+Z on the iOS Simulator, Cmd+M or Ctrl+M on an Android emulator, a shake on a device, adb shell input keyevent 82, or d in Metro. It offers reload, DevTools, Fast Refresh and inspector toggles in development builds only.

Press j in the dev server terminal or choose Open DevTools in the Dev Menu. React Native DevTools, a Chrome DevTools-based debugger attached to Hermes on the device, gives you Console, Sources with breakpoints, Network and React Components panels.

Fast Refresh swaps edited modules into the running app and keeps function component and Hook state. If an edited module is reached through an import path from outside the React tree, it falls back to a full reload, which re-runs the bundle and loses all state.

A release build runs one Metro bundle compiled to Hermes bytecode, so frames give a function name and a bytecode offset, not your files. Symbolication maps them back with the source map from that exact build, for example using metro-symbolicate.

A require() source is a bundled asset whose width and height the bundler records, so Image sizes itself on mount. A remote uri has no known size, and React Native deliberately never sizes it after download, so without dimensions it lays out at zero.

resizeMode sets how an Image fits a box of a different shape: cover (the default) fills and crops, contain shows everything with bands, stretch distorts, repeat tiles, center never enlarges. Listing photos suit cover; a floor plan needs contain.

Core SafeAreaView is iOS-only, applies padding only and does not work with Android edge-to-edge, so 0.81 deprecated it. Use react-native-safe-area-context: SafeAreaProvider at the root, its SafeAreaView with edges, or useSafeAreaInsets for explicit padding.

React Native's Switch is controlled: after the native toggle moves, the component resets it to the value prop. If onValueChange does not update the state behind value, the switch snaps back, so store the new boolean it receives.

Core Button renders a fixed platform look from a string title and has no style prop, and each Touchable bakes in one feedback effect. Pressable exposes the pressed state and the full press lifecycle, so any design can be built on it.

FlashList (@shopify/flash-list) is a FlatList-compatible list that recycles: a cell scrolled off screen stays mounted and is re-rendered with a different item. FlatList instead unmounts cells outside its render window and mounts new ones as you scroll.

keyExtractor returns a unique, stable string for each FlatList item; the list uses it as the React key and to cache that cell's measurements. Without it, FlatList tries item.key, then item.id, then falls back to the index and warns about missing keys.

Passing onRefresh makes a React Native FlatList add a standard RefreshControl; refreshing is the controlled boolean that shows the indicator. Set refreshing true when the reload starts and false when it ends, and replace the first page rather than appending.

A React Native SectionList takes sections: an array of objects, each with a required data array plus any fields you add, such as title. renderItem receives item, index within its section, section and separators; renderSectionHeader and renderSectionFooter receive the section.

FlatList is a PureComponent, so it skips re-rendering when its props are shallowly equal. If renderItem depends on state outside data, such as a selected id, pass that state as extraData so the list re-renders and rows see the change.

Style lengths are unitless density-independent points (dp on Android). PixelRatio.get() returns the device's scale, so width: 120 covers 120 x scale physical pixels: 360 on a 3x screen. getPixelSizeForLayoutSize does that conversion, rounded to an integer.

Copy the font into each native project: android/app/src/main/assets/fonts on Android, and the iOS app target plus a UIAppFonts entry in Info.plist. Then rebuild the native app and reference it by name in fontFamily.

React Native's style prop accepts an array, so a disabled card uses [styles.card, disabled && styles.cardDisabled]. Falsy entries are skipped, and for each property the last entry that sets it wins; there are no selectors or cascade.

In React Native 0.87, StyleSheet.create returns the object it is given, freezing each style in development; its practical benefit is TypeScript checking. An inline style object works the same but is recreated on every render.

useColorScheme returns 'light' or 'dark' (null only without the native Appearance module) and re-renders the component whenever the scheme changes. Appearance.getColorScheme() returns the same value once, so a stored result goes stale.

Import without the suffix. Bundling for a platform, Metro tries that platform's suffix first (.ios or .android), then .native, then the plain file, so each platform's bundle contains only its matching implementation.

Platform.OS is the running platform's name, 'ios' or 'android'. Platform.select(spec) returns the value under that platform's key, otherwise under native, otherwise under default, otherwise undefined; the value can be anything, from a number to a style object.

BackHandler calls hardwareBackPress listeners newest-first; the first one that returns true consumes the press and older listeners never run. If none returns true, React Native falls back to Android's default back behaviour, which leaves the app.

elevation sets Android's native view elevation, which draws a system shadow and lifts the view above non-elevated siblings. shadowOffset, shadowOpacity and shadowRadius are iOS-only, so on Android only elevation (tinted by shadowColor on API 28+) or boxShadow produces a shadow.

React Native's shadow props map to the iOS layer shadow, and shadowOpacity defaults to 0, so shadowColor alone draws nothing. boxShadow is the web-style alternative that also renders on Android, supports spread, inset and multiple shadows, and needs the New Architecture.

React Native builds a default label from a pressable's Text children, so an icon-only Pressable has no meaningful name and no role. Set accessibilityLabel (or aria-label) to its purpose and role='button'; use accessibilityHint only to explain a non-obvious result.

Text scales with the user's system font size by default because allowFontScaling is true; maxFontSizeMultiplier caps how far one Text, and the Text nested in it, may grow, while allowFontScaling={false} switches scaling off entirely.

AccessibilityInfo.announceForAccessibility speaks a string on both iOS and Android at the moment you call it; accessibilityLiveRegion makes TalkBack read a view when its content changes but does nothing on iOS, so VoiceOver users still need the imperative call.

accessibilityState carries flags — disabled, selected, checked (true, false or 'mixed'), busy, expanded — while accessibilityValue carries a range (min, max, now) or a text value. Pressable copies its disabled prop into accessibilityState.disabled, so it is announced as disabled.

Declare the swipe operations as custom actions with accessibilityActions, such as archive with a label, and run them in onAccessibilityAction by switching on event.nativeEvent.actionName; screen-reader users then pick Archive from the row's action list.

Keep an Animated.Value from useAnimatedValue, start Animated.spring on it, and bind it to an Animated.View's transform scale. useNativeDriver: true hands the animation to native before it starts, so the UI thread computes every frame.

By default the native driver animates only non-layout styles: transform, opacity, colours, border radii, shadow opacity and radius, elevation, zIndex and filter. Native-driving width logs an error that the style is not supported; animate transform: scale instead.

useSimultaneousGestures lets all gestures be active together, useExclusiveGestures gives them a priority order where each waits for the ones before it to fail, and useCompetingGestures lets the first to activate cancel the rest. All three combine gestures on one detector.

Gesture Handler recognises gestures natively on the UI thread, and with Reanimated installed its hook callbacks run as worklets on the UI thread too. PanResponder decides and reacts in JavaScript, so a busy JS thread delays every move.

A shared value is a mutable container kept in sync between the JS and UI runtimes. useAnimatedStyle's updater is a UI-runtime worklet that re-runs when a shared value it reads changes, so view props update without a React render.

In React Navigation 7 the rendered screen list is the auth gate: when auth state flips, the old screens' routes are dropped and the first new screen shows, so no sign-in history survives and signed-out users cannot reach protected screens.

Pushing a details screen keeps the product list mounted underneath with its state intact; it only receives a blur event. It unmounts when its route is removed from the stack state: going back past it, replace or reset.

Use a stack for drill-down flows where screens are pushed and popped as history, bottom tabs for a few top-level peer sections that each keep their state, and a drawer when there are more peer destinations than fit in a tab bar.

A stack inside a tab gives that tab its own history and keeps the tab bar visible; tabs inside a stack let root-stack screens cover the tab bar. Most apps combine both: per-tab stacks inside a root stack.

Call navigation.navigate('Tracking', { orderId }), where the second argument is the params object, then read route.params.orderId in the Tracking screen, or call useRoute() from any component rendered inside that screen.

Linking.getInitialURL() resolves to the URL that launched a killed app, or null; the 'url' event fires when a link arrives while the app is already running. Handling only one loses either cold-start or warm-start links.

React Native's Linking.openURL hands a URL to the operating system, which opens the app registered for its scheme: mailto: for mail, tel: for the dialer, https: for the browser. Its promise rejects when nothing can open the URL.

Register the scheme natively: on iOS add it under CFBundleURLTypes / CFBundleURLSchemes in Info.plist; on Android add an intent-filter with the VIEW action, DEFAULT and BROWSABLE categories and a data scheme to MainActivity. Then rebuild the app.

The domain hosts /.well-known/apple-app-site-association (Team ID plus bundle ID, paths) and /.well-known/assetlinks.json (package name, SHA-256 signing fingerprints) over HTTPS; the app declares applinks:domain in Associated Domains and an https intent filter with autoVerify.

Expo's scheme field declares the app's custom URL scheme; prebuild writes it into Info.plist's CFBundleURLTypes and an Android VIEW intent filter. That is native configuration, so it needs a new build — an over-the-air update cannot add it.

Call Notifications.scheduleNotificationAsync with content and a trigger such as { type: SchedulableTriggerInputTypes.DAILY, hour, minute }; it resolves an identifier for cancelling. Other triggers: DATE, TIME_INTERVAL, WEEKLY, MONTHLY, YEARLY and iOS-only CALENDAR.

In the foreground the app, not the operating system, decides how a notification is presented, and with no handler expo-notifications shows nothing. setNotificationHandler returns a behavior per notification: banner, list, sound and badge.

iOS requires every app to request notification authorization through a one-time system alert. Android showed notifications by default until Android 13 (API 33) added the POST_NOTIFICATIONS runtime permission, which must be declared in the manifest and requested.

A device token is an opaque address the push provider issues for one app installation. On iOS it comes from APNs, on Android from FCM; the app sends it to its backend, which uses it to target that install.

Once an Android channel exists, its behavior (importance, sound, vibration) is under the user's control; recreating it with the same id updates details such as name and description and can at most lower the importance. To change behavior, use a new channel id and delete the old one.

On the Android emulator, localhost is the emulator itself, not your computer. The stock emulator reaches the host's loopback through 10.0.2.2; the iOS Simulator shares the Mac's network, so localhost works there, and a physical phone needs the computer's LAN IP.

NetInfo.fetch() resolves to the current NetInfoState (the cached latest one if available; refresh() forces a new query). NetInfo.addEventListener(cb) calls back now and on every change and returns an unsubscribe function. useNetInfo() wraps that subscription in a hook that starts as unknown.

Create the global WebSocket in a useEffect, send only after onopen, parse event.data in onmessage and call ws.close() in the cleanup. React Native's send() throws while still connecting, and a failed connection fires error, then close with code 1006.

CORS is a rule browsers enforce on pages from another origin. A React Native app's fetch uses the native HTTP stack, which has no page origin and no CORS check, so CORS headers neither block nor protect anything; the API must authenticate callers.

isConnected says the device has an active network link; isInternetReachable says that link actually reaches the internet, and is null while unknown. Drive an offline banner from isInternetReachable === false, never from null, and still treat failed API calls as the final word.

React Native's AppState reports active (foreground), background, or, on iOS only, inactive during transitions. Read AppState.currentState, subscribe with AppState.addEventListener('change', handler), and call remove() on the returned subscription.

Pending writes held in memory vanish when the OS kills the app or it crashes. A persisted outbox keeps each write on disk until the server confirms it, replaying on reconnect, at launch and on return to the foreground.

AsyncStorage reads are asynchronous, so the store starts with its initial state and the saved log arrives a moment later. Gate on hydration: redux-persist's PersistGate renders its loading prop until rehydration completes, and Zustand exposes persist.hasHydrated and onFinishHydration.

Every component reading the cart Context re-renders when its value changes, including those on mounted but hidden screens. That work runs on React Native's single JavaScript thread, so a slow phone misses frames and taps lag.

When the OS wakes an Expo app for a task, React Native evaluates the JavaScript bundle but mounts no views, so a defineTask inside a component never runs. expo-task-manager then finds no task, logs a warning and unregisters it.

The value is copied into the build at build time, and that build ships inside every APK and IPA, so anyone who downloads the app can extract it. Real secrets must stay on a server the app calls.

A refresh token belongs in platform secure storage: the iOS Keychain, or a value encrypted with an Android Keystore key, reached through expo-secure-store or react-native-keychain. AsyncStorage is an unencrypted store that anyone reading the app's files can open.

WebBrowser.openAuthSessionAsync(authUrl, redirectUrl) from expo-web-browser. On iOS it runs ASWebAuthenticationSession; on Android it opens a Custom Tab and waits for the redirect deep link. It resolves with { type: 'success', url } or a cancel or dismiss result.

Call PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA) after declaring CAMERA in the manifest; it resolves to 'granted', 'denied' or 'never_ask_again', while check() only reports whether the permission is already held.

useAuthRequest builds the request (state plus a PKCE verifier and S256 challenge) and returns [request, response, promptAsync]. promptAsync opens the system browser; on success you pass response.params.code and request.codeVerifier to exchangeCodeAsync to get tokens.

Keep the subscription that AppState.addEventListener returns and call its remove() in the effect's cleanup, and clearInterval the saved interval id there too. Otherwise the handlers keep running and keep the unmounted screen's closures, state and data in memory.

React Native keeps console calls in release bundles, formatting every argument on the JS thread and passing it to the native logger. Add babel-plugin-transform-remove-console under env.production in babel.config.js to strip every console call from release builds.

The UI rate measures the native main thread that draws views and runs scrolling; the JS rate measures the thread running React and your handlers. Whichever falls, and which symptoms appear, tells you where to look.

A debug build runs development-mode JavaScript served by Metro, with dev-only checks and warnings and no Hermes bytecode precompilation, so the JS thread does far more work than in production. Profile a release or profileable release-like build on a real device.

Every module imported from the entry file is evaluated before the first screen renders, including any top-level work it does. Loading rarely used screens lazily, with getComponent or React.lazy, keeps that work off the startup path.

@react-native/jest-preset makes Jest able to load React Native code: it compiles JS and TS through babel-jest, transforms React Native's own untranspiled packages, stubs image requires, uses a Node-based environment and mocks core native modules.

Jest skips transforming files that match transformIgnorePatterns, and the React Native preset only allowlists react-native and @react-native packages, so an ESM date library reaches Node untranspiled. Add the package to the same negative-lookahead regex.

A Jest and React Native Testing Library test runs only JavaScript in Node: native modules are mocks, no layout is computed, gestures are simulated by calling handlers, and the engine and build differ from the shipped app.

Under Jest there is no native binary, so TurboModuleRegistry.getEnforcing cannot find the location module and throws when the spec file is imported. Mock that spec module (or your wrapper around it) with jest.mock and a factory of jest.fn methods.

Platform.OS is 'ios' in tests because the React Native preset's haste defaultPlatform is 'ios', so Platform.ios.js and .ios files load. Test Android branches with a second Jest project whose defaultPlatform is 'android', or by injecting the value.

An APK is the package a device installs; an AAB (Android App Bundle) is a publishing format Google Play turns into per-device APKs. React Native's release command runs bundleRelease to build the AAB Play requires for new apps.

A Release build embeds the JavaScript as main.jsbundle inside the app, loads it from there instead of from Metro, compiles the JS in production mode and removes the Dev Menu. Archives for the App Store always use Release.

Generate an upload keystore with keytool, put its path, alias and passwords in MYAPP_UPLOAD_* Gradle properties, add a signingConfigs.release block that reads them, and point buildTypes.release at it; the fresh template signs release with the debug keystore.

Store the keystore, certificate and profile as base64 CI secrets, decode them into temporary files at build time, pass the passwords as Gradle properties or environment variables, and delete everything when the job ends.

The distribution certificate, with its private key in your keychain, proves the build comes from your team. The App Store provisioning profile ties that certificate to one bundle identifier and its entitlements. Xcode signs the archive with both before upload.