# Code Reference β React Native
_75 pages_
---
# React Native (/docs/react-native)
# React Native [#react-native]
Mobile UI, APIs, Expo.
Browse the sidebar for every cheat sheet in this section.
## Sections [#sections]
* [Examples](./examples)
* [Expo](./expo)
---
# Accessibility (/docs/react-native/accesebility)
# Accessibility [#accessibility]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Make screens usable with VoiceOver / TalkBack via accessibility props on native views. Test with real screen readers; labels and roles matter more than visual-only cues.
## π§ Core concepts [#-core-concepts]
* **`accessible`** β groups children into one focusable element.
* **`accessibilityLabel` / `accessibilityHint`** β what is read aloud.
* **`accessibilityRole`** β `button`, `header`, `link`, `image`, `adjustable`, β¦
* **`accessibilityState`** β `\{ disabled, selected, checked, busy, expanded \}`.
* **`accessibilityActions` / `onAccessibilityAction`** β custom actions.
## π‘ Examples [#-examples]
```tsx
import { Pressable, Text } from "react-native";
export function IconButton({
label,
onPress,
}: {
label: string;
onPress: () => void;
}) {
return (
β
);
}
```
```tsx
Settings
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Icon-only buttons without `accessibilityLabel`.
* Nesting multiple `accessible` views that trap focus incorrectly.
* Relying on placeholder text as the only label for inputs β set explicit labels.
## π Related [#-related]
* [touchable.md](/docs/react-native/touchable) β press targets
* [basic\_primitives.md](/docs/react-native/basic-primitives) β Text / View
* [gesture.md](/docs/react-native/gesture) β gestures vs a11y
* [Expo/plugins.md](/docs/react-native/expo/plugins) β native config
---
# Activity Indicator (/docs/react-native/activity-indicator)
# Activity Indicator [#activity-indicator]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`ActivityIndicator` shows a platform-native spinner for loading states. Prefer it for indeterminate progress; use progress bars for determinate tasks. Size and color are the main knobs.
## π§ Core concepts [#-core-concepts]
| Prop | Role |
| ------------------ | ------------------------------------- |
| `animating` | Show/hide animation |
| `size` | `small` / `large` (number on Android) |
| `color` | Spinner color |
| `hidesWhenStopped` | iOS hide when not animating |
Place near the content that is loading; announce loading to a11y when blocking.
## π‘ Examples [#-examples]
```tsx
import { ActivityIndicator, View, StyleSheet, Text } from "react-native";
export function LoadingBlock({ label = "Loading" }: { label?: string }) {
return (
{label}
);
}
export function InlineBusy({ busy }: { busy: boolean }) {
return busy ? : null;
}
const styles = StyleSheet.create({
wrap: { alignItems: "center", justifyContent: "center", padding: 24, gap: 12 },
label: { color: "#444" },
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Full-screen spinner with no escape for slow networks.
* Wrong contrast (`color` on similar background).
* Leaving `animating` true forever after errors.
* Using indicators instead of skeleton UI for large layout shifts.
## π Related [#-related]
* [refresh\_control.md](/docs/react-native/refresh-control) β pull to refresh
* [modal.md](/docs/react-native/modal) β blocking overlays
* [networking.md](/docs/react-native/networking) β request states
* [accesebility.md](/docs/react-native/accesebility) β announcements
* [styling.md](/docs/react-native/styling) β layout
---
# Alert (/docs/react-native/alert)
# Alert [#alert]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`Alert.alert` shows a native system dialog with a title, message, and buttons. Use for confirmations and simple errors. For custom UI, use a modalβnot Alert. On web/unsupported platforms behavior differs.
## π§ Core concepts [#-core-concepts]
| Piece | Role |
| ------------------- | ------------------------------------ |
| `title` / `message` | Copy |
| `buttons` | `\{ text, onPress, style \}[]` |
| `style` | `default` / `cancel` / `destructive` |
| `Alert.prompt` | iOS text prompt only |
Buttons dismiss the alert when pressed; keep handlers light.
## π‘ Examples [#-examples]
```tsx
import { Alert, Pressable, Text } from "react-native";
export function DeleteButton({ onConfirm }: { onConfirm: () => void }) {
return (
Alert.alert("Delete item?", "This cannot be undone.", [
{ text: "Cancel", style: "cancel" },
{ text: "Delete", style: "destructive", onPress: onConfirm },
])
}
>
Delete
);
}
function showError(err: Error) {
Alert.alert("Something went wrong", err.message);
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Relying on `Alert.prompt` on Androidβnot available.
* Stacking multiple alerts.
* Putting long forms inside Alertβuse a screen/modal.
* Forgetting a cancel action on destructive flows.
## π Related [#-related]
* [modal.md](/docs/react-native/modal) β custom dialogs
* [pressable.md](/docs/react-native/pressable) β triggers
* [vibration.md](/docs/react-native/vibration) β haptic emphasis
* [accesebility.md](/docs/react-native/accesebility) β announcements
* [share.md](/docs/react-native/share) β system sheets
---
# Animation (/docs/react-native/animation)
# Animation [#animation]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Animate with the built-in `Animated` API, `LayoutAnimation`, or libraries like **Reanimated**. Prefer the UI thread (Reanimated / native driver) for smooth 60fps motion.
## π§ Core concepts [#-core-concepts]
* **`Animated.Value`** β drive opacity, transform, color interpolations.
* **`useNativeDriver: true`** β opacity/transform only; offloads to native.
* **`Animated.timing` / `spring` / `parallel` / `sequence`**.
* **Reanimated** β `useSharedValue`, `withTiming`, `useAnimatedStyle` for gestures + UI thread.
* **`LayoutAnimation`** β simple layout transitions (Android needs `UIManager` flag on older RN).
## π‘ Examples [#-examples]
```tsx
import { useRef, useEffect } from "react";
import { Animated, View } from "react-native";
export function FadeIn({ children }: { children: React.ReactNode }) {
const opacity = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.timing(opacity, {
toValue: 1,
duration: 300,
useNativeDriver: true,
}).start();
}, [opacity]);
return {children};
}
```
```tsx
import Animated, { useSharedValue, withSpring, useAnimatedStyle } from "react-native-reanimated";
export function Bounce() {
const scale = useSharedValue(1);
const style = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));
return (
{
scale.value = withSpring(1.2);
}}
/>
);
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* `useNativeDriver: true` with `width`/`height`/`top` β not supported; use Reanimated or layout anims.
* Starting animations every render without deps.
* Fighting the navigatorβs own transition configs.
## π Related [#-related]
* [transition.md](/docs/react-native/transition) β screen transitions
* [gesture.md](/docs/react-native/gesture) β gesture-driven motion
* [layout.md](/docs/react-native/layout) β layout props
* [touchable.md](/docs/react-native/touchable) β press feedback
---
# AppRegistry (/docs/react-native/appregistry)
# AppRegistry [#appregistry]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`AppRegistry` is the JS entry that registers the root component. The native host looks up the app key and runs that component. Expo / CLI templates wire this for you.
## π§ Core concepts [#-core-concepts]
* **`AppRegistry.registerComponent(appKey, () => Root)`** β required entry.
* **App key** β must match native (`AppDelegate` / `MainActivity` / `app.json` name).
* **`runApplication`** β used by the native side; rarely called from app code.
* **Expo** β `registerRootComponent` from `expo` wraps `AppRegistry`.
## π‘ Examples [#-examples]
```tsx
import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";
AppRegistry.registerComponent(appName, () => App);
```
```tsx
// Expo
import { registerRootComponent } from "expo";
import App from "./App";
registerRootComponent(App);
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Mismatched app name between JS and native β blank screen / redbox.
* Registering twice with different roots in the same bundle.
* Forgetting the factory `() => App` (passing `App` directly is also accepted in modern RN, but factory is the classic pattern).
## π Related [#-related]
* [basic\_primitives.md](/docs/react-native/basic-primitives) β building UI
* [Expo/filestructure.md](/docs/react-native/expo/filestructure) β Expo entry
* [Expo/config.md](/docs/react-native/expo/config) β app name / slug
* [widget.md](/docs/react-native/widget) β alternate surfaces
---
# AppState (/docs/react-native/appstate)
# AppState [#appstate]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`AppState` reports whether the app is `active`, `background`, or (iOS) `inactive`. Subscribe to changes to pause video, sync data, or lock a secure screen when backgrounding.
## π§ Core concepts [#-core-concepts]
| State | Meaning |
| ------------ | ----------------------------- |
| `active` | Foreground, interactive |
| `background` | Not visible |
| `inactive` | iOS transition / multitasking |
APIs: `AppState.currentState`, `addEventListener('change', handler)`.
## π‘ Examples [#-examples]
```tsx
import { useEffect, useRef, useState } from "react";
import { AppState, Text } from "react-native";
export function useAppActive() {
const [active, setActive] = useState(AppState.currentState === "active");
useEffect(() => {
const sub = AppState.addEventListener("change", (next) => {
setActive(next === "active");
});
return () => sub.remove();
}, []);
return active;
}
export function SecureGate({ children }: { children: React.ReactNode }) {
const appState = useRef(AppState.currentState);
const [locked, setLocked] = useState(false);
useEffect(() => {
const sub = AppState.addEventListener("change", (next) => {
if (
appState.current === "active" &&
next.match(/inactive|background/)
) {
setLocked(true);
}
appState.current = next;
});
return () => sub.remove();
}, []);
if (locked) return Unlock to continue;
return <>{children};
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Doing heavy work on every blur without debounce.
* Forgetting to remove the subscription.
* Assuming `inactive` exists on Android the same way.
* Polling instead of listening.
## π Related [#-related]
* [biometrics.md](/docs/react-native/biometrics) β unlock
* [player.md](/docs/react-native/player) β pause media
* [notification.md](/docs/react-native/notification) β background
* [storage.md](/docs/react-native/storage) β persist on blur
* [navigation.md](/docs/react-native/navigation) β blur events
---
# BackHandler (/docs/react-native/backhandler)
# BackHandler [#backhandler]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`BackHandler` listens for the Android hardware back button (and some back gestures). iOS has no system back button β use navigation stack gestures instead.
## π§ Core concepts [#-core-concepts]
* **`BackHandler.addEventListener("hardwareBackPress", handler)`**.
* **Return `true`** β you handled it; **`false`** β let default (exit / pop) proceed.
* **Cleanup** β remove the subscription in effect cleanup.
* **React Navigation** β prefer `beforeRemove` / stack options over raw BackHandler when using a navigator.
## π‘ Examples [#-examples]
```tsx
import { useEffect } from "react";
import { BackHandler, Alert } from "react-native";
export function useConfirmExit(enabled: boolean) {
useEffect(() => {
if (!enabled) return;
const sub = BackHandler.addEventListener("hardwareBackPress", () => {
Alert.alert("Exit?", "Leave the screen?", [
{ text: "Cancel", style: "cancel" },
{ text: "Exit", onPress: () => BackHandler.exitApp() },
]);
return true;
});
return () => sub.remove();
}, [enabled]);
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Stacking multiple listeners without cleanup β unpredictable back behavior.
* Handling back on iOS unnecessarily β no-op or wrong UX.
* Calling `exitApp()` casually β poor UX; prefer navigating away.
## π Related [#-related]
* [deeplinking.md](/docs/react-native/deeplinking) β navigation entry
* [drawer.md](/docs/react-native/drawer) β drawer back behavior
* [modal.md](/docs/react-native/modal) β dismiss on back
* [gesture.md](/docs/react-native/gesture) β gesture navigation
---
# Basic primitives (/docs/react-native/basic-primitives)
# Basic primitives [#basic-primitives]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Core building blocks: `View`, `Text`, `Image`, `ScrollView`, `TextInput`, `Pressable`, `FlatList`. There is no HTML β style with the `StyleSheet` API (Flexbox by default).
## π§ Core concepts [#-core-concepts]
* **`View`** β container (like `div`); flex layout.
* **`Text`** β all strings must be inside `Text`.
* **`Image` / `ImageBackground`** β local `require` or remote `\{ uri \}`.
* **`ScrollView` vs `FlatList`** β lists of unknown length β `FlatList` / `SectionList`.
* **`StyleSheet.create`** β validated style objects; density-independent units.
## π‘ Examples [#-examples]
```tsx
import {
View,
Text,
Image,
StyleSheet,
FlatList,
Pressable,
} from "react-native";
const styles = StyleSheet.create({
row: { flexDirection: "row", alignItems: "center", gap: 12, padding: 16 },
title: { fontSize: 18, fontWeight: "600" },
avatar: { width: 40, height: 40, borderRadius: 20 },
});
export function UserRow({
name,
uri,
onPress,
}: {
name: string;
uri: string;
onPress: () => void;
}) {
return (
{name}
);
}
```
```tsx
item.id}
renderItem={({ item }) => {}} />}
/>
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Raw text outside `` crashes.
* Nesting `VirtualizedList` inside `ScrollView` without care β warnings / perf issues.
* Inline styles everywhere β harder to reuse; prefer `StyleSheet`.
## π Related [#-related]
* [layout.md](/docs/react-native/layout) β flex layout
* [touchable.md](/docs/react-native/touchable) β press handling
* [accesebility.md](/docs/react-native/accesebility) β a11y props
* [animation.md](/docs/react-native/animation) β animated views
---
# Biometrics (/docs/react-native/biometrics)
# Biometrics [#biometrics]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Biometric auth (Face ID, Touch ID, fingerprint) unlocks local secrets or confirms sensitive actions. Expo: **`expo-local-authentication`**. Bare: `react-native-biometrics` / Keychain integration. Always provide a device passcode fallback.
## π§ Core concepts [#-core-concepts]
| API | Role |
| ----------------------------------- | ---------------------------------------------- |
| `hasHardwareAsync` | Sensor present |
| `isEnrolledAsync` | User enrolled biometrics |
| `supportedAuthenticationTypesAsync` | Face / fingerprint |
| `authenticateAsync` | Prompt |
| Secure storage | Store tokens in Keychain/Keystore after unlock |
OS policy controls rate limits and lockouts.
## π‘ Examples [#-examples]
```tsx
import * as LocalAuthentication from "expo-local-authentication";
import { Alert, Pressable, Text } from "react-native";
export function UnlockButton({ onUnlocked }: { onUnlocked: () => void }) {
return (
{
const hasHardware = await LocalAuthentication.hasHardwareAsync();
const enrolled = await LocalAuthentication.isEnrolledAsync();
if (!hasHardware || !enrolled) {
Alert.alert("Biometrics unavailable", "Use your passcode instead.");
return;
}
const result = await LocalAuthentication.authenticateAsync({
promptMessage: "Unlock",
fallbackLabel: "Use passcode",
disableDeviceFallback: false,
});
if (result.success) onUnlocked();
}}
>
Unlock with biometrics
);
}
```
**Info.plist / Android:** Face ID usage string; no special permission for basic LocalAuthentication on modern Expo.
## β οΈ Pitfalls [#οΈ-pitfalls]
* Treating biometrics as server authenticationβit's local presence only.
* Storing session tokens in AsyncStorage instead of secure storage.
* No fallback when enrollment is missing.
* Re-prompting in a tight loop after cancel.
## π Related [#-related]
* [Expo secure\_store](/docs/react-native/expo/secure-store) β Keychain
* [appstate.md](/docs/react-native/appstate) β lock on background
* [storage.md](/docs/react-native/storage) β insecure vs secure
* [permissions.md](/docs/react-native/permissions) β related prompts
* [alert.md](/docs/react-native/alert) β fallback UX
---
# Blur (/docs/react-native/blur)
# Blur [#blur]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Blurred glass effects use platform views: Expo `@react-native-community/blur` alternatives or **`expo-blur`** (`BlurView`). Common for headers, tab bars, and modal scrims. Performance variesβavoid huge animated blurs on low-end Android.
## π§ Core concepts [#-core-concepts]
| Piece | Role |
| ----------- | ---------------------------------------- |
| `BlurView` | Blurs content behind the view |
| `intensity` | Blur strength (Expo) |
| `tint` | light / dark / default |
| Fallback | Solid translucent color when unsupported |
Blur only affects views **behind** it in the native hierarchyβnot React siblings painted later without proper ordering.
## π‘ Examples [#-examples]
```tsx
import { BlurView } from "expo-blur";
import { StyleSheet, Text, View } from "react-native";
export function FrostedHeader({ title }: { title: string }) {
return (
{title}
);
}
const styles = StyleSheet.create({
wrap: {
height: 56,
justifyContent: "center",
paddingHorizontal: 16,
overflow: "hidden",
},
title: { fontSize: 17, fontWeight: "600" },
});
```
**Config plugin (Expo):** ensure `expo-blur` is installed; prebuild if needed.
## β οΈ Pitfalls [#οΈ-pitfalls]
* Expecting BlurView to blur its own childrenβit blurs whatβs behind.
* Heavy blur + frequent re-renders β jank on Android.
* Missing fallback UI on web/unsupported targets.
* Stacking multiple full-screen blurs.
## π Related [#-related]
* [styling.md](/docs/react-native/styling) β translucent UI
* [modal.md](/docs/react-native/modal) β overlays
* [navigation.md](/docs/react-native/navigation) β translucent headers
* [Expo config](/docs/react-native/expo/config) β plugins
* [animation.md](/docs/react-native/animation) β animated opacity
---
# Camera (/docs/react-native/camera)
# Camera [#camera]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Camera access uses **`expo-camera`** (Expo) or `react-native-vision-camera` (bare/advanced). Request permission before preview; handle denied states. For still photos only, `expo-image-picker` may be enough.
## π§ Core concepts [#-core-concepts]
| Topic | Notes |
| ---------- | ------------------------------------ |
| Permission | Camera (and mic for video) |
| Preview | `` / VisionCamera |
| Capture | `takePictureAsync` / photo callbacks |
| Facing | front / back |
| Barcode | Optional scanners |
Background: pause camera when screen blurs (`useIsFocused`).
## π‘ Examples [#-examples]
```tsx
import { useState, useRef, useEffect } from "react";
import { View, Pressable, Text, StyleSheet } from "react-native";
import { CameraView, useCameraPermissions } from "expo-camera";
export function CameraScreen() {
const [permission, requestPermission] = useCameraPermissions();
const ref = useRef(null);
const [facing, setFacing] = useState<"back" | "front">("back");
if (!permission) return ;
if (!permission.granted) {
return (
Grant camera access
);
}
return (
{
const photo = await ref.current?.takePictureAsync();
console.log(photo?.uri);
}}
>
Capture
setFacing((f) => (f === "back" ? "front" : "back"))}
>
Flip
);
}
const styles = StyleSheet.create({
flex: { flex: 1 },
btn: { padding: 16, backgroundColor: "#fff" },
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Starting camera without permission UX.
* Leaving camera running on blurred tabsβbattery/heat.
* Ignoring simulator limitations (no camera).
* Storing captures without compression / cleanup.
## π Related [#-related]
* [permissions.md](/docs/react-native/permissions) β runtime perms
* [Expo image\_picker](/docs/react-native/expo/image-picker) β gallery/camera stills
* [image.md](/docs/react-native/image) β display
* [navigation.md](/docs/react-native/navigation) β focus cleanup
* [appstate.md](/docs/react-native/appstate) β background
---
# Clipboard (/docs/react-native/clipboard)
# Clipboard [#clipboard]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Read and write the system clipboard. In modern RN / Expo, use `@react-native-clipboard/clipboard` or `expo-clipboard` β the core `Clipboard` API was removed from the RN core package.
## π§ Core concepts [#-core-concepts]
* **`setString(text)`** β copy to clipboard.
* **`getString()`** β async read (may need permission prompts on some platforms).
* **Expo** β `import * as Clipboard from "expo-clipboard"`.
* **Security** β donβt log clipboard contents; treat as sensitive.
## π‘ Examples [#-examples]
```tsx
import * as Clipboard from "expo-clipboard";
import { Pressable, Text, Alert } from "react-native";
export function CopyButton({ value }: { value: string }) {
async function copy() {
await Clipboard.setStringAsync(value);
Alert.alert("Copied");
}
return (
Copy
);
}
```
```tsx
import Clipboard from "@react-native-clipboard/clipboard";
async function paste() {
const text = await Clipboard.getString();
return text;
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Using deprecated `react-native` Clipboard import.
* Expecting sync `getString` β itβs async.
* Copying secrets into clipboard without user intent.
## π Related [#-related]
* [share.md](/docs/react-native/share) β system share sheet
* [storage.md](/docs/react-native/storage) β persistent storage
* [permissions.md](/docs/react-native/permissions) β platform permissions
* [Expo/plugins.md](/docs/react-native/expo/plugins) β Expo modules
---
# Deep linking (/docs/react-native/deep-linking)
# Deep linking [#deep-linking]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Deep links open a specific screen from a URL (`myapp://profile/42` or `https://β¦`). Use React Navigation linking config or Expo Router path maps.
## π§ Core concepts [#-core-concepts]
| Piece | Role |
| ----------------- | ------------------------------------------- |
| Scheme | Custom URL scheme / universal links |
| Linking API | `Linking.getInitialURL`, `addEventListener` |
| Navigation config | Map path prefixes β screens |
| Expo Router | File-based routes = URLs |
## π‘ Examples [#-examples]
```tsx
import * as Linking from 'expo-linking';
const url = Linking.createURL('profile/42');
// e.g. myapp://profile/42
```
```tsx
import { Linking } from 'react-native';
Linking.addEventListener('url', ({ url }) => {
// navigate from url
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Test cold start (`getInitialURL`) and warm start (event) separately.
* Universal links need platform domain association files.
* Encode path params consistently.
## π Related [#-related]
* [launcher\_shortcut\_menu](/docs/react-native/launcher-shortcut-menu)
* [notifications](/docs/react-native/notifications)
* [getting\_started](/docs/react-native/getting-started)
---
# Deep linking (/docs/react-native/deeplinking)
# Deep linking [#deep-linking]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Deep links open a specific screen from a URL (`myapp://path`, HTTPS universal / app links). Configure native intent filters / associated domains, then map URLs in your navigator.
## π§ Core concepts [#-core-concepts]
* **Schemes** β custom (`myapp://`) vs HTTPS app links / universal links.
* **React Navigation** β `linking` config: `prefixes` + `config.screens`.
* **Expo** β `scheme` in `app.json` / `app.config`; `expo-linking`, `npx uri-scheme`.
* **Cold start** β read initial URL; also subscribe to URL events while running.
## π‘ Examples [#-examples]
```tsx
import { NavigationContainer } from "@react-navigation/native";
const linking = {
prefixes: ["myapp://", "https://myapp.example.com"],
config: {
screens: {
Home: "home",
User: "users/:id",
},
},
};
export function RootNav() {
return (
{/* navigators */}
);
}
```
```tsx
import * as Linking from "expo-linking";
const url = Linking.createURL("users/42");
// e.g. myapp://users/42
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Native config missing β links open browser or do nothing.
* Mismatched path params vs screen names.
* Not handling the case when the app is already open (`url` event).
## π Related [#-related]
* [Expo/config.md](/docs/react-native/expo/config) β scheme config
* [backhandler.md](/docs/react-native/backhandler) β Android back
* [notification.md](/docs/react-native/notification) β notification deep links
* [request.md](/docs/react-native/request) β API after open
---
# Dimensions (/docs/react-native/dimensions)
# Dimensions [#dimensions]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`Dimensions` and `useWindowDimensions` report screen/window size for responsive layouts. Prefer the hook so rotations and split-screen updates re-render.
## π§ Core concepts [#-core-concepts]
* **`useWindowDimensions()`** β `\{ width, height, scale, fontScale \}` (recommended).
* **`Dimensions.get("window" | "screen")`** β snapshot; subscribe manually if needed.
* **Safe areas** β use `react-native-safe-area-context`, not raw status bar math alone.
* **PixelRatio** β `PixelRatio.roundToNearestPixel`, font scaling awareness.
## π‘ Examples [#-examples]
```tsx
import { useWindowDimensions, View, Text } from "react-native";
export function Responsive() {
const { width } = useWindowDimensions();
const columns = width >= 768 ? 2 : 1;
return (
Columns: {columns}
);
}
```
```tsx
import { Dimensions } from "react-native";
const { width } = Dimensions.get("window");
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Caching `Dimensions.get` at module load β stale after rotate.
* Ignoring `fontScale` β clipped text for a11y users.
* Using screen size instead of window on Android with system bars / foldables.
## π Related [#-related]
* [layout.md](/docs/react-native/layout) β flex layouts
* [statusbar.md](/docs/react-native/statusbar) β insets / bars
* [platform\_specific.md](/docs/react-native/platform-specific) β platform splits
* [basic\_primitives.md](/docs/react-native/basic-primitives) β View sizing
---
# Drawer (/docs/react-native/drawer)
# Drawer [#drawer]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Drawers are side navigation panels. Use `@react-navigation/drawer` (or a custom `Animated`/`Reanimated` panel). Gesture + back-button behavior should match platform norms.
## π§ Core concepts [#-core-concepts]
* **Drawer navigator** β screens as drawer destinations; `drawerContent` for custom UI.
* **Options** β `drawerPosition`, `swipeEnabled`, `headerShown`.
* **Nesting** β often wrap a stack inside each drawer screen.
* **Custom** β modal-like overlay with translateX animation if you donβt need a full navigator.
## π‘ Examples [#-examples]
```tsx
import { createDrawerNavigator } from "@react-navigation/drawer";
const Drawer = createDrawerNavigator();
export function AppDrawer() {
return (
);
}
```
```tsx
}
/>
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Conflicting gestures with tabs/stacks β tune `swipeEnabled` per screen.
* Forgetting Android back should close an open drawer first.
* Heavy drawer content re-rendering on every navigation event.
## π Related [#-related]
* [gesture.md](/docs/react-native/gesture) β swipe gestures
* [backhandler.md](/docs/react-native/backhandler) β Android back
* [transition.md](/docs/react-native/transition) β motion
* [layout.md](/docs/react-native/layout) β screen layout
---
# Examples (/docs/react-native/examples)
# Examples [#examples]
React Native notes in **Examples**.
---
# Dark Mode Toggle (/docs/react-native/examples/dark-mode-toggle)
# Dark Mode Toggle [#dark-mode-toggle]
*React Native Β· Example / how-to*
***
## π Overview [#-overview]
Toggle light/dark appearance with React context and `useColorScheme`, applying colors through a small theme object.
## π§ Core concepts [#-core-concepts]
| Piece | Role |
| ---------------- | ------------------------ |
| `useColorScheme` | System preference |
| Context | Share resolved theme |
| Manual override | User toggle beats system |
| Style tokens | Background / text colors |
## π‘ Examples [#-examples]
**dark\_mode\_toggle.tsx:**
```tsx
import {
createContext,
useContext,
useMemo,
useState,
type ReactNode,
} from "react";
import {
Button,
Text,
useColorScheme,
View,
StyleSheet,
} from "react-native";
type Mode = "system" | "light" | "dark";
type Palette = { bg: string; fg: string };
const palettes: Record<"light" | "dark", Palette> = {
light: { bg: "#ffffff", fg: "#111111" },
dark: { bg: "#111111", fg: "#f5f5f5" },
};
type ThemeCtx = {
mode: Mode;
setMode: (m: Mode) => void;
colors: Palette;
};
const ThemeContext = createContext(null);
export function ThemeProvider({ children }: { children: ReactNode }) {
const system = useColorScheme();
const [mode, setMode] = useState("system");
const resolved = mode === "system" ? (system === "dark" ? "dark" : "light") : mode;
const value = useMemo(
() => ({ mode, setMode, colors: palettes[resolved] }),
[mode, resolved],
);
return {children};
}
export function useTheme() {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error("useTheme requires ThemeProvider");
return ctx;
}
export function DarkModeToggle() {
const { mode, setMode, colors } = useTheme();
return (
Mode: {mode}
);
}
const styles = StyleSheet.create({
box: { flex: 1, gap: 8, padding: 16, justifyContent: "center" },
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* System scheme can be `null` β default to light.
* Hard-coded `#fff` in child components ignores the theme β pass `colors` or use context.
* Persist `mode` if you want the choice to survive restarts.
## π Related [#-related]
* [FlatList search](/docs/react-native/examples/flatlist-search)
* [Form keyboard](/docs/react-native/examples/form-keyboard)
---
# FlatList Search (/docs/react-native/examples/flatlist-search)
# FlatList Search [#flatlist-search]
*React Native Β· Example / how-to*
***
## π Overview [#-overview]
Filter a `FlatList` from a search `TextInput` with memoized data and stable `keyExtractor`.
## π§ Core concepts [#-core-concepts]
| Piece | Role |
| -------------- | --------------------------------- |
| `FlatList` | Virtualized list |
| `TextInput` | Query string |
| `useMemo` | Filter without extra renders cost |
| `keyExtractor` | Stable row ids |
## π‘ Examples [#-examples]
**FlatListSearch.tsx:**
```tsx
import { useMemo, useState } from "react";
import { FlatList, StyleSheet, Text, TextInput, View } from "react-native";
type Item = { id: string; title: string };
const DATA: Item[] = [
{ id: "1", title: "Alpha" },
{ id: "2", title: "Beta" },
{ id: "3", title: "Gamma" },
{ id: "4", title: "Delta" },
];
export function FlatListSearch() {
const [query, setQuery] = useState("");
const filtered = useMemo(() => {
const q = query.trim().toLowerCase();
if (!q) return DATA;
return DATA.filter((item) => item.title.toLowerCase().includes(q));
}, [query]);
return (
item.id}
keyboardShouldPersistTaps="handled"
ListEmptyComponent={No matches}
renderItem={({ item }) => (
{item.title}
)}
/>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 },
input: {
borderWidth: 1,
borderColor: "#ccc",
borderRadius: 8,
paddingHorizontal: 12,
paddingVertical: 8,
marginBottom: 12,
},
row: { paddingVertical: 12, fontSize: 16 },
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Inline `renderItem` recreates each render β extract a memoized row if profiling shows cost.
* Without `keyboardShouldPersistTaps`, taps on rows may dismiss the keyboard first.
* For remote search, debounce the query before fetching.
## π Related [#-related]
* [Form keyboard](/docs/react-native/examples/form-keyboard)
* [Dark mode toggle](/docs/react-native/examples/dark-mode-toggle)
---
# Form Keyboard (/docs/react-native/examples/form-keyboard)
# Form Keyboard [#form-keyboard]
*React Native Β· Example / how-to*
***
## π Overview [#-overview]
Build a login-style form that scrolls with the keyboard using `KeyboardAvoidingView` and proper `TextInput` props.
## π§ Core concepts [#-core-concepts]
| Piece | Role |
| -------------------------------- | ---------------------------------- |
| `KeyboardAvoidingView` | Shift UI above keyboard |
| `behavior` | `padding` (iOS) vs platform quirks |
| `returnKeyType` / `blurOnSubmit` | Field-to-field flow |
| `ScrollView` | Allow scroll when keyboard open |
## π‘ Examples [#-examples]
**FormKeyboard.tsx:**
```tsx
import { useRef, useState } from "react";
import {
KeyboardAvoidingView,
Platform,
ScrollView,
StyleSheet,
TextInput,
Button,
View,
} from "react-native";
export function FormKeyboard({ onSubmit }: { onSubmit: (email: string, password: string) => void }) {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const passwordRef = useRef(null);
return (
passwordRef.current?.focus()}
style={styles.input}
/>
onSubmit(email.trim(), password)}
style={styles.input}
/>
);
}
const styles = StyleSheet.create({
flex: { flex: 1 },
content: { padding: 16, justifyContent: "center", flexGrow: 1 },
input: {
borderWidth: 1,
borderColor: "#ccc",
borderRadius: 8,
padding: 12,
marginBottom: 12,
},
button: { marginTop: 8 },
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Android often needs `android:windowSoftInputMode` in the manifest / Expo app config.
* Nesting multiple scroll views fights the keyboard β keep one scroll parent.
* `keyboardVerticalOffset` must account for headers / safe area.
## π Related [#-related]
* [FlatList search](/docs/react-native/examples/flatlist-search)
* [Dark mode toggle](/docs/react-native/examples/dark-mode-toggle)
---
# Expo (/docs/react-native/expo)
# Expo [#expo]
React Native notes in **Expo**.
---
# Build (/docs/react-native/expo/build)
# Build [#build]
*Expo Β· Reference cheat sheet*
***
## π Overview [#-overview]
**EAS Build** compiles iOS/Android binaries in the cloud (or locally) from your Expo project. Profiles in `eas.json` define development, preview, and production builds.
## π§ Core concepts [#-core-concepts]
* **Profiles** β `development` (dev client), `preview` (internal), `production` (store).
* **Workflow** β `eas build -p android|ios --profile `.
* **Credentials** β EAS can manage keystores / distribution certs / provisioning.
* **App config** β `app.json` / `app.config.ts` + native projects via **CNG / prebuild**.
* **Local** β `eas build --local` when you need on-machine compiles.
## π‘ Examples [#-examples]
```json
// eas.json
{
"cli": { "version": ">= 12.0.0" },
"build": {
"development": {
"developmentClient": true,
"distribution": "internal"
},
"preview": {
"distribution": "internal",
"android": { "buildType": "apk" }
},
"production": {
"autoIncrement": true
}
},
"submit": {
"production": {}
}
}
```
```shellscript
npx eas-cli login
npx eas-cli build --platform android --profile preview
npx eas-cli build --platform ios --profile production
npx eas-cli submit --platform ios --latest
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Building production without matching bundle ID / package + store listings.
* Forgetting `developmentClient: true` when you need custom native modules in dev.
* Native changes without rebuilding the binary (JS OTA canβt add native code).
## π Related [#-related]
* [commands.md](/docs/react-native/expo/commands) β CLI commands
* [config.md](/docs/react-native/expo/config) β app config
* [keystore\_sign.md](/docs/react-native/expo/keystore-sign) β Android signing
* [plugins.md](/docs/react-native/expo/plugins) β config plugins in builds
---
# Commands (/docs/react-native/expo/commands)
# Commands [#commands]
*Expo Β· Reference cheat sheet*
***
## π Overview [#-overview]
Day-to-day Expo CLI / EAS commands for local dev, prebuild, installs, and cloud builds. Prefer `npx expo` / `npx eas-cli` for pinned versions.
## π§ Core concepts [#-core-concepts]
* **Dev server** β `npx expo start` (tunnel / LAN / USB).
* **Platform run** β `npx expo run:android` / `run:ios` (dev client / bare).
* **Install** β `npx expo install ` aligns SDK-compatible versions.
* **Prebuild** β `npx expo prebuild` generates `ios/` / `android/`.
* **EAS** β `eas build`, `eas submit`, `eas update`, `eas credentials`.
## π‘ Examples [#-examples]
```shellscript
# Create & run
npx create-expo-app@latest MyApp
cd MyApp
npx expo start
npx expo start --tunnel
# Dependency aligned to SDK
npx expo install react-native-reanimated expo-secure-store
# Native projects + local run
npx expo prebuild
npx expo run:android
npx expo run:ios
# EAS
npx eas-cli build -p all --profile preview
npx eas-cli update --branch production --message "Fix crash"
npx eas-cli credentials
```
```shellscript
# Doctor / info
npx expo-doctor
npx expo config --type public
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* `npm install` of Expo modules without `expo install` β version mismatches.
* Editing native folders then running prebuild without a strategy β overwrites (use plugins / CNG).
* Confusing Expo Go limits with what a **dev client** build can do.
## π Related [#-related]
* [build.md](/docs/react-native/expo/build) β EAS Build
* [config.md](/docs/react-native/expo/config) β configuration
* [filestructure.md](/docs/react-native/expo/filestructure) β project layout
* [plugins.md](/docs/react-native/expo/plugins) β native config
---
# Config (/docs/react-native/expo/config)
# Config [#config]
*Expo Β· Reference cheat sheet*
***
## π Overview [#-overview]
App identity and native behavior live in **`app.json`** or dynamic **`app.config.js/ts`**. Config plugins mutate native projects at prebuild time. Use `extra` / `EXPO_PUBLIC_*` for non-secret runtime config.
## π§ Core concepts [#-core-concepts]
* **Identity** β `name`, `slug`, `version`, `orientation`, `icon`, `splash`.
* **Platform blocks** β `ios.bundleIdentifier`, `android.package`, permissions, intents.
* **Scheme** β deep linking `scheme`.
* **Plugins** β `plugins: ["expo-secure-store", [...]]`.
* **EAS** β `extra.eas.projectId`; env in EAS secrets / `.env`.
## π‘ Examples [#-examples]
```ts
// app.config.ts
import type { ExpoConfig } from "expo/config";
const config: ExpoConfig = {
name: "MyApp",
slug: "my-app",
version: "1.0.0",
scheme: "myapp",
orientation: "portrait",
icon: "./assets/icon.png",
userInterfaceStyle: "automatic",
splash: {
image: "./assets/splash.png",
resizeMode: "contain",
backgroundColor: "#ffffff",
},
ios: {
supportsTablet: true,
bundleIdentifier: "com.example.myapp",
},
android: {
adaptiveIcon: {
foregroundImage: "./assets/adaptive-icon.png",
backgroundColor: "#ffffff",
},
package: "com.example.myapp",
},
plugins: [
"expo-secure-store",
[
"expo-notifications",
{ icon: "./assets/notification-icon.png", color: "#111111" },
],
],
extra: {
apiUrl: process.env.EXPO_PUBLIC_API_URL,
eas: { projectId: "your-project-id" },
},
};
export default config;
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Changing package / bundle ID after store release without a migration plan.
* Secrets in `extra` or public env vars.
* Plugin options ignored until the next native rebuild.
## π Related [#-related]
* [plugins.md](/docs/react-native/expo/plugins) β config plugins
* [build.md](/docs/react-native/expo/build) β applying config in builds
* [filestructure.md](/docs/react-native/expo/filestructure) β where config lives
* [commands.md](/docs/react-native/expo/commands) β `expo config`
---
# Constants (/docs/react-native/expo/constants)
# Constants [#constants]
*Expo Β· Reference cheat sheet*
***
## π Overview [#-overview]
**`expo-constants`** exposes app metadata from the native manifest / config: version, `expoConfig`, installation id (where available), and EAS project fields. Use for feature flags wiring, update URLs, and debuggingβnot for secrets.
## π§ Core concepts [#-core-concepts]
| Field | Role |
| ----------------------------------------- | ---------------------------------- |
| `Constants.expoConfig` | App config (name, slug, extra, β¦) |
| `Constants.easConfig` | EAS ids when present |
| `nativeAppVersion` / `nativeBuildVersion` | Store versions |
| `executionEnvironment` | storeClient / standalone / β¦ |
| `appOwnership` | expo / standalone (legacy nuances) |
`extra` comes from `app.config` β `expo.extra`.
## π‘ Examples [#-examples]
```tsx
import Constants from "expo-constants";
import { Text } from "react-native";
export function BuildStamp() {
const version = Constants.expoConfig?.version ?? "dev";
const projectId =
Constants.expoConfig?.extra?.eas?.projectId ??
Constants.easConfig?.projectId;
return (
v{version} Β· {projectId ?? "no-project"}
);
}
export function apiBaseUrl() {
return (
Constants.expoConfig?.extra?.apiUrl ??
process.env.EXPO_PUBLIC_API_URL ??
""
);
}
```
```ts
// app.config.ts
extra: {
apiUrl: process.env.EXPO_PUBLIC_API_URL,
eas: { projectId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" },
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Putting secrets in `extra` (shipped in the binary).
* Assuming `manifest` legacy fields on new SDKsβprefer `expoConfig`.
* Using Constants for values that change per environment without rebuild/update.
* Null access before config is availableβoptional chain.
## π Related [#-related]
* [config.md](/docs/react-native/expo/config) β app config
* [updates\_ota.md](/docs/react-native/expo/updates-ota) β projectId
* [notifications\_expo.md](/docs/react-native/expo/notifications-expo) β push tokens
* [build.md](/docs/react-native/expo/build) β versioning
* [env](/docs/react-native/expo/config) β EXPO\_PUBLIC\_\*
---
# EAS Submit (/docs/react-native/expo/eas-submit)
# EAS Submit [#eas-submit]
*Expo Β· Reference cheat sheet*
***
## π Overview [#-overview]
**`eas submit`** uploads a build to App Store Connect or Google Play. Pair with `eas build` artifacts (local path or latest build on EAS). Configure credentials once; automate with CI profiles in `eas.json`.
## π§ Core concepts [#-core-concepts]
| Piece | Role |
| ------------------------- | --------------------- |
| `eas submit -p ios` | ASC upload |
| `eas submit -p android` | Play upload |
| `eas.json` submit profile | Track, release status |
| ASC API key / Apple ID | iOS auth |
| Google service account | Play API JSON |
| `--latest` | Use latest EAS build |
Submit β review: you still complete store listing / review in consoles.
## π‘ Examples [#-examples]
```json
// eas.json (excerpt)
{
"cli": { "version": ">= 12.0.0" },
"build": {
"production": { "channel": "production" }
},
"submit": {
"production": {
"ios": {
"ascAppId": "1234567890"
},
"android": {
"serviceAccountKeyPath": "./play-service-account.json",
"track": "internal"
}
}
}
}
```
```shellscript
eas build -p ios --profile production
eas submit -p ios --profile production --latest
eas build -p android --profile production
eas submit -p android --profile production --path ./app-release.aab
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Submitting a build with wrong version/build number.
* Committing Play/ASC private keys to git.
* Using `production` track before internal testing.
* Assuming submit publishes immediatelyβmanual rollout/review may remain.
## π Related [#-related]
* [build.md](/docs/react-native/expo/build) β EAS Build
* [keystore\_sign.md](/docs/react-native/expo/keystore-sign) β Android signing
* [updates\_ota.md](/docs/react-native/expo/updates-ota) β JS updates vs binaries
* [commands.md](/docs/react-native/expo/commands) β CLI
* [config.md](/docs/react-native/expo/config) β version / bundle ids
---
# File structure (/docs/react-native/expo/filestructure)
# File structure [#file-structure]
*Expo Β· Reference cheat sheet*
***
## π Overview [#-overview]
Expo apps are mostly JS/TS under the project root (or `src/`), with config at the top level. Native `ios/` / `android/` appear after **prebuild** or in bare workflows; prefer Continuous Native Generation + plugins over hand-editing when possible.
## π§ Core concepts [#-core-concepts]
* **Entry** β `package.json` `"main"` β `expo-router/entry` or `node_modules/expo/AppEntry.js`.
* **Router** β Expo Router uses `app/` file-based routes.
* **Assets** β `assets/` for icons, splash, fonts.
* **Config** β `app.config.ts`, `eas.json`, `babel.config.js`, `metro.config.js`.
* **Native** β generated `ios/`, `android/` (gitignore in managed CNG setups).
## π‘ Examples [#-examples]
```plaintext
MyApp/
app/ # Expo Router screens
_layout.tsx
index.tsx
settings.tsx
assets/
icon.png
splash.png
src/
components/
lib/
app.config.ts
eas.json
package.json
tsconfig.json
# after prebuild:
ios/
android/
```
```json
// package.json (Router)
{
"main": "expo-router/entry",
"scripts": {
"start": "expo start",
"android": "expo run:android",
"ios": "expo run:ios"
}
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Committing generated native projects while also relying on prebuild β pick a workflow.
* Putting screens outside `app/` when using Expo Router without registering them.
* Huge `assets/` without compression β install size.
## π Related [#-related]
* [config.md](/docs/react-native/expo/config) β app config
* [commands.md](/docs/react-native/expo/commands) β prebuild / start
* [plugins.md](/docs/react-native/expo/plugins) β native customization
* [build.md](/docs/react-native/expo/build) β CI builds
---
# Gradle (/docs/react-native/expo/gradle)
# Gradle [#gradle]
*Expo Β· Reference cheat sheet*
***
## π Overview [#-overview]
Android builds use **Gradle** inside `android/` (after prebuild) or on EAS builders. Expo abstracts most of this; touch Gradle for custom native modules, packaging options, or troubleshooting.
## π§ Core concepts [#-core-concepts]
* **Root** β `android/build.gradle`, `android/settings.gradle`, `gradle.properties`.
* **App module** β `android/app/build.gradle` (`applicationId`, signing, `minSdk`).
* **Expo autolinking** β native modules linked via Expo / RN Gradle plugins.
* **Properties** β `org.gradle.jvmargs`, `hermesEnabled`, architectures.
* **EAS** β cloud images run Gradle; override via `eas.json` env / `expo-build-properties` plugin.
## π‘ Examples [#-examples]
```ts
// app.config.ts β prefer plugin over hand-editing Gradle
plugins: [
[
"expo-build-properties",
{
android: {
minSdkVersion: 24,
compileSdkVersion: 35,
targetSdkVersion: 35,
kotlinVersion: "1.9.24",
},
},
],
],
```
```properties
# android/gradle.properties (generated β customize via plugins when possible)
hermesEnabled=true
newArchEnabled=true
```
```shellscript
cd android && ./gradlew assembleRelease
# or via Expo
npx expo run:android --variant release
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Manual Gradle edits wiped by `expo prebuild --clean` unless reflected in config plugins.
* Mismatched JDK / AGP versions vs Expo SDK expectations.
* Enabling New Architecture without compatible libraries.
## π Related [#-related]
* [build.md](/docs/react-native/expo/build) β EAS Android builds
* [keystore\_sign.md](/docs/react-native/expo/keystore-sign) β signing configs
* [plugins.md](/docs/react-native/expo/plugins) β build-properties plugin
* [commands.md](/docs/react-native/expo/commands) β `expo run:android`
---
# Image Picker (/docs/react-native/expo/image-picker)
# Image Picker [#image-picker]
*Expo Β· Reference cheat sheet*
***
## π Overview [#-overview]
**`expo-image-picker`** launches the system gallery or camera to pick images/videos. Request media permissions, then `launchImageLibraryAsync` / `launchCameraAsync`. Returns local `uri`s for upload or display.
## π§ Core concepts [#-core-concepts]
| API | Role |
| ------------------------------------- | ------------------------------------------------------------------- |
| `requestMediaLibraryPermissionsAsync` | Gallery |
| `requestCameraPermissionsAsync` | Camera |
| `launchImageLibraryAsync` | Pick existing |
| `launchCameraAsync` | Capture |
| Options | `mediaTypes`, `allowsEditing`, `quality`, `allowsMultipleSelection` |
Config plugin for photos permission strings.
## π‘ Examples [#-examples]
```tsx
import * as ImagePicker from "expo-image-picker";
import { useState } from "react";
import { Image, Pressable, Text } from "react-native";
export function AvatarPicker() {
const [uri, setUri] = useState(null);
async function pick() {
const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (!perm.granted) return;
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ["images"],
allowsEditing: true,
aspect: [1, 1],
quality: 0.8,
});
if (!result.canceled) setUri(result.assets[0]?.uri ?? null);
}
return (
<>
Choose photo
{uri ? (
) : null}
);
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Using deprecated `MediaTypeOptions` enums on newer SDKsβprefer `mediaTypes` arrays.
* Ignoring `canceled` results.
* Uploading full-resolution images without compression.
* Missing Info.plist / Android permission messages.
## π Related [#-related]
* [../camera.md](/docs/react-native/camera) β live camera
* [../image.md](/docs/react-native/image) β display
* [../permissions.md](/docs/react-native/permissions) β permission UX
* [config.md](/docs/react-native/expo/config) β plugins
* [secure\_store.md](/docs/react-native/expo/secure-store) β not for images
---
# Keystore & signing (/docs/react-native/expo/keystore-sign)
# Keystore & signing [#keystore--signing]
*Expo Β· Reference cheat sheet*
***
## π Overview [#-overview]
Android release builds must be **signed** with an upload/app signing keystore. EAS can generate and store credentials; Play App Signing uses Googleβs key for distribution while you keep an upload key.
## π§ Core concepts [#-core-concepts]
* **Keystore** β `.jks` / `.keystore` with alias + passwords.
* **EAS-managed** β default for new projects; downloadable via `eas credentials`.
* **Local signing** β `android/app` signingConfigs for local release builds.
* **iOS counterpart** β distribution cert + provisioning profile (also via EAS).
* **Backup** β losing the upload key complicates Play updates (recovery possible with Play App Signing).
## π‘ Examples [#-examples]
```shellscript
# Inspect / manage credentials
npx eas-cli credentials -p android
# Production build (EAS uses stored keystore)
npx eas-cli build -p android --profile production
```
```json
// eas.json β credentialsSource
{
"build": {
"production": {
"android": {
"credentialsSource": "remote"
}
}
}
}
```
```groovy
// Local sketch β prefer EAS; only for bare local releases
android {
signingConfigs {
release {
storeFile file("release.keystore")
storePassword System.getenv("KEYSTORE_PASSWORD")
keyAlias System.getenv("KEY_ALIAS")
keyPassword System.getenv("KEY_PASSWORD")
}
}
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Committing keystores or passwords to git.
* Creating a new keystore for an existing Play listing without updating upload key.
* Mixing debug and release signing when testing IAP / push.
## π Related [#-related]
* [build.md](/docs/react-native/expo/build) β release builds
* [gradle.md](/docs/react-native/expo/gradle) β Android build system
* [commands.md](/docs/react-native/expo/commands) β `eas credentials`
* [config.md](/docs/react-native/expo/config) β package name must stay stable
---
# Linking (Expo) (/docs/react-native/expo/linking-expo)
# Linking (Expo) [#linking-expo]
*Expo Β· Reference cheat sheet*
***
## π Overview [#-overview]
Expo linking builds on RN `Linking` with **`expo-linking`** helpers and Expo Router path integration. Set `scheme` in app config; use universal links / app links for https. Create URLs with `Linking.createURL` for consistent env behavior.
## π§ Core concepts [#-core-concepts]
| Piece | Role |
| --------------- | ------------------------------------ |
| `scheme` | Custom URL scheme in config |
| `createURL` | Build deep link for current env |
| `parse` | Parse path/query |
| Expo Router | File paths map to URLs |
| Universal links | `associatedDomains` / intent filters |
Dev client / Go vs production URLs differβ`createURL` helps.
## π‘ Examples [#-examples]
```tsx
import * as Linking from "expo-linking";
import { useEffect } from "react";
import { router } from "expo-router";
const prefix = Linking.createURL("/");
export function useDeepLinks() {
useEffect(() => {
function handle(url: string) {
const { path, queryParams } = Linking.parse(url);
if (path?.startsWith("post/")) {
router.push(`/post/${queryParams?.id ?? ""}`);
}
}
Linking.getInitialURL().then((url) => url && handle(url));
const sub = Linking.addEventListener("url", ({ url }) => handle(url));
return () => sub.remove();
}, []);
}
export function shareLink(id: string) {
return Linking.createURL(`/post/${id}`);
}
```
```json
{
"expo": {
"scheme": "myapp",
"ios": { "associatedDomains": ["applinks:example.com"] },
"android": {
"intentFilters": [
{
"action": "VIEW",
"autoVerify": true,
"data": [{ "scheme": "https", "host": "example.com", "pathPrefix": "/" }],
"category": ["BROWSABLE", "DEFAULT"]
}
]
}
}
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Hardcoding `myapp://` without `createURL` (breaks in Expo Go).
* Missing AASA / assetlinks verification for https links.
* Not testing cold start (`getInitialURL`).
* Scheme typos between config and marketing links.
## π Related [#-related]
* [router.md](/docs/react-native/expo/router) β Expo Router
* [config.md](/docs/react-native/expo/config) β scheme
* [../linking.md](/docs/react-native/linking) β RN Linking
* [../deeplinking.md](/docs/react-native/deeplinking) β deep links
* [../navigation.md](/docs/react-native/navigation) β navigation linking
---
# Notifications (Expo) (/docs/react-native/expo/notifications-expo)
# Notifications (Expo) [#notifications-expo]
*Expo Β· Reference cheat sheet*
***
## π Overview [#-overview]
**`expo-notifications`** handles local notifications, push permission, device push tokens, and listeners. Push delivery uses Expo push service or raw FCM/APNs. Configure icons/sounds via config plugin; request permissions at a sensible moment.
## π§ Core concepts [#-core-concepts]
| Piece | Role |
| -------------- | ---------------------------------- |
| Permissions | `requestPermissionsAsync` |
| Device token | `getExpoPushTokenAsync` |
| Local schedule | `scheduleNotificationAsync` |
| Listeners | received / response (tap) |
| Channels | Android notification channels |
| Plugin | `expo-notifications` in `app.json` |
Physical device required for remote push.
## π‘ Examples [#-examples]
```tsx
import { useEffect, useRef } from "react";
import * as Notifications from "expo-notifications";
import Constants from "expo-constants";
import { Platform } from "react-native";
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowBanner: true,
shouldShowList: true,
shouldPlaySound: false,
shouldSetBadge: false,
}),
});
export async function registerForPush() {
const { status } = await Notifications.requestPermissionsAsync();
if (status !== "granted") return null;
if (Platform.OS === "android") {
await Notifications.setNotificationChannelAsync("default", {
name: "default",
importance: Notifications.AndroidImportance.DEFAULT,
});
}
const projectId =
Constants.expoConfig?.extra?.eas?.projectId ??
Constants.easConfig?.projectId;
return Notifications.getExpoPushTokenAsync({ projectId });
}
export function useNotificationObserver() {
const responseListener = useRef(null);
useEffect(() => {
responseListener.current =
Notifications.addNotificationResponseReceivedListener((response) => {
console.log(response.notification.request.content.data);
});
return () => responseListener.current?.remove();
}, []);
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Testing push on simulator/emulator without support.
* Missing EAS `projectId` for Expo tokens.
* Not creating Android channels β silent/wrong importance.
* Asking permission on first launch without context.
## π Related [#-related]
* [config.md](/docs/react-native/expo/config) β plugin / projectId
* [../notification.md](/docs/react-native/notification) β general notes
* [../permissions.md](/docs/react-native/permissions) β permission UX
* [linking\_expo.md](/docs/react-native/expo/linking-expo) β open from tap
* [constants.md](/docs/react-native/expo/constants) β project config
---
# Plugins (/docs/react-native/expo/plugins)
# Plugins [#plugins]
*Expo Β· Reference cheat sheet*
***
## π Overview [#-overview]
**Config plugins** are JS functions that modify native projects during **prebuild**. They let managed/CNG apps add permissions, activities, Podfile changes, and Gradle tweaks without maintaining permanent `ios/` / `android/` forks.
## π§ Core concepts [#-core-concepts]
* **Declaration** β `plugins` array in `app.config`.
* **With options** β `["expo-camera", \{ cameraPermission: "..." \}]`.
* **Autolinking** β many `expo-*` packages ship a plugin; still list them when options are required.
* **Custom plugins** β `plugins/withMyNativeChange.js` using `@expo/config-plugins` mods.
* **Apply** β changes take effect on next `prebuild` / EAS Build, not in Expo Go unless the feature is already in the client.
## π‘ Examples [#-examples]
```ts
// app.config.ts
export default {
expo: {
plugins: [
[
"expo-camera",
{
cameraPermission: "Allow MyApp to take photos",
microphonePermission: "Allow MyApp to record audio",
recordAudioAndroid: true,
},
],
"expo-secure-store",
["./plugins/withAndroidQueries", { packages: ["com.android.vending"] }],
],
},
};
```
```js
// plugins/withAndroidQueries.js
const { withAndroidManifest } = require("@expo/config-plugins");
function withAndroidQueries(config, { packages = [] }) {
return withAndroidManifest(config, (cfg) => {
const manifest = cfg.modResults.manifest;
// mutate queries / intents as needed
void packages;
return cfg;
});
}
module.exports = withAndroidQueries;
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Expecting plugin native changes inside Expo Go β need a **dev client** or store build.
* Forgetting to rebuild after adding a plugin.
* Hand-editing `ios/`/`android/` then losing changes on `--clean` prebuild.
## π Related [#-related]
* [config.md](/docs/react-native/expo/config) β where plugins are listed
* [build.md](/docs/react-native/expo/build) β builds apply plugins
* [commands.md](/docs/react-native/expo/commands) β prebuild
* [gradle.md](/docs/react-native/expo/gradle) β Android mods
---
# Router (/docs/react-native/expo/router)
# Router [#router]
*Expo Β· Reference cheat sheet*
***
## π Overview [#-overview]
**Expo Router** is a file-based router built on React Navigation. Files under `app/` become routes; layouts wrap segments; deep links match paths. Use typed routes and `Link` / `router` for navigation.
## π§ Core concepts [#-core-concepts]
| Piece | Role |
| ---------------------- | ------------------------------ |
| `app/_layout.tsx` | Root layout |
| `app/index.tsx` | `/` |
| `app/[id].tsx` | Dynamic segment |
| `(groups)` | Organizational, no URL segment |
| `Link` / `router.push` | Navigation |
| `Stack` / `Tabs` | Navigators in layouts |
| `+not-found` | 404 |
Enable plugin `"expo-router"` in app config; entry via `expo-router/entry`.
## π‘ Examples [#-examples]
```tsx
// app/_layout.tsx
import { Stack } from "expo-router";
export default function Layout() {
return (
);
}
```
```tsx
// app/index.tsx
import { Link } from "expo-router";
import { Text, View } from "react-native";
export default function Home() {
return (
Open post
);
}
```
```tsx
// app/post/[id].tsx
import { useLocalSearchParams, router } from "expo-router";
import { Pressable, Text } from "react-native";
export default function Post() {
const { id } = useLocalSearchParams<{ id: string }>();
return (
<>
Post {id}
router.back()}>
Back
);
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Mixing React Navigation containers manually with Expo Router.
* Wrong folder names β unexpected URLs.
* Forgetting `scheme` in config for deep links.
* Heavy work in root layout blocking all screens.
## π Related [#-related]
* [config.md](/docs/react-native/expo/config) β scheme / plugins
* [linking\_expo.md](/docs/react-native/expo/linking-expo) β deep links
* [filestructure.md](/docs/react-native/expo/filestructure) β app dir
* [../navigation.md](/docs/react-native/navigation) β React Navigation concepts
* [../deeplinking.md](/docs/react-native/deeplinking) β native linking
---
# Secure Store (/docs/react-native/expo/secure-store)
# Secure Store [#secure-store]
*Expo Β· Reference cheat sheet*
***
## π Overview [#-overview]
**`expo-secure-store`** stores small secrets in iOS Keychain / Android Keystore. Use for tokens and keysβnot large blobs. AsyncStorage is not secure. Configure the config plugin when required by your SDK version.
## π§ Core concepts [#-core-concepts]
| API | Role |
| -------------------------- | --------------------------------------------- |
| `setItemAsync(key, value)` | Save |
| `getItemAsync(key)` | Read |
| `deleteItemAsync(key)` | Remove |
| Options | `keychainAccessible`, biometrics auth options |
Size limits apply; errors on unavailable hardware/secure lock screen policies.
## π‘ Examples [#-examples]
```tsx
import * as SecureStore from "expo-secure-store";
const TOKEN_KEY = "session_token";
export async function saveToken(token: string) {
await SecureStore.setItemAsync(TOKEN_KEY, token);
}
export async function loadToken() {
return SecureStore.getItemAsync(TOKEN_KEY);
}
export async function clearToken() {
await SecureStore.deleteItemAsync(TOKEN_KEY);
}
```
**With auth prompt (when supported):**
```tsx
await SecureStore.setItemAsync("pin", value, {
requireAuthentication: true,
authenticationPrompt: "Unlock secrets",
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Storing JWTs in AsyncStorage instead.
* Large JSON documentsβuse file encryption or server.
* Assuming values survive app uninstall (platform-specific).
* Missing error handling when device is locked / biometrics fail.
## π Related [#-related]
* [../biometrics.md](/docs/react-native/biometrics) β local auth
* [../storage.md](/docs/react-native/storage) β insecure storage
* [config.md](/docs/react-native/expo/config) β plugins
* [../appstate.md](/docs/react-native/appstate) β lock on background
* [plugins.md](/docs/react-native/expo/plugins) β native config
---
# Updates (OTA) (/docs/react-native/expo/updates-ota)
# Updates (OTA) [#updates-ota]
*Expo Β· Reference cheat sheet*
***
## π Overview [#-overview]
**EAS Update** delivers JavaScript/asset over-the-air updates without a full store releaseβwhen native code is unchanged. Configure `expo-updates`, publish with `eas update`, and channel/branch to builds. Native module changes still need a new binary.
## π§ Core concepts [#-core-concepts]
| Piece | Role |
| --------------- | ----------------------------------- |
| Runtime version | Compatibility gate with binaries |
| Channel | Maps builds β update stream |
| Branch | Git-like update stream |
| `expo-updates` | Fetch/apply JS bundles |
| Rollback | Republish previous / serve rollback |
Policies: check on launch, reload when appropriate.
## π‘ Examples [#-examples]
```json
// app.json (excerpt)
{
"expo": {
"runtimeVersion": { "policy": "appVersion" },
"updates": {
"url": "https://u.expo.dev/"
},
"extra": {
"eas": { "projectId": "" }
}
}
}
```
```shellscript
eas update --branch production --message "Fix checkout copy"
eas update:list --branch production
```
```tsx
import * as Updates from "expo-updates";
import { useEffect } from "react";
export function useApplyUpdate() {
useEffect(() => {
(async () => {
if (__DEV__) return;
const result = await Updates.checkForUpdateAsync();
if (result.isAvailable) {
await Updates.fetchUpdateAsync();
await Updates.reloadAsync();
}
})();
}, []);
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Shipping native changes via OTAβwon't load; binary required.
* Mismatched `runtimeVersion` β updates ignored.
* Forcing reload mid-checkout without UX.
* Testing only in dev (Updates disabled in `__DEV__`).
## π Related [#-related]
* [build.md](/docs/react-native/expo/build) β binaries
* [config.md](/docs/react-native/expo/config) β updates URL
* [eas\_submit.md](/docs/react-native/expo/eas-submit) β store submit
* [commands.md](/docs/react-native/expo/commands) β EAS CLI
* [plugins.md](/docs/react-native/expo/plugins) β native config
---
# FlatList (/docs/react-native/flatlist)
# FlatList [#flatlist]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`FlatList` efficiently renders long scrolling lists by virtualizing off-screen rows. Provide `data`, `renderItem`, and a stable `keyExtractor`. For sectioned data use `SectionList`; for very large lists consider FlashList.
## π§ Core concepts [#-core-concepts]
| Prop | Role |
| ----------------------------------- | ---------------------------- |
| `data` | Array of items |
| `renderItem` | Row renderer |
| `keyExtractor` | Stable keys |
| `ItemSeparatorComponent` | Dividers |
| `ListHeaderComponent` / `Footer` | Chrome |
| `onEndReached` | Infinite scroll |
| `refreshing` / `onRefresh` | Pull to refresh |
| `getItemLayout` | Skip measure if fixed height |
| `windowSize` / `initialNumToRender` | Tuning |
Avoid anonymous inline components that remount every parent renderβextract `Row`.
## π‘ Examples [#-examples]
```tsx
import { FlatList, Text, View, StyleSheet } from "react-native";
type Item = { id: string; title: string };
export function Feed({ items }: { items: Item[] }) {
return (
item.id}
renderItem={({ item }) => (
{item.title}
)}
ItemSeparatorComponent={() => }
onEndReachedThreshold={0.4}
onEndReached={() => {
/* load more */
}}
/>
);
}
const styles = StyleSheet.create({
row: { padding: 16 },
sep: { height: 1, backgroundColor: "#eee" },
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Using `ScrollView` + `.map` for huge lists.
* Inline `renderItem=\{() => ...\}` creating new types + unstable handlers without care.
* Missing keys / using index when reordering.
* Nesting VirtualizedLists (FlatList inside ScrollView) without care.
* Heavy rowsβmemoize row components.
## π Related [#-related]
* [sectionlist.md](/docs/react-native/sectionlist) β sections
* [scrollview.md](/docs/react-native/scrollview) β non-virtualized
* [refresh\_control.md](/docs/react-native/refresh-control) β pull to refresh
* [performance](/docs/react-native/../react/performance) β list perf
* [keys\_lists](/docs/react-native/../react/keys-lists) β identity
---
# Gesture (/docs/react-native/gesture)
# Gesture [#gesture]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Handle touches beyond simple presses with **React Native Gesture Handler** + **Reanimated**. Prefer RNGH over the old PanResponder for modern apps.
## π§ Core concepts [#-core-concepts]
* **`GestureDetector` + `Gesture`** β tap, pan, pinch, long press, race/simultaneous.
* **Root** β wrap app in `GestureHandlerRootView`.
* **Pressable / Touchable** β from `react-native-gesture-handler` inside navigators.
* **Native driver / UI thread** β update shared values in gesture callbacks.
## π‘ Examples [#-examples]
```tsx
import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
import Animated, { useSharedValue, useAnimatedStyle } from "react-native-reanimated";
export function Draggable() {
const x = useSharedValue(0);
const y = useSharedValue(0);
const pan = Gesture.Pan().onChange((e) => {
x.value += e.changeX;
y.value += e.changeY;
});
const style = useAnimatedStyle(() => ({
transform: [{ translateX: x.value }, { translateY: y.value }],
}));
return (
);
}
export function App() {
return (
);
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Missing `GestureHandlerRootView` β gestures silently fail.
* Mixing RN `Touchable*` inside RNGH navigators without RNGH replacements.
* Gesture fights with `ScrollView` β use `simultaneousWithExternalGesture` / `native` gesture carefully.
## π Related [#-related]
* [touchable.md](/docs/react-native/touchable) β simple presses
* [animation.md](/docs/react-native/animation) β animated values
* [drawer.md](/docs/react-native/drawer) β drawer swipes
* [transition.md](/docs/react-native/transition) β interactive transitions
---
# Getting Started with React Native (/docs/react-native/getting-started)
# Getting Started with React Native [#getting-started-with-react-native]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
React Native (RN) lets you build mobile apps with React. Instead of HTML tags (`div`, `p`), you use native components (`View`, `Text`). One codebase can target iOS and Android (and web via React Native for Web).
## π§ Core concepts [#-core-concepts]
| Idea | Meaning |
| ----------------- | ---------------------------------------------------------------------- |
| Native components | `View`, `Text`, `Image`, `Pressable`, β¦ |
| StyleSheet | JS objects for styling (Flexbox by default) |
| Metro / Expo | Bundlers & tooling for RN apps |
| Expo | Beginner-friendly way to start without Xcode/Android Studio on day one |
| Platform APIs | Camera, haptics, linking, etc. via modules |
**Recommended start:** Expo (`npx create-expo-app`).
## π‘ Examples [#-examples]
**Create an Expo app:**
```shellscript
npx create-expo-app@latest MyApp
cd MyApp
npx expo start
```
**Core imports:**
```jsx
import { View, Text, StyleSheet } from "react-native";
export default function App() {
return (
Hello, React Native
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
title: { fontSize: 22 },
});
```
**Platform check:**
```jsx
import { Platform, Text } from "react-native";
Running on {Platform.OS};
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* There is no DOM β `document` / `div` / CSS files donβt apply the same way.
* All text must be inside `` β raw strings in `` error.
* Flexbox defaults differ slightly from web (`flexDirection: "column"` by default).
* Testing on a real device needs the Expo Go app or a dev build.
## π Related [#-related]
* [hello\_world.md](/docs/react-native/hello-world)
* [reactnativeforweb.md](/docs/react-native/reactnativeforweb)
* [styling.md](/docs/react-native/styling)
* [pressable.md](/docs/react-native/pressable)
---
# Glossary (/docs/react-native/glossary)
# Glossary [#glossary]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Alphabetical glossary of core React Native terms for components, navigation, native modules, and mobile UI patterns.
## π§ Core concepts [#-core-concepts]
| Term | Definition |
| ----------------- | ------------------------------------------------------------------------------- |
| ActivityIndicator | A built-in spinner component for indeterminate loading states. |
| AppRegistry | The JS entry that registers the root component with the native runtime. |
| AppState | An API reporting whether the app is active, background, or inactive. |
| Bridge | The legacy message channel between JavaScript and native modules. |
| Dimensions | An API that reads window or screen width and height. |
| Expo | A toolchain and SDK that simplifies React Native development and builds. |
| FlatList | A performant scrolling list that virtualizes large data sets. |
| Flexbox | The default layout system used by React Native styles. |
| Gesture | Touch interaction handling, often via Gesture Handler or Pressable. |
| Hermes | A JavaScript engine optimized for React Native startup and memory. |
| Linking | An API for opening URLs and handling deep links into the app. |
| Metro | The JavaScript bundler commonly used by React Native projects. |
| Modal | A component that presents content above the current screen. |
| Native module | Platform code (Swift/Kotlin/etc.) exposed to JavaScript. |
| Navigation | Moving between screens, typically via React Navigation stacks/tabs. |
| New Architecture | Fabric renderer and TurboModules replacing the legacy bridge path. |
| Platform | Helpers to branch behavior for iOS, Android, or web. |
| Pressable | A core component for detecting presses with fine-grained feedback. |
| SafeAreaView | A view that insets content away from notches and system UI. |
| ScrollView | A scrollable container for content that fits reasonably in memory. |
| SectionList | A virtualized list organized into titled sections. |
| StatusBar | Control over the system status bar style and visibility. |
| StyleSheet | An API that creates optimized style objects for components. |
| TextInput | A core editable text field component. |
| Touchable | Legacy press wrappers (`TouchableOpacity`, etc.) largely replaced by Pressable. |
| View | The fundamental container component, analogous to a `div` on web. |
| Yoga | The cross-platform layout engine implementing Flexbox for native views. |
## π‘ Examples [#-examples]
**View, Text, and StyleSheet:**
```tsx
import { StyleSheet, Text, View } from "react-native";
const styles = StyleSheet.create({
box: { padding: 16, flex: 1 },
title: { fontSize: 18, fontWeight: "600" },
});
export function Card() {
return (
Hello
);
}
```
**FlatList:**
```tsx
item.id}
renderItem={({ item }) => {item.name}}
/>
```
**AppState:**
```tsx
useEffect(() => {
const sub = AppState.addEventListener("change", (next) => {
console.log(next);
});
return () => sub.remove();
}, []);
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Confusing **ScrollView** (simple, all-in-memory) with **FlatList** (virtualized).
* Mixing web **CSS** assumptions with React Native **StyleSheet** β many properties differ.
* Treating **Touchable**\* and **Pressable** as identical β Pressable is the modern API.
* Assuming **Linking** alone equals full **navigation** β deep links still need a navigator.
* Equating **Expo** managed workflow with bare React Native β tooling and native access differ.
## π Related [#-related]
* [basic\_primitives](/docs/react-native/basic-primitives)
* [flatlist](/docs/react-native/flatlist)
* [navigation](/docs/react-native/navigation)
* [styling](/docs/react-native/styling)
* [appstate](/docs/react-native/appstate)
* [safe\_area](/docs/react-native/safe-area)
---
# Haptics (/docs/react-native/haptics)
# Haptics [#haptics]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Haptics provide nuanced tactile feedback (impact, notification, selection). In Expo use `expo-haptics`; in bare RN use platform modules or community packages. Prefer haptics over crude `Vibration` for UI polishβespecially iOS.
## π§ Core concepts [#-core-concepts]
| Type | When |
| ------------ | ------------------------- |
| Impact | Light/medium/heavy taps |
| Notification | Success / warning / error |
| Selection | Picker ticks, toggles |
Always no-op gracefully on unsupported hardware/simulators.
## π‘ Examples [#-examples]
```tsx
import * as Haptics from "expo-haptics";
import { Pressable, Text } from "react-native";
export function LikeButton({ onLike }: { onLike: () => void }) {
return (
{
await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
onLike();
}}
>
Like
);
}
export async function notifySuccess() {
await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
}
export async function tick() {
await Haptics.selectionAsync();
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Firing haptics on every scroll eventβtoo noisy.
* Ignoring βReduce Motionβ / haptic disable preferences when available.
* Blocking UI on awaited haptics unnecessarilyβfire-and-forget is fine.
* Assuming Android parity with iOS Taptic Engine.
## π Related [#-related]
* [vibration.md](/docs/react-native/vibration) β basic vibrate
* [pressable.md](/docs/react-native/pressable) β buttons
* [picker.md](/docs/react-native/picker) β selection ticks
* [gesture.md](/docs/react-native/gesture) β gesture feedback
* [touchable.md](/docs/react-native/touchable) β press handling
---
# Hello World (/docs/react-native/hello-world)
# Hello World [#hello-world]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
React Native Hello World shows text on a screen using `View` + `Text`. With Expo, you scan a QR code (Expo Go) or use an emulator to see the result live.
## π§ Core concepts [#-core-concepts]
| Piece | Role |
| ------------------- | --------------------------------- |
| `App` / screen | Root component Expo loads |
| `View` | Container (like a non-text `div`) |
| `Text` | Renders strings |
| `StyleSheet.create` | Defines reusable styles |
| Fast Refresh | Saves reload UI as you edit |
Keep the first screen tiny so tooling issues are obvious.
## π‘ Examples [#-examples]
**Minimal screen:**
```jsx
import { View, Text, StyleSheet } from "react-native";
export default function App() {
return (
Hello, World!
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
});
```
**Styled greeting:**
```jsx
import { View, Text, StyleSheet } from "react-native";
export default function App() {
const name = "Ada";
return (
Hello, {name}!
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: "center", alignItems: "center" },
hello: { fontSize: 24, fontWeight: "600" },
});
```
**Pressable interaction:**
```jsx
import { useState } from "react";
import { Pressable, Text, View } from "react-native";
export default function App() {
const [n, setN] = useState(0);
return (
setN(n + 1)}>
Hello taps: {n}
);
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Putting text directly in `View` without `Text` throws.
* Web CSS class names donβt apply β use style objects.
* Safe area / notches: later use `SafeAreaView` or safe-area libraries.
* If the bundle fails, read the Metro/Expo terminal error first.
## π Related [#-related]
* [getting\_started.md](/docs/react-native/getting-started)
* [reactnativeforweb.md](/docs/react-native/reactnativeforweb)
* [styling.md](/docs/react-native/styling)
* [pressable.md](/docs/react-native/pressable)
---
# Image (/docs/react-native/image)
# Image [#image]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`Image` displays local `require` assets or remote `\{ uri \}` sources. Set dimensions (or use `style` width/height); remote images need explicit size. Prefer `expo-image` for caching, blurhash, and better performance in Expo apps.
## π§ Core concepts [#-core-concepts]
| Topic | Notes |
| ------------- | --------------------------------------------- |
| Local | `source=\{require("./pic.png")\}` |
| Remote | `source=\{\{ uri, headers? \}\}` |
| Resize | `resizeMode`: cover, contain, stretch, center |
| Events | `onLoad`, `onError` |
| Prefetch | `Image.prefetch(url)` |
| Accessibility | `accessibilityLabel` for meaningful images |
Network security: HTTPS; ATS / cleartext rules on iOS/Android.
## π‘ Examples [#-examples]
```tsx
import { Image, StyleSheet, View } from "react-native";
export function Avatar({ url }: { url: string }) {
return (
{
/* fallback */
}}
/>
);
}
export function Logo() {
return (
);
}
const styles = StyleSheet.create({
avatar: { width: 64, height: 64, borderRadius: 32 },
logo: { width: 120, height: 40 },
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Remote images without width/height β layout 0.
* Huge unoptimized assets in the bundle.
* Missing cache strategy for lists of remote images.
* Decorative images announced to VoiceOverβset `accessible=\{false\}` when appropriate.
## π Related [#-related]
* [styling.md](/docs/react-native/styling) β layout
* [Expo image\_picker](/docs/react-native/expo/image-picker) β picking
* [networking.md](/docs/react-native/networking) β remote assets
* [basic\_primitives.md](/docs/react-native/basic-primitives) β View/Text
* [permissions.md](/docs/react-native/permissions) β media library
---
# Keyboard (/docs/react-native/keyboard)
# Keyboard [#keyboard]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Manage soft keyboard visibility, dismissals, and layout shifts with `Keyboard`, `KeyboardAvoidingView`, and community libs like `keyboard-controller` / `react-native-keyboard-aware-scroll-view`.
## π§ Core concepts [#-core-concepts]
* **`Keyboard.dismiss()`** β hide keyboard.
* **Events** β `keyboardDidShow` / `keyboardDidHide` (platform naming differs for Will/Did).
* **`KeyboardAvoidingView`** β `behavior="padding"` (iOS) / often `"height"` or none on Android.
* **`keyboardShouldPersistTaps`** β on scroll views so taps register while keyboard is open.
## π‘ Examples [#-examples]
```tsx
import {
Keyboard,
KeyboardAvoidingView,
Platform,
Pressable,
TextInput,
StyleSheet,
} from "react-native";
export function ChatInput() {
return (
);
}
const styles = StyleSheet.create({
flex: { flex: 1 },
input: { borderWidth: 1, margin: 16, padding: 12, borderRadius: 8 },
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Double-avoiding (AvoidingView + manual padding) β huge gaps.
* Android `windowSoftInputMode` in manifest conflicting with JS avoidance.
* Forgetting `keyboardShouldPersistTaps="handled"` on forms in ScrollViews.
## π Related [#-related]
* [layout.md](/docs/react-native/layout) β flex + offsets
* [basic\_primitives.md](/docs/react-native/basic-primitives) β TextInput
* [modal.md](/docs/react-native/modal) β keyboard inside modals
* [platform\_specific.md](/docs/react-native/platform-specific) β iOS vs Android
---
# React Native Launcher Shortcuts (/docs/react-native/launcher-shortcut-menu)
# React Native Launcher Shortcuts [#react-native-launcher-shortcuts]
*React Native Β· Quick Reference*
***
## π Overview [#-overview]
Android App Shortcuts allow users to long-press your app icon to access quick actions directly from the launcher. Supported on Android 7.1+ (API 25+).
***
## π§ Core Concepts [#-core-concepts]
| Shortcut Type | Description |
| ------------- | ---------------------------------------------------------------------- |
| **Static** | Defined in `AndroidManifest.xml`, fixed at build time |
| **Dynamic** | Added/removed at runtime via JavaScript |
| **Pinned** | User manually pins to home screen (cannot be removed programmatically) |
***
## π Libraries [#-libraries]
### Recommended: `@rn-org/react-native-shortcuts` [#recommended-rn-orgreact-native-shortcuts]
```shellscript
npm install @rn-org/react-native-shortcuts
# or
yarn add @rn-org/react-native-shortcuts
```
### Alternative: `@mobigaurav/react-native-quick-actions` [#alternative-mobigauravreact-native-quick-actions]
```shellscript
npm install @mobigaurav/react-native-quick-actions
```
***
## π‘ Basic Implementation [#-basic-implementation]
### Check Support & Add Shortcuts [#check-support--add-shortcuts]
```tsx
import Shortcuts from '@rn-org/react-native-shortcuts'
// Check if supported (Android 7.1+)
const supported = await Shortcuts.isShortcutSupported()
// Add shortcuts
await Shortcuts.addShortcut({
id: 'compose',
title: 'Compose',
longLabel: 'Start new message', // Max 25 chars
iconName: 'ic_compose' // Drawable resource name
})
await Shortcuts.addShortcut({
id: 'search',
title: 'Search',
iconName: 'ic_search'
})
// Remove all shortcuts
await Shortcuts.removeAllShortcuts()
// Remove specific shortcut
await Shortcuts.removeShortcut('compose')
```
### Handle Shortcut Navigation [#handle-shortcut-navigation]
```tsx
import { useEffect, useRef } from 'react'
import Shortcuts from '@rn-org/react-native-shortcuts'
function App() {
// Handle initial launch via shortcut (cold start)
useEffect(() => {
const checkInitial = async () => {
const id = await Shortcuts.getInitialShortcutId()
if (id) navigateToShortcut(id)
}
checkInitial()
}, [])
// Handle shortcut when app is in background (warm start)
useEffect(() => {
const sub = Shortcuts.addOnShortcutUsedListener((id) => {
navigateToShortcut(id)
})
return () => sub.remove()
}, [])
const navigateToShortcut = (id: string) => {
switch(id) {
case 'compose': navigation.navigate('Compose'); break
case 'search': navigation.navigate('Search'); break
}
}
return
}
```
***
## π¨ Android Icons [#-android-icons]
Add icons to `android/app/src/main/res/drawable/`:
```
android/app/src/main/res/drawable/
βββ ic_compose.xml # Vector drawable
βββ ic_search.png # PNG image
βββ ic_settings.xml
```
**Requirements:**
* Material Design guidelines
* Vector (XML) preferred over raster (PNG)
* 48dp x 48dp recommended
***
## π Android Manifest Setup [#-android-manifest-setup]
For **static** shortcuts (optional - pre-defined at build time):
```xml
```
```xml
```
***
## β οΈ Pitfalls [#οΈ-pitfalls]
| Issue | Solution |
| ------------------------------------------------------- | ------------------------------------------------------ |
| **Pinned shortcuts** cannot be removed programmatically | User must unpin manually |
| **4 shortcut limit** (dynamic + static) | Prioritize most used actions |
| **Launch mode issues** | Check `android:launchMode` in manifest |
| **Icon not showing** | Verify drawable resource exists and is correctly named |
***
## π Related [#-related]
* [deep\_linking.md](/docs/react-native/deep-linking) β Navigation from shortcuts
* [notifications.md](/docs/react-native/notifications) β Push notifications
* [keyboard.md](/docs/react-native/keyboard) β Keyboard handling
***
## π Documentation [#-documentation]
* [Android App Shortcuts](https://developer.android.com/develop/ui/views/launch/shortcuts)
* [react-native-shortcuts](https://github.com/rn-org/react-native-shortcuts)
* [react-native-quick-actions](https://github.com/mobigaurav/react-native-quick-actions)
---
# Layout (/docs/react-native/layout)
# Layout [#layout]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Layout uses **Flexbox** (default `flexDirection: "column"`). Yoga implements flex on both platforms. Position with `flex`, alignment, margins/padding β not CSS Grid.
## π§ Core concepts [#-core-concepts]
* **Defaults** β column direction; `alignItems: stretch`.
* **Key props** β `flex`, `justifyContent`, `alignItems`, `alignSelf`, `gap` (newer RN).
* **Sizing** β numbers are density-independent pixels; `%` relative to parent.
* **Absolute** β `position: "absolute"` + `top`/`left`/`right`/`bottom`.
* **Safe area** β insets for notches / home indicator.
## π‘ Examples [#-examples]
```tsx
import { View, StyleSheet } from "react-native";
const styles = StyleSheet.create({
screen: { flex: 1, padding: 16 },
row: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
card: { flex: 1, minHeight: 120, borderRadius: 12, backgroundColor: "#eee" },
fab: {
position: "absolute",
right: 16,
bottom: 16,
width: 56,
height: 56,
borderRadius: 28,
},
});
export function Screen() {
return (
);
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Web CSS habits (`display: block`, grid) donβt apply.
* Missing `flex: 1` on parents β children with flex donβt expand.
* Fixed widths that overflow small phones β prefer flex + `minWidth`/`maxWidth`.
## π Related [#-related]
* [basic\_primitives.md](/docs/react-native/basic-primitives) β View / Text
* [dimensions.md](/docs/react-native/dimensions) β window size
* [statusbar.md](/docs/react-native/statusbar) β top inset
* [animation.md](/docs/react-native/animation) β layout animations
---
# Linking (/docs/react-native/linking)
# Linking [#linking]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`Linking` opens URLs (https, tel, mailto, custom schemes) and listens for deep links that open the app. Configure schemes in native projects / `app.json`. For navigation integration, use React Navigation linking config or Expo Router.
## π§ Core concepts [#-core-concepts]
| API | Role |
| ------------------------- | ------------------------------ |
| `openURL` | Open external / custom URL |
| `canOpenURL` | Check handler (iOS LS queries) |
| `getInitialURL` | Cold-start link |
| `addEventListener('url')` | Warm links |
| `openSettings` | App settings |
Universal Links / App Links need domain association files.
## π‘ Examples [#-examples]
```tsx
import { Linking, Pressable, Text, Alert } from "react-native";
async function openSupport() {
const url = "mailto:support@example.com?subject=Help";
const ok = await Linking.canOpenURL(url);
if (!ok) {
Alert.alert("No mail app available");
return;
}
await Linking.openURL(url);
}
export function SupportLink() {
return (
Email support
);
}
```
**Listen for URLs:**
```tsx
import { useEffect } from "react";
import { Linking } from "react-native";
useEffect(() => {
Linking.getInitialURL().then((url) => {
if (url) handleUrl(url);
});
const sub = Linking.addEventListener("url", ({ url }) => handleUrl(url));
return () => sub.remove();
}, []);
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* iOS `canOpenURL` requires declared schemes in `LSApplicationQueriesSchemes`.
* Not handling both cold and warm start.
* Custom scheme collisions with other apps.
* Using Linking alone without mapping to navigation routes.
## π Related [#-related]
* [deeplinking.md](/docs/react-native/deeplinking) β deep link setup
* [navigation.md](/docs/react-native/navigation) β route mapping
* [Expo linking\_expo](/docs/react-native/expo/linking-expo) β Expo helpers
* [permissions.md](/docs/react-native/permissions) β settings
* [pressable.md](/docs/react-native/pressable) β buttons
---
# Maps (/docs/react-native/maps)
# Maps [#maps]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Maps are typically **`react-native-maps`** (Google/Apple MapKit) or Expo-friendly wrappers. Show a region, markers, and user location (with permissions). API keys required for Google Maps on Android (and iOS if using Google).
## π§ Core concepts [#-core-concepts]
| Piece | Role |
| --------------------- | ---------------------------------- |
| `MapView` | Map canvas |
| `Marker` / `Polyline` | Annotations |
| `region` / `camera` | Viewport |
| `showsUserLocation` | Blue dot (permission) |
| Provider | `PROVIDER_GOOGLE` vs default Apple |
Cluster markers for dense data; avoid re-creating marker arrays carelessly.
## π‘ Examples [#-examples]
```tsx
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";
import { StyleSheet } from "react-native";
export function StoreMap() {
return (
);
}
const styles = StyleSheet.create({
map: { flex: 1 },
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Missing Google Maps API key / billing β blank map.
* Tracking user location without purpose string / runtime permission.
* Animating region on every render.
* Huge numbers of markers without clustering.
## π Related [#-related]
* [permissions.md](/docs/react-native/permissions) β location
* [linking.md](/docs/react-native/linking) β open in Maps app
* [Expo config](/docs/react-native/expo/config) β keys / plugins
* [styling.md](/docs/react-native/styling) β layout
* [networking.md](/docs/react-native/networking) β geocoding APIs
---
# Modal (/docs/react-native/modal)
# Modal [#modal]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`Modal` presents content above the current screen (native modal host). For navigation-style modals, prefer a stack with `presentation: "modal"`.
## π§ Core concepts [#-core-concepts]
* **Props** β `visible`, `transparent`, `animationType` (`none` | `slide` | `fade`).
* **`onRequestClose`** β required on Android (back button).
* **Nesting** β avoid deep modal stacks; use navigation instead.
* **Accessibility** β focus trap / labels for dismiss controls.
## π‘ Examples [#-examples]
```tsx
import { Modal, View, Text, Pressable, StyleSheet } from "react-native";
export function ConfirmModal({
open,
onClose,
message,
}: {
open: boolean;
onClose: () => void;
message: string;
}) {
return (
{message}
Close
);
}
const styles = StyleSheet.create({
backdrop: {
flex: 1,
backgroundColor: "rgba(0,0,0,0.5)",
justifyContent: "center",
padding: 24,
},
sheet: { backgroundColor: "#fff", borderRadius: 12, padding: 16 },
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Missing `onRequestClose` on Android.
* Putting a Modal inside a view with `opacity` / transforms β weird clipping.
* Using Modal for every route β navigators scale better.
## π Related [#-related]
* [backhandler.md](/docs/react-native/backhandler) β Android back
* [keyboard.md](/docs/react-native/keyboard) β inputs in modals
* [transition.md](/docs/react-native/transition) β presentation motion
* [touchable.md](/docs/react-native/touchable) β dismiss controls
---
# Navigation (/docs/react-native/navigation)
# Navigation [#navigation]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
**React Navigation** is the standard stack for RN screens: native stack, bottom tabs, drawer. Define a navigator tree, pass params with types, and use hooks (`useNavigation`, `useRoute`). Expo Router is file-based on top of the same primitivesβsee Expo `router.md`.
## π§ Core concepts [#-core-concepts]
| Piece | Role |
| --------------------- | -------------------------------------- |
| `NavigationContainer` | Root (bare RN; Expo Router wraps this) |
| Native Stack | Push/pop screens |
| Tabs / Drawer | Top-level IA |
| Params | Typed route params |
| Linking | Deep links β routes |
| Nested navigators | Independent histories |
Prefer `@react-navigation/native-stack` over JS stack for performance.
## π‘ Examples [#-examples]
```tsx
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
type RootStackParamList = {
Home: undefined;
Details: { id: string };
};
const Stack = createNativeStackNavigator();
export function App() {
return (
);
}
```
```tsx
import { useNavigation, useRoute } from "@react-navigation/native";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
import type { RouteProp } from "@react-navigation/native";
function HomeScreen() {
const navigation =
useNavigation>();
return (
navigation.navigate("Details", { id: "1" })}>
Open
);
}
function DetailsScreen() {
const route = useRoute>();
return {route.params.id};
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Multiple `NavigationContainer`s without a clear root.
* Untyped params β runtime surprises.
* Heavy work in screen components that stay mounted in tabs.
* Ignoring deep linking / back behavior on Android.
## π Related [#-related]
* [touchable.md](/docs/react-native/touchable) β Pressable
* [deeplinking.md](/docs/react-native/deeplinking) β URL schemes
* [drawer.md](/docs/react-native/drawer) β drawer patterns
* [backhandler.md](/docs/react-native/backhandler) β Android back
* [Expo router](/docs/react-native/expo/router) β file-based routing
---
# Networking (/docs/react-native/networking)
# Networking [#networking]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
RN supports `fetch`, `XMLHttpRequest`, and WebSockets. Use HTTPS, handle offline, and prefer a thin API client (fetch wrapper, axios, ky, React Query).
## π§ Core concepts [#-core-concepts]
* **`fetch(url, init)`** β Promise-based; no timeout built-in.
* **JSON** β `res.json()`; set `Content-Type` on requests.
* **Auth** β attach tokens in headers; store securely (SecureStore / Keychain).
* **Dev** β Android cleartext / ATS exceptions only for local debug.
* **Abort** β `AbortController` to cancel on unmount.
## π‘ Examples [#-examples]
```tsx
async function getUser(id: string, signal?: AbortSignal) {
const res = await fetch(`https://api.example.com/users/${id}`, {
headers: { Accept: "application/json" },
signal,
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json() as Promise<{ id: string; name: string }>;
}
```
```tsx
import { useEffect, useState } from "react";
export function useUser(id: string) {
const [data, setData] = useState<{ name: string } | null>(null);
useEffect(() => {
const ctrl = new AbortController();
getUser(id, ctrl.signal).then(setData).catch(() => {});
return () => ctrl.abort();
}, [id]);
return data;
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* No network permission issues on iOS/Android for plain HTTPS β but ATS / cleartext can block HTTP.
* Ignoring non-2xx status β `fetch` only rejects on network failure.
* Leaking tokens in logs.
## π Related [#-related]
* [request.md](/docs/react-native/request) β request helpers
* [storage.md](/docs/react-native/storage) β token storage
* [permissions.md](/docs/react-native/permissions) β related OS permissions
* [notification.md](/docs/react-native/notification) β push payloads
---
# Notification (/docs/react-native/notification)
# Notification [#notification]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Local and push notifications need OS permission, device tokens, and a service (FCM / APNs). In Expo, use **`expo-notifications`** + EAS credentials; in bare RN, `@react-native-firebase/messaging` or Notifee are common.
## π§ Core concepts [#-core-concepts]
* **Permission** β request before scheduling / registering.
* **Channels (Android)** β create notification channels for importance.
* **Handlers** β foreground presentation; response (tap) β navigate / deep link.
* **Push tokens** β Expo push token or native FCM/APNs token β your backend.
* **EAS** β credentials for FCM / APNs managed via `eas credentials`.
## π‘ Examples [#-examples]
```tsx
import * as Notifications from "expo-notifications";
import { useEffect } from "react";
import { Platform } from "react-native";
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: false,
shouldSetBadge: false,
}),
});
export function useNotificationSetup() {
useEffect(() => {
(async () => {
const { status } = await Notifications.requestPermissionsAsync();
if (status !== "granted") return;
if (Platform.OS === "android") {
await Notifications.setNotificationChannelAsync("default", {
name: "default",
importance: Notifications.AndroidImportance.DEFAULT,
});
}
const token = (await Notifications.getExpoPushTokenAsync()).data;
// send token to backend
console.log(token);
})();
}, []);
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Testing push on simulators β limited; use physical devices.
* Missing Android channels β silent / wrong importance.
* Not handling notification taps when app is killed (use last response API).
## π Related [#-related]
* [permissions.md](/docs/react-native/permissions) β permission flow
* [deeplinking.md](/docs/react-native/deeplinking) β open screens from taps
* [Expo/config.md](/docs/react-native/expo/config) β plugins / entitlements
* [Expo/build.md](/docs/react-native/expo/build) β store builds with push
---
# Notifications (/docs/react-native/notifications)
# Notifications [#notifications]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Local and push notifications alert users outside the app UI. On Expo, use `expo-notifications`; bare RN often uses Firebase / Notifee.
## π§ Core concepts [#-core-concepts]
| Piece | Role |
| ----------- | ------------------------------- |
| Permissions | Request before scheduling |
| Local | Scheduled on-device |
| Push | Remote via FCM/APNs |
| Handlers | Foreground / response listeners |
## π‘ Examples [#-examples]
```tsx
import * as Notifications from 'expo-notifications';
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: false,
shouldSetBadge: false,
shouldShowBanner: true,
shouldShowList: true,
}),
});
```
```tsx
await Notifications.scheduleNotificationAsync({
content: { title: 'Reminder', body: 'Ship the docs' },
trigger: { type: Notifications.SchedulableTriggerInputTypes.TIME_INTERVAL, seconds: 5 },
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* iOS requires explicit permission; Android 13+ needs POST\_NOTIFICATIONS.
* Donβt assume push tokens are stable forever.
* Handle notification taps to deep-link into the right screen.
## π Related [#-related]
* [deep\_linking](/docs/react-native/deep-linking)
* [launcher\_shortcut\_menu](/docs/react-native/launcher-shortcut-menu)
* [getting\_started](/docs/react-native/getting-started)
---
# Permissions (/docs/react-native/permissions)
# Permissions [#permissions]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Sensitive APIs (camera, photos, location, mic, notifications, tracking) require runtime permission prompts plus Info.plist / AndroidManifest declarations. Expo: `expo-*` modules + config plugins.
## π§ Core concepts [#-core-concepts]
* **Declare** β usage strings (`NSCameraUsageDescription`) and manifest permissions.
* **Request at need** β when the user taps an action, not on cold start spam.
* **Check status** β `granted` | `denied` | `undetermined` | limited (iOS photos).
* **Settings** β if denied, deep-link to app settings (`Linking.openSettings()`).
* **Expo** β `expo-camera`, `expo-location`, `expo-image-picker`, etc.
## π‘ Examples [#-examples]
```tsx
import * as ImagePicker from "expo-image-picker";
import { Alert, Linking } from "react-native";
export async function pickImage() {
const current = await ImagePicker.getMediaLibraryPermissionsAsync();
let status = current.status;
if (status !== "granted") {
const req = await ImagePicker.requestMediaLibraryPermissionsAsync();
status = req.status;
}
if (status !== "granted") {
Alert.alert("Permission needed", "Enable photo access in Settings", [
{ text: "Open Settings", onPress: () => Linking.openSettings() },
{ text: "Cancel", style: "cancel" },
]);
return null;
}
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
quality: 0.8,
});
return result.canceled ? null : result.assets[0];
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Missing plist usage descriptions β App Store reject / crash on access.
* Requesting everything at launch β users deny all.
* Ignoring Android 13+ granular media permissions.
## π Related [#-related]
* [Expo/plugins.md](/docs/react-native/expo/plugins) β config plugins
* [Expo/config.md](/docs/react-native/expo/config) β app config
* [notification.md](/docs/react-native/notification) β notification permission
* [settings.md](/docs/react-native/settings) β open settings
---
# Picker (/docs/react-native/picker)
# Picker [#picker]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Pickers select from a list (date, time, dropdown). Core RN removed the old `Picker`; use `@react-native-picker/picker`, `@react-native-community/datetimepicker`, or Expo equivalents.
## π§ Core concepts [#-core-concepts]
* **`@react-native-picker/picker`** β `Picker` + `Picker.Item`.
* **Date/time** β community datetime picker; platform-native UI.
* **Expo** β `expo-date-picker` patterns via community modules; or JS UI pickers.
* **Controlled** β `selectedValue` + `onValueChange`.
## π‘ Examples [#-examples]
```tsx
import { useState } from "react";
import { Picker } from "@react-native-picker/picker";
export function FruitPicker() {
const [fruit, setFruit] = useState("apple");
return (
setFruit(v)}>
);
}
```
```tsx
import DateTimePicker from "@react-native-community/datetimepicker";
import { Platform } from "react-native";
export function Birthday({
value,
onChange,
}: {
value: Date;
onChange: (d: Date) => void;
}) {
return (
date && onChange(date)}
/>
);
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Importing removed core `Picker` from `react-native`.
* Android date picker fires once and closes β manage `show` state.
* Styling differences: wrap platform-specific UI.
## π Related [#-related]
* [platform\_specific.md](/docs/react-native/platform-specific) β iOS vs Android UI
* [basic\_primitives.md](/docs/react-native/basic-primitives) β form layout
* [touchable.md](/docs/react-native/touchable) β open custom pickers
* [modal.md](/docs/react-native/modal) β picker in modal
---
# Platform-specific (/docs/react-native/platform-specific)
# Platform-specific [#platform-specific]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Branch behavior and files per OS with `Platform`, `.ios.tsx` / `.android.tsx` extensions, and platform select helpers. Keep shared logic in common modules.
## π§ Core concepts [#-core-concepts]
* **`Platform.OS`** β `"ios" | "android" | "web" | β¦`.
* **`Platform.select(\{ ios, android, default \})`**.
* **`Platform.Version`** β API level / iOS version.
* **Extensions** β `Button.ios.tsx`, `Button.android.tsx` resolved by Metro.
* **Expo** β `Platform` still applies; also check Constants for store client vs standalone.
## π‘ Examples [#-examples]
```tsx
import { Platform, StyleSheet, Text } from "react-native";
const styles = StyleSheet.create({
shadow: Platform.select({
ios: {
shadowColor: "#000",
shadowOpacity: 0.15,
shadowRadius: 8,
shadowOffset: { width: 0, height: 4 },
},
android: { elevation: 4 },
default: {},
}),
});
export function Hint() {
return (
{Platform.OS === "ios" ? "Swipe from left to go back" : "Use the back button"}
);
}
```
```plaintext
components/
Map.tsx # shared types / re-export
Map.ios.tsx
Map.android.tsx
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Duplicating large components instead of small platform branches.
* Assuming `Platform.OS === "ios"` covers iPad idioms β check size classes too.
* Forgetting web when using React Native Web.
## π Related [#-related]
* [layout.md](/docs/react-native/layout) β shared layout
* [statusbar.md](/docs/react-native/statusbar) β bar styles differ
* [keyboard.md](/docs/react-native/keyboard) β avoiding behavior
* [Expo/config.md](/docs/react-native/expo/config) β platform config blocks
---
# Player (/docs/react-native/player)
# Player [#player]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Media playback (audio/video) uses libraries such as `expo-av`, `expo-audio` / `expo-video` (newer Expo SDK splits), `react-native-video`, or `react-native-track-player` for background audio.
## π§ Core concepts [#-core-concepts]
* **Load source** β local `require` or remote URI; handle buffering.
* **Controls** β play / pause / seek / rate; keep UI in sync with status callbacks.
* **Background** β audio session / foreground service; lock-screen controls need extra setup.
* **Lifecycle** β unload on unmount to free decoders.
* **Expo** β config plugins for background modes when needed.
## π‘ Examples [#-examples]
```tsx
import { useEffect, useRef } from "react";
import { Button } from "react-native";
import { Audio } from "expo-av";
export function SoundButton({ uri }: { uri: string }) {
const soundRef = useRef(null);
useEffect(() => {
return () => {
soundRef.current?.unloadAsync();
};
}, []);
async function toggle() {
if (!soundRef.current) {
const { sound } = await Audio.Sound.createAsync({ uri });
soundRef.current = sound;
await sound.playAsync();
return;
}
const status = await soundRef.current.getStatusAsync();
if (status.isLoaded && status.isPlaying) await soundRef.current.pauseAsync();
else await soundRef.current.playAsync();
}
return ;
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Not unloading players β memory / decoder leaks.
* Autoplay policies and silent switch (iOS) β configure audio mode.
* Large remote files without progress / error UI.
## π Related [#-related]
* [permissions.md](/docs/react-native/permissions) β mic / media access
* [storage.md](/docs/react-native/storage) β cached files
* [Expo/plugins.md](/docs/react-native/expo/plugins) β native modules
* [networking.md](/docs/react-native/networking) β streaming URLs
---
# Pressable (/docs/react-native/pressable)
# Pressable [#pressable]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`Pressable` is the modern press handlerβprefer it over `TouchableOpacity` / `TouchableHighlight`. Style from press state, configure hit slop, and set accessibility roles. See also [touchable.md](/docs/react-native/touchable) for legacy touchables.
## π§ Core concepts [#-core-concepts]
* **Events** β `onPress`, `onLongPress`, `onPressIn` / `Out`.
* **State style** β `style=\{(\{ pressed \}) => ...\}`.
* **`hitSlop`** β expand touch target.
* **`android_ripple`** β Material ripple.
* **`disabled`** β block interaction + a11y state.
* **Delay** β `delayLongPress`.
## π‘ Examples [#-examples]
```tsx
import { Pressable, Text, StyleSheet } from "react-native";
export function Button({
label,
onPress,
disabled,
}: {
label: string;
onPress: () => void;
disabled?: boolean;
}) {
return (
[
styles.btn,
pressed && styles.pressed,
disabled && styles.disabled,
]}
>
{label}
);
}
const styles = StyleSheet.create({
btn: {
backgroundColor: "#111",
paddingVertical: 12,
paddingHorizontal: 16,
borderRadius: 8,
},
pressed: { opacity: 0.85 },
disabled: { opacity: 0.4 },
label: { color: "#fff", fontWeight: "600", textAlign: "center" },
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Touch targets under \~44Γ44 pt.
* Nested Pressables competing for gestures.
* Using Touchable\* in new code without reason.
* Missing `accessibilityRole="button"`.
## π Related [#-related]
* [touchable.md](/docs/react-native/touchable) β legacy touchables
* [gesture.md](/docs/react-native/gesture) β advanced gestures
* [haptics.md](/docs/react-native/haptics) β feedback
* [accesebility.md](/docs/react-native/accesebility) β roles
* [animation.md](/docs/react-native/animation) β press animations
---
# React Native for Web (/docs/react-native/reactnativeforweb)
# React Native for Web [#react-native-for-web]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
**React Native for Web** (`react-native-web`) lets many React Native components and APIs run in the browser by mapping them to HTML/CSS. You keep `View` / `Text` / `StyleSheet` code and share UI across iOS, Android, and web β with platform-specific escapes when needed.
## π§ Core concepts [#-core-concepts]
| Idea | Meaning |
| ------------------ | ----------------------------------------------------- |
| `react-native-web` | Compatibility layer: RN primitives β DOM |
| Alias | Bundler maps `react-native` β `react-native-web` |
| Shared UI | One component tree for multiple targets |
| Platform | `Platform.OS === "web"` for web-only branches |
| Expo web | Expo can export/serve a web target with RN primitives |
| Limits | Not every native module has a web equivalent |
Typical stack: React + React DOM + `react-native-web` + Metro/Webpack/Vite/Expo.
## π‘ Examples [#-examples]
**Same component on native and web:**
```jsx
import { View, Text, StyleSheet, Platform } from "react-native";
export function Banner() {
return (
Hello from {Platform.OS}
);
}
const styles = StyleSheet.create({
box: {
padding: 16,
backgroundColor: "#e2e8f0",
// web accepts extra CSS-like props via RN-web in many setups
maxWidth: 480,
},
title: { fontSize: 18, fontWeight: "600" },
});
```
**Platform-specific file** (`Button.web.js` vs `Button.native.js`):
```jsx
// Button.web.js
export function Button({ label, onPress }) {
return (
);
}
```
```jsx
// Button.native.js
import { Pressable, Text } from "react-native";
export function Button({ label, onPress }) {
return (
{label}
);
}
```
**Expo web (concept):**
```shellscript
npx create-expo-app@latest MyApp
cd MyApp
npx expo start --web
```
**Webpack/Vite alias sketch (concept):**
```js
// resolve.alias (tool-dependent)
{
"react-native$": "react-native-web"
}
```
**Safe branching:**
```jsx
import { Platform, Linking, Text } from "react-native";
async function openDocs() {
const url = "https://necolas.github.io/react-native-web/";
if (Platform.OS === "web") {
window.open(url, "_blank", "noopener,noreferrer");
} else {
await Linking.openURL(url);
}
}
// Docs
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Native-only modules (camera, biometrics, some sensors) need web stubs or alternatives.
* Accessibility and SEO differ on web β you may need real landmarks/`` for marketing pages.
* Flexbox works, but browser scrolling, hover, and cursor need web-aware styling.
* Donβt assume pixel-perfect parity; test on a real browser early.
* Alias misconfiguration causes βInvalid hook callβ or dual-React copies β keep a single `react` / `react-dom` version.
## π Related [#-related]
* [getting\_started.md](/docs/react-native/getting-started)
* [hello\_world.md](/docs/react-native/hello-world)
* [styling.md](/docs/react-native/styling)
* [linking.md](/docs/react-native/linking)
* [pressable.md](/docs/react-native/pressable)
---
# RefreshControl (/docs/react-native/refresh-control)
# RefreshControl [#refreshcontrol]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`RefreshControl` adds pull-to-refresh to `ScrollView` or `FlatList`. Drive it with controlled `refreshing` boolean and `onRefresh` that loads data then clears the flag.
## π§ Core concepts [#-core-concepts]
* **`refreshing`** β spinner visibility.
* **`onRefresh`** β start async reload.
* **Colors** β `tintColor` (iOS), `colors` (Android).
* **Progress view** β Android `progressViewOffset`.
* **Pair** β often with React Query `refetch`.
## π‘ Examples [#-examples]
```tsx
import { useCallback, useState } from "react";
import { FlatList, RefreshControl, Text } from "react-native";
export function Feed({
items,
reload,
}: {
items: { id: string; title: string }[];
reload: () => Promise;
}) {
const [refreshing, setRefreshing] = useState(false);
const onRefresh = useCallback(async () => {
setRefreshing(true);
try {
await reload();
} finally {
setRefreshing(false);
}
}, [reload]);
return (
item.id}
renderItem={({ item }) => {item.title}}
refreshControl={
}
/>
);
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Leaving `refreshing` true on errorβuse `try/finally`.
* Triggering refresh on mount unintentionally.
* Nested scrollables fighting the gesture.
* Not awaiting the fetch before clearing state.
## π Related [#-related]
* [flatlist.md](/docs/react-native/flatlist) β lists
* [scrollview.md](/docs/react-native/scrollview) β scroll
* [networking.md](/docs/react-native/networking) β fetch
* [request.md](/docs/react-native/request) β HTTP helpers
* [activity\_indicator.md](/docs/react-native/activity-indicator) β spinners
---
# Request (/docs/react-native/request)
# Request [#request]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Centralize HTTP requests: base URL, auth headers, error mapping, retries. Keep UI hooks thin; put transport in a small `api` / `request` module.
## π§ Core concepts [#-core-concepts]
* **Wrapper** β `request(path, options)` over `fetch`.
* **Interceptors** β inject tokens; refresh on 401.
* **Errors** β typed API errors with status + body.
* **Timeouts** β `AbortController` + `setTimeout`.
* **Caching** β React Query / SWR for GET dedupe.
## π‘ Examples [#-examples]
```ts
const BASE = "https://api.example.com";
export class ApiError extends Error {
constructor(
message: string,
public status: number,
public body: unknown,
) {
super(message);
}
}
export async function request(
path: string,
init: RequestInit & { token?: string; timeoutMs?: number } = {},
): Promise {
const ctrl = new AbortController();
const t = setTimeout(() => ctrl.abort(), init.timeoutMs ?? 15000);
try {
const res = await fetch(`${BASE}${path}`, {
...init,
signal: ctrl.signal,
headers: {
Accept: "application/json",
"Content-Type": "application/json",
...(init.token ? { Authorization: `Bearer ${init.token}` } : {}),
...init.headers,
},
});
const body = await res.json().catch(() => null);
if (!res.ok) throw new ApiError("Request failed", res.status, body);
return body as T;
} finally {
clearTimeout(t);
}
}
```
```ts
export const getProfile = (token: string) =>
request<{ name: string }>("/me", { token });
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Duplicating fetch logic in every screen.
* Swallowing errors without user feedback.
* Hardcoding secrets in the client β use backend for privileged calls.
## π Related [#-related]
* [networking.md](/docs/react-native/networking) β transport basics
* [storage.md](/docs/react-native/storage) β token persistence
* [settings.md](/docs/react-native/settings) β env / config flags
* [deeplinking.md](/docs/react-native/deeplinking) β post-auth routes
---
# Safe Area (/docs/react-native/safe-area)
# Safe Area [#safe-area]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Safe areas avoid notches, status bars, and home indicators. Use `react-native-safe-area-context` (`SafeAreaProvider`, `SafeAreaView`, `useSafeAreaInsets`)βthe built-in `SafeAreaView` is limited (iOS-focused). Wrap the app once in a provider.
## π§ Core concepts [#-core-concepts]
* **`SafeAreaProvider`** β root wrapper.
* **`useSafeAreaInsets()`** β `\{ top, right, bottom, left \}`.
* **`SafeAreaView`** β applies padding edges.
* **`edges`** β choose which sides (`['top','bottom']`).
* **Headers** β native stack often handles top inset; donβt double-pad.
## π‘ Examples [#-examples]
```tsx
import {
SafeAreaProvider,
SafeAreaView,
useSafeAreaInsets,
} from "react-native-safe-area-context";
import { View, Text, StyleSheet } from "react-native";
export function App() {
return (
);
}
function Screen() {
const insets = useSafeAreaInsets();
return (
FAB
);
}
const styles = StyleSheet.create({
flex: { flex: 1 },
fab: {
position: "absolute",
right: 16,
padding: 12,
backgroundColor: "#111",
},
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Forgetting `SafeAreaProvider` β zero insets.
* Double-counting insets with header + screen padding.
* Using legacy RN `SafeAreaView` on Android expecting notch handling.
* Absolute tab bars covering content without bottom inset.
## π Related [#-related]
* [statusbar.md](/docs/react-native/statusbar) β status bar style
* [navigation.md](/docs/react-native/navigation) β headers
* [layout.md](/docs/react-native/layout) β flex
* [dimensions.md](/docs/react-native/dimensions) β screen size
* [styling.md](/docs/react-native/styling) β padding
---
# ScrollView (/docs/react-native/scrollview)
# ScrollView [#scrollview]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`ScrollView` scrolls a finite set of children. Use for short content (forms, static pages). For long or dynamic lists prefer `FlatList` / `SectionList`. Combine with `KeyboardAvoidingView` / `keyboardShouldPersistTaps` for forms.
## π§ Core concepts [#-core-concepts]
* **All children mount** β no virtualization.
* **Horizontal** β `horizontal` prop.
* **Refresh** β `refreshControl=\{\}`.
* **Paging** β `pagingEnabled`, `snapToInterval`.
* **Nested** β careful with lists; prefer one scroll parent.
* **Refs** β `scrollTo` / `scrollToEnd`.
## π‘ Examples [#-examples]
```tsx
import { ScrollView, Text, StyleSheet } from "react-native";
export function About() {
return (
About
Long copyβ¦
);
}
const styles = StyleSheet.create({
content: { padding: 16, paddingBottom: 48 },
title: { fontSize: 22, marginBottom: 12 },
});
```
**Horizontal chips:**
```tsx
{tags.map((t) => (
))}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Mapping hundreds of items into ScrollView β jank/memory.
* Nesting FlatList inside ScrollView (virtualization breaks).
* Forgetting bottom padding behind tab bars / home indicator.
* `keyboardShouldPersistTaps` default blocking taps while keyboard open.
## π Related [#-related]
* [flatlist.md](/docs/react-native/flatlist) β virtualized lists
* [keyboard.md](/docs/react-native/keyboard) β keyboard UX
* [refresh\_control.md](/docs/react-native/refresh-control) β pull to refresh
* [safe\_area.md](/docs/react-native/safe-area) β insets
* [layout.md](/docs/react-native/layout) β flex layout
---
# SectionList (/docs/react-native/sectionlist)
# SectionList [#sectionlist]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`SectionList` is a virtualized list of sections, each with a title and `data` array. Use for alphabetical contacts, grouped settings, or day-bucketed feeds. Same performance rules as `FlatList`.
## π§ Core concepts [#-core-concepts]
| Prop | Role |
| ----------------------------- | ---------------------------- |
| `sections` | `\{ title, data \}[]` |
| `renderItem` | Row |
| `renderSectionHeader` | Section title |
| `keyExtractor` | Item keys |
| `stickySectionHeadersEnabled` | Sticky headers (iOS default) |
Shape: `SectionListData`.
## π‘ Examples [#-examples]
```tsx
import { SectionList, Text, StyleSheet } from "react-native";
type Item = { id: string; name: string };
type Section = { title: string; data: Item[] };
export function Contacts({ sections }: { sections: Section[] }) {
return (
item.id}
renderItem={({ item }) => {item.name}}
renderSectionHeader={({ section }) => (
{section.title}
)}
/>
);
}
const styles = StyleSheet.create({
header: {
fontWeight: "700",
padding: 8,
backgroundColor: "#f2f2f2",
},
row: { padding: 12 },
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Empty `data` arrays still rendering awkward headersβfilter sections.
* Unstable section object identities causing rerenders.
* Nesting inside ScrollView.
* Using SectionList for a single flat listβuse FlatList.
## π Related [#-related]
* [flatlist.md](/docs/react-native/flatlist) β flat virtualization
* [scrollview.md](/docs/react-native/scrollview) β short content
* [refresh\_control.md](/docs/react-native/refresh-control) β pull to refresh
* [styling.md](/docs/react-native/styling) β headers
* [keys\_lists](/docs/react-native/../react/keys-lists) β keys
---
# Settings (/docs/react-native/settings)
# Settings [#settings]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
App settings span in-app preferences, opening the OS Settings page, and build-time config (`react-native-config`, Expo `extra` / env). Separate user prefs from secrets.
## π§ Core concepts [#-core-concepts]
* **In-app prefs** β theme, language, feature toggles β AsyncStorage / MMKV / SecureStore.
* **`Linking.openSettings()`** β send user to system app settings (permissions).
* **Build config** β `.env` via Expo (`EXPO_PUBLIC_*`) or native config libs.
* **Expo Constants** β `Constants.expoConfig?.extra` for non-secret config.
## π‘ Examples [#-examples]
```tsx
import { Linking, Pressable, Text } from "react-native";
export function OpenAppSettings() {
return (
Linking.openSettings()} accessibilityRole="button">
Open system settings
);
}
```
```tsx
import Constants from "expo-constants";
const apiUrl =
Constants.expoConfig?.extra?.apiUrl ?? "https://api.example.com";
```
```ts
// app.config.ts extra
export default {
expo: {
extra: {
apiUrl: process.env.EXPO_PUBLIC_API_URL,
},
},
};
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Putting secrets in `EXPO_PUBLIC_*` or `extra` β they ship in the binary.
* Mixing permission recovery UI with preference screens without clear copy.
* Not migrating prefs when storage keys change.
## π Related [#-related]
* [storage.md](/docs/react-native/storage) β persistence
* [permissions.md](/docs/react-native/permissions) β settings deep link
* [Expo/config.md](/docs/react-native/expo/config) β app config
* [platform\_specific.md](/docs/react-native/platform-specific) β OS differences
---
# Share (/docs/react-native/share)
# Share [#share]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`Share` opens the platform share sheet for text/URLs (and files via community modules). Use it for invite links, exports, and content sharing.
## π§ Core concepts [#-core-concepts]
* **`Share.share(\{ message, url, title \})`** β core API.
* **Result** β `sharedAction` | `dismissedAction` (iOS mainly).
* **Files** β `expo-sharing` / `react-native-share` for images/PDFs.
* **Permissions** β writing to cache before sharing files.
## π‘ Examples [#-examples]
```tsx
import { Share, Pressable, Text, Platform } from "react-native";
export function ShareLink({ url }: { url: string }) {
async function onShare() {
try {
await Share.share(
Platform.OS === "ios"
? { url, message: "Check this out" }
: { message: `Check this out ${url}` },
);
} catch {
// user-facing error optional
}
}
return (
Share
);
}
```
```tsx
import * as Sharing from "expo-sharing";
async function shareFile(uri: string) {
if (!(await Sharing.isAvailableAsync())) return;
await Sharing.shareAsync(uri);
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Android often wants the URL inside `message`, not `url`.
* Assuming share succeeded when the sheet merely opened.
* Sharing huge files from remote URIs without downloading first.
## π Related [#-related]
* [clipboard.md](/docs/react-native/clipboard) β copy instead of share
* [storage.md](/docs/react-native/storage) β temp files
* [permissions.md](/docs/react-native/permissions) β media access
* [networking.md](/docs/react-native/networking) β download then share
---
# StatusBar (/docs/react-native/statusbar)
# StatusBar [#statusbar]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`StatusBar` controls the system status bar style (light/dark content) and visibility. Combine with **safe area** insets so content isnβt under the bar or notch.
## π§ Core concepts [#-core-concepts]
* **`barStyle`** β `"light-content"` | `"dark-content"`.
* **`backgroundColor`** β Android; iOS is typically transparent over the scene.
* **`translucent`** β Android draws under the bar.
* **Per-screen** β React Navigation `options=\{\{ statusBarStyle \}\}` or `` in screen.
* **Expo** β `expo-status-bar` (`style="light"`).
## π‘ Examples [#-examples]
```tsx
import { StatusBar, View, Text, StyleSheet } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
export function DarkHeader() {
const insets = useSafeAreaInsets();
return (
Inbox
);
}
const styles = StyleSheet.create({
header: { paddingHorizontal: 16, paddingBottom: 12 },
title: { color: "#fff", fontSize: 20, fontWeight: "600" },
});
```
```tsx
import { StatusBar } from "expo-status-bar";
;
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Setting bar style without matching background β unreadable icons.
* Ignoring safe area β content under notch / Dynamic Island.
* Multiple conflicting `StatusBar` mounts across stacked screens.
## π Related [#-related]
* [layout.md](/docs/react-native/layout) β padding / flex
* [dimensions.md](/docs/react-native/dimensions) β window metrics
* [platform\_specific.md](/docs/react-native/platform-specific) β Android vs iOS
* [transition.md](/docs/react-native/transition) β screen changes
---
# Storage (/docs/react-native/storage)
# Storage [#storage]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Persist data on device: **AsyncStorage** / **MMKV** for general prefs, **SecureStore** / Keychain for secrets, and the filesystem for files. Remember the store is per-install and can be cleared.
## π§ Core concepts [#-core-concepts]
* **AsyncStorage** β async key/value strings; fine for small prefs.
* **MMKV** β fast sync-ish storage (via JSI); great for app state.
* **SecureStore / Keychain** β tokens, not large blobs.
* **File system** β `expo-file-system` for downloads/cache.
* **Serialization** β `JSON.stringify` / `parse` with versioned schemas.
## π‘ Examples [#-examples]
```tsx
import AsyncStorage from "@react-native-async-storage/async-storage";
const KEY = "settings/v1";
export async function loadSettings(fallback: T): Promise {
const raw = await AsyncStorage.getItem(KEY);
if (!raw) return fallback;
try {
return JSON.parse(raw) as T;
} catch {
return fallback;
}
}
export async function saveSettings(value: T) {
await AsyncStorage.setItem(KEY, JSON.stringify(value));
}
```
```tsx
import * as SecureStore from "expo-secure-store";
await SecureStore.setItemAsync("session", token);
const token = await SecureStore.getItemAsync("session");
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Storing secrets in AsyncStorage.
* Unbounded growth β no eviction strategy for caches.
* Assuming storage survives reinstall or OS backup policies for secure items.
## π Related [#-related]
* [settings.md](/docs/react-native/settings) β preferences UX
* [request.md](/docs/react-native/request) β auth tokens
* [clipboard.md](/docs/react-native/clipboard) β ephemeral data
* [Expo/config.md](/docs/react-native/expo/config) β Expo modules
---
# Styling (/docs/react-native/styling)
# Styling [#styling]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
RN styles use a subset of CSS via `StyleSheet.create` or inline objects. Layout is Flexbox by default (`flexDirection: 'column'`). No cascading selectorsβcompose style arrays. Prefer `StyleSheet` for identity and validation.
## π§ Core concepts [#-core-concepts]
| Topic | Notes |
| ----------- | --------------------------------------------------------- |
| Flexbox | `flex`, `justifyContent`, `alignItems`, `gap` (modern RN) |
| Units | Density-independent numbers (dp), not `px` strings |
| Platform | `Platform.select` / `.ios.md` files |
| Composition | `style=\{[styles.base, cond && styles.active]\}` |
| Text | Limited font props; custom fonts need linking/Expo plugin |
Libraries: NativeWind, Restyle, Tamaguiβoptional.
## π‘ Examples [#-examples]
```tsx
import { Platform, StyleSheet, Text, View } from "react-native";
export function Card({ title }: { title: string }) {
return (
{title}
);
}
const styles = StyleSheet.create({
card: {
padding: 16,
borderRadius: 12,
backgroundColor: "#fff",
...Platform.select({
ios: {
shadowColor: "#000",
shadowOpacity: 0.1,
shadowRadius: 8,
shadowOffset: { width: 0, height: 2 },
},
android: { elevation: 3 },
}),
},
title: {
fontSize: 18,
fontWeight: "600",
color: "#111",
},
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Assuming web CSS (no inheritance for most text styles beyond Text parent quirks).
* Percentage heights without parent flex/height.
* Inline new style objects in hot list rows without need.
* Hardcoding colors everywhereβcentralize tokens.
## π Related [#-related]
* [layout.md](/docs/react-native/layout) β flex patterns
* [platform\_specific.md](/docs/react-native/platform-specific) β Platform
* [dimensions.md](/docs/react-native/dimensions) β size
* [basic\_primitives.md](/docs/react-native/basic-primitives) β View/Text
* [safe\_area.md](/docs/react-native/safe-area) β insets
---
# TextInput (/docs/react-native/textinput)
# TextInput [#textinput]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`TextInput` is the core text entry component. Controlled via `value` + `onChangeText`. Tune keyboard (`keyboardType`, `autoCapitalize`, `secureTextEntry`), and handle focus with refs. Pair with labels for accessibility.
## π§ Core concepts [#-core-concepts]
| Prop | Role |
| ----------------------------------- | ------------------ |
| `value` / `onChangeText` | Controlled text |
| `defaultValue` | Uncontrolled start |
| `placeholder` | Hint |
| `secureTextEntry` | Password |
| `keyboardType` | email/number/β¦ |
| `multiline` / `numberOfLines` | Text area |
| `returnKeyType` / `onSubmitEditing` | Keyboard action |
| `editable` | Disable |
Use `autoComplete` / `textContentType` for password managers.
## π‘ Examples [#-examples]
```tsx
import { useRef, useState } from "react";
import { TextInput, Pressable, Text, StyleSheet } from "react-native";
export function LoginFields() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const passwordRef = useRef(null);
return (
<>
Email
passwordRef.current?.focus()}
/>
);
}
const styles = StyleSheet.create({
input: {
borderWidth: 1,
borderColor: "#ccc",
borderRadius: 8,
padding: 12,
marginBottom: 12,
},
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Controlled input without updating `value` β canβt type.
* Wrapping in a scroll view without `keyboardShouldPersistTaps`.
* Tiny touch targets / missing labels.
* Android `underlineColorAndroid` surprisesβset transparent if needed.
## π Related [#-related]
* [keyboard.md](/docs/react-native/keyboard) β avoid/cover
* [scrollview.md](/docs/react-native/scrollview) β forms
* [pressable.md](/docs/react-native/pressable) β submit buttons
* [accesebility.md](/docs/react-native/accesebility) β labels
* [touchable.md](/docs/react-native/touchable) β press handling
---
# Touchable (/docs/react-native/touchable)
# Touchable [#touchable]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Handle presses with **`Pressable`** (recommended), or legacy `TouchableOpacity` / `TouchableHighlight` / `TouchableWithoutFeedback`. Inside Gesture Handler navigators, prefer RNGH touchables.
## π§ Core concepts [#-core-concepts]
* **`Pressable`** β `onPress`, `onLongPress`, style as function of `\{ pressed \}`.
* **Hit slop** β expand touch target without changing layout.
* **Disabled** β `disabled` + a11y state.
* **Feedback** β opacity, ripple (`android_ripple`), haptic via Expo Haptics.
* **Legacy** β Touchable\* still work; migrate to Pressable when touching code.
## π‘ Examples [#-examples]
```tsx
import { Pressable, Text, StyleSheet } from "react-native";
export function PrimaryButton({
label,
onPress,
disabled,
}: {
label: string;
onPress: () => void;
disabled?: boolean;
}) {
return (
[
styles.btn,
pressed && styles.pressed,
disabled && styles.disabled,
]}
>
{label}
);
}
const styles = StyleSheet.create({
btn: {
backgroundColor: "#111",
paddingVertical: 12,
paddingHorizontal: 16,
borderRadius: 8,
},
pressed: { opacity: 0.85 },
disabled: { opacity: 0.4 },
label: { color: "#fff", fontWeight: "600", textAlign: "center" },
});
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Touch targets smaller than \~44Γ44 pt.
* Wrapping `Text` alone without Pressable when you need a button role.
* Nested pressables stealing taps β flatten or use `pointerEvents`.
## π Related [#-related]
* [gesture.md](/docs/react-native/gesture) β advanced gestures
* [accesebility.md](/docs/react-native/accesebility) β roles / labels
* [basic\_primitives.md](/docs/react-native/basic-primitives) β Text / View
* [animation.md](/docs/react-native/animation) β press animations
---
# Transition (/docs/react-native/transition)
# Transition [#transition]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Transitions animate between UI states or screens. Use navigator transition configs, `Animated` / Reanimated shared element patterns, or simple mount/unmount fades.
## π§ Core concepts [#-core-concepts]
* **Stack transitions** β slide, fade, modal presentation (React Navigation / native stack).
* **LayoutAnimation** β animate flex layout changes after state updates.
* **Shared values** β Reanimated for interactive, interruptible transitions.
* **Presence** β delay unmount until exit animation finishes.
* **Native stack** β best performance; limited custom interpolation vs JS stack.
## π‘ Examples [#-examples]
```tsx
import { createNativeStackNavigator } from "@react-navigation/native-stack";
const Stack = createNativeStackNavigator();
export function RootStack() {
return (
);
}
```
```tsx
import { LayoutAnimation, Platform, UIManager, Pressable } from "react-native";
if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
function toggle(setOpen: (fn: (v: boolean) => boolean) => void) {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setOpen((v) => !v);
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Heavy JS transitions dropping frames β prefer native stack / Reanimated.
* Animating during rapid navigation spam without cancellation.
* Forgetting Android LayoutAnimation experimental flag on older RN.
## π Related [#-related]
* [animation.md](/docs/react-native/animation) β Animated / Reanimated
* [drawer.md](/docs/react-native/drawer) β drawer motion
* [modal.md](/docs/react-native/modal) β modal presentation
* [gesture.md](/docs/react-native/gesture) β interactive pops
---
# Vibration (/docs/react-native/vibration)
# Vibration [#vibration]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
`Vibration` triggers the device vibrator for tactile feedback. Simple on Android/iOS; patterns are mainly Android. For richer feedback on iOS, prefer **Expo Haptics** / native haptics APIs.
## π§ Core concepts [#-core-concepts]
| API | Role |
| ---------------------------- | --------------------------------------- |
| `Vibration.vibrate()` | Default buzz |
| `Vibration.vibrate(ms)` | Duration (Android) |
| `Vibration.vibrate(pattern)` | Android pattern `[wait, buzz, β¦]` |
| `Vibration.cancel()` | Stop |
| iOS | Duration often ignored; pattern limited |
Permissions: generally none for basic vibrate; respect user settings.
## π‘ Examples [#-examples]
```tsx
import { Vibration, Pressable, Text, Platform } from "react-native";
export function BuzzButton() {
return (
{
if (Platform.OS === "android") {
Vibration.vibrate([0, 50, 40, 50]);
} else {
Vibration.vibrate();
}
}}
>
Buzz
);
}
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Overusing vibration β annoying / battery drain.
* Expecting Android patterns to feel identical on iOS.
* Using Vibration when Haptics impact/selection is more appropriate.
* Not cancelling long patterns on unmount.
## π Related [#-related]
* [haptics.md](/docs/react-native/haptics) β Expo/iOS-quality haptics
* [pressable.md](/docs/react-native/pressable) β press feedback
* [alert.md](/docs/react-native/alert) β confirmations
* [platform\_specific.md](/docs/react-native/platform-specific) β Platform
* [accesebility.md](/docs/react-native/accesebility) β reduce motion / feedback
---
# Widget (/docs/react-native/widget)
# Widget [#widget]
*React Native Β· Reference cheat sheet*
***
## π Overview [#-overview]
Home-screen widgets are **native** (WidgetKit on iOS, App Widgets on Android). React Native doesnβt render them directly β share data via App Groups / a native module, or use libraries that bridge widget timelines.
## π§ Core concepts [#-core-concepts]
* **Native UI** β SwiftUI / RemoteViews; JS updates data, not the widget tree each frame.
* **Data bridge** β UserDefaults App Group, SharedPreferences, or a small native module.
* **Expo** β config plugins / custom native code (dev client or prebuild); limited Expo Go support.
* **Update cadence** β system-controlled refresh budgets; donβt expect real-time RN re-renders.
* **Deep link** β widget taps open the app via URL scheme.
## π‘ Examples [#-examples]
```tsx
// Conceptual: write shared state the native widget reads
import AsyncStorage from "@react-native-async-storage/async-storage";
// Prefer a native module that writes to App Group / SharedPreferences:
// await WidgetBridge.setData({ streak: 5 });
export async function syncWidgetPayload(streak: number) {
await AsyncStorage.setItem("widget/streak", String(streak));
// Native side: read key and reload timelines (WidgetCenter / updateAppWidget)
}
```
```swift
// iOS sketch β TimelineProvider reads App Group
// UserDefaults(suiteName: "group.com.example.app")?.integer(forKey: "streak")
```
## β οΈ Pitfalls [#οΈ-pitfalls]
* Expecting full RN components inside the widget β not supported.
* Over-refreshing timelines β OS throttles updates.
* Missing App Group / package entitlements in Expo config plugins.
## π Related [#-related]
* [deeplinking.md](/docs/react-native/deeplinking) β open app from widget
* [storage.md](/docs/react-native/storage) β shared data
* [Expo/plugins.md](/docs/react-native/expo/plugins) β native extensions
* [Expo/build.md](/docs/react-native/expo/build) β native builds