React Native Ecosystem

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.

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.

An Expo config plugin is a synchronous function that takes the app config and optional props and returns the config. A mod plugin like withInfoPlist registers an async callback that edits the parsed Info.plist during npx expo prebuild.

Android builds are signed with a keystore (key alias and passwords); iOS builds need a distribution certificate plus an app-specific provisioning profile. By default credentialsSource is remote: EAS generates them on the first eas build and stores them encrypted on its servers.

An EAS build profile is a named object under build in eas.json describing one kind of binary; eas build --profile <name> selects it. Keys like developmentClient, distribution, ios.simulator, env and channel make each profile's binary different.

EAS Submit is a hosted service that uploads an existing .ipa or .aab to App Store Connect or Google Play. By default an iOS build lands in TestFlight and an Android build on the internal track; nothing goes to public review automatically.

Fix the text, then run eas update --channel production --environment production --message "Fix typo". EAS bundles the JavaScript, uploads it to the branch production points at, and compatible production builds download it on a later launch.

Reset Metro's cache when bundles show old code or config after a Babel, dependency or branch change. npx react-native start --reset-cache or npx expo start --clear discards the transform and file map caches, not node_modules or native builds.

Metro classifies a file by its extension: resolver.sourceExts (js, jsx, json, ts, tsx by default) are transformed and bundled as code, resolver.assetExts (png, jpg, ttf, mp4 and more) are copied as assets. require('./logo.png') returns a numeric asset registry ID that Image resolves.

Metro sends each file, on its own, through a transformer in a pool of worker processes: Babel compiles JSX, TypeScript and newer syntax, then Metro records the dependencies and wraps it as a module, so files transform in parallel.

Read which module failed and which file imported it. A missing package usually means node_modules still matches the old branch, so reinstall. A missing relative file is a real code change. If the file exists, restart Metro, then reset caches.

getDefaultConfig returns React Native's complete Metro defaults and mergeConfig overlays your changes section by section. Arrays are replaced, not appended, so add .glb by spreading the default assetExts plus 'glb', never by passing ['glb'] alone.

Add resolve.alias { 'react-native$': 'react-native-web' } so only the exact react-native import is swapped, and list '.web.js' before '.js' in resolve.extensions so web-specific files win over shared ones.

React Native Web compiles each StyleSheet.create declaration into atomic CSS: one deduplicated class per property-value pair, inserted once into a shared style sheet. A plain object that never went through create becomes an inline style attribute.

It depends on the API. React Native Web throws for some (findNodeHandle), silently mocks others (Alert.alert does nothing, StatusBar renders null, NativeModules holds only UIManager) and lacks platform-only exports such as PermissionsAndroid, which arrive as undefined.

Install react-dom, react-native-web and @expo/metro-runtime with npx expo install, then run npx expo start --web. Expo CLI's Metro resolver aliases react-native to react-native-web for the web platform, so no webpack or Babel alias is needed.

React Native Web renders View as a div carrying a flexbox reset (column direction, no shrink) and Text as a div at the top level but a span inside another Text, so nested runs stay inline and inherit font and color.

Async Storage stores only strings, so serialize with JSON.stringify before setItem and JSON.parse after getItem, treating a null result as never saved. Every method returns a Promise, so await the read before deciding which screen to show.

Async Storage v3 writes each instance to its own plaintext SQLite file inside the app's sandbox on iOS and Android, and to an IndexedDB database on the web. Nothing is encrypted by the library, so tokens, passwords and personal data do not belong there.

getMany returns an object containing every requested key, null for missing ones; setMany takes a key-to-string record; removeMany ignores absent keys. Each batch is atomic, and any failure throws AsyncStorageError, whose type property says which layer failed.

Async Storage v3 replaces the global singleton with isolated instances from createAsyncStorage(name), drops callbacks, the merge API and useAsyncStorage, renames multiGet/multiSet/multiRemove to getMany/setMany/removeMany, and throws AsyncStorageError. The default export stays so existing v2 data remains readable during migration.

Move when startup waits on awaited reads (synchronous MMKV fits), when large JSON strings are rewritten for one-field changes or filtered in JavaScript (SQLite fits), or when secrets crept in. Migrate once at startup: copy, verify, write a marker, then delete the old keys.

react-native-mmkv calls the native C++ MMKV library directly through JSI, so getString or set run synchronously on the JS thread and return a value, not a Promise. Async Storage's native calls are asynchronous and must be awaited.

The hooks subscribe to the instance's value-changed listener through useSyncExternalStore and re-read their key synchronously whenever that key changes. Any write to the same instance id in the app, from a hook or plain code, re-renders every component using that key.

Each createMMKV id is a separate storage, so user data and app settings live apart and can be wiped separately. encryptionKey encrypts an instance (AES-128 by default); generate the key per install and keep it in platform secure storage, never in code.

Check a migration flag in MMKV synchronously at startup. If it is missing, show a brief loading state, copy every Async Storage value into MMKV unchanged, set the flag, then delete the old keys. Later launches read synchronously.

react-native-mmkv v4 was rewritten as a Nitro Module: install react-native-nitro-modules, replace new MMKV() with createMMKV(), rename delete() to remove(), rename the Info.plist AppGroup key to AppGroupIdentifier, and rebuild natively. It needs React Native 0.76 or newer.

openDatabaseAsync('ledger.db') returns a SQLiteDatabase. Use execAsync for unparameterised multi-statement scripts such as schema setup, runAsync for writes with bound values, getFirstAsync for one row (or null), and getAllAsync for every matching row as an array of objects.

SQLiteProvider opens one database for its subtree, importing an assetSource first and then running onInit, and puts it in React context; useSQLiteContext returns it in any descendant. By default the provider renders nothing until that work finishes.

withTransactionAsync runs BEGIN, awaits your callback, then COMMIT; if the callback throws it runs ROLLBACK and rethrows. Related writes land all-or-nothing, and one commit for a batch is much faster than autocommitting every statement.

Interpolated input can become SQL code. expo-sqlite's bound parameters (? placeholders or $name keys) compile the statement first and pass values separately, so input stays data. execAsync binds nothing, so it must never receive input.

Open the database with enableChangeListener: true, for example through SQLiteProvider's options, then subscribe with addDatabaseChangeListener and re-run the screen's query when an event names the sightings table. Remove the subscription on unmount.

Call SecureStore.setItemAsync(key, value) to save, getItemAsync(key) to read (it resolves null when nothing is stored) and deleteItemAsync(key) on sign-out. iOS keeps the value as a Keychain item; Android encrypts it with a Keystore key into SharedPreferences.

On iOS, expo-secure-store values live in the Keychain, which can survive uninstalling when the app is reinstalled with the same bundle ID. On Android the Keystore keys are deleted with the app, so values are gone, and Auto Backup is configured to exclude them.

keychainAccessible sets the iOS Keychain accessibility of the stored item, meaning when it can be read. The default WHEN_UNLOCKED fails while the device is locked, so a token read by background refresh needs AFTER_FIRST_UNLOCK or its THIS_DEVICE_ONLY variant.

requireAuthentication: true ties the stored value to the user's biometrics, so the system prompts before releasing it. On iOS the prompt appears when reading or updating an existing value; on Android every operation requires authentication.

Values saved with requireAuthentication: true are bound to the currently enrolled biometrics, so enrolling a new fingerprint invalidates them and getItemAsync resolves null. Treat that as expired: sign the user in another way, then save a fresh value.

Paths.document is the app's persistent documents directory, which the system does not clear on its own; Paths.cache is the caches directory, which the OS may purge when storage runs low. Keep irreplaceable data in document and re-creatable data in cache.

expo-file-system's file.write(content) is synchronous; reads come as text(), base64() and bytes() Promises plus textSync(), base64Sync() and bytesSync(). Synchronous calls run native I/O on the JavaScript thread and block it, so large files need the async reads.

File.downloadFileAsync(url, destination, options) saves a URL into a File or Directory and resolves to a File. It rejects if the target exists unless idempotent is true, rejects on a non-2xx status, reports onProgress and cancels through an AbortSignal.

Since SDK 54 the root expo-file-system import is the File/Directory/Paths API, and old names like readAsStringAsync are stubs that warn and throw. Import them from expo-file-system/legacy to unblock, then migrate each call, for example to new File(uri).text().

The OS purges Paths.cache only under storage pressure, so the app enforces its own budget: one Directory per region, measured with Directory.size and removed with delete() inside try/catch, run deferred because these calls block the JavaScript thread.

Awaiting RNTL 14's render() completes the mount but does not wait for a mocked fetch to resolve, and getByText checks the tree once. Use await screen.findByText(), which retries every 50 ms until the item appears or 1000 ms pass.

toBeOnTheScreen passes when the element is still attached to the rendered tree; toBeVisible also fails if it or any ancestor has display: 'none', opacity: 0, is hidden from accessibility, or sits in a Modal with visible={false}. Only toBeVisible proves the message is shown.

In RNTL 14 you write await render(<LoginScreen />), then query with screen.getByText('Welcome back'). render is async because it wraps rendering in an async act, and screen is only bound after that promise resolves.

Create an instance with userEvent.setup(), then await user.type(searchInput, 'dune') and await user.press(chip), and assert on the rendered result. Each call returns a Promise that settles after its events and React updates, so skipping await lets assertions run too early.

Use findBy* when waiting for an element to appear and waitFor for any other expectation, such as a mock being called. Pass { timeout } per call (findBy's third argument) or set configure({ asyncUtilTimeout }) for the whole suite; the default is 1000 ms.

Detox's by.id matches a native view's test identifier, which React Native sets from the testID prop. Unlike by.text, it survives copy changes and translations and is unique by design, so Detox recommends it as the default matcher.

Detox is gray-box: code inside the app tracks in-flight network requests, short timers, animations, UI layout, the main queue and the React Native JS thread, and Detox runs each action or expectation only once all of them are idle.

toExist() passes when the element is in the native view hierarchy; toBeVisible() also needs at least 75 % of it on screen by default. expect checks once after Detox's idle sync, while waitFor polls until a timeout, which must be set with withTimeout().

A Detox config lists devices and apps as separate named dictionaries, then defines configurations that each pair one device with one app. The same test files run against whichever pair detox build -c and detox test -c select.

Turn on Detox artifacts for failing tests (logs, screenshots, videos) and trace logging, upload them from CI, then compare the runner's conditions — speed, headless device, workers, data, binary — and reproduce locally with the same configuration before touching retries.