DM
Technical reference

React Native Cheatsheet

Build native mobile apps with React

Must Know

tsx

Core Components

Use native primitives instead of DOM elements.

import { View, Text, Pressable } from "react-native";

<View><Text>Hello</Text><Pressable onPress={save}><Text>Save</Text></Pressable></View>
tsx

State and Lists

FlatList virtualizes long lists.

const [items, setItems] = useState([]);

<FlatList data={items} keyExtractor={x => x.id} renderItem={({ item }) => <Text>{item.name}</Text>} />

Important Patterns

tsx

Platform-Specific Code

Use .ios.tsx and .android.tsx for larger differences.

import { Platform } from "react-native";

const padding = Platform.select({ ios: 16, android: 12 });
tsx

Effect Cleanup

Clean up listeners, timers, and subscriptions.

useEffect(() => {
  const sub = AppState.addEventListener("change", handleChange);
  return () => sub.remove();
}, []);

Useful Recipes

tsx

Safe Area

Protect content from notches and system UI.

import { SafeAreaView } from "react-native-safe-area-context";

<SafeAreaView style={{ flex: 1 }}>{children}</SafeAreaView>
tsx

Keyboard-Aware Form

Test forms on small screens and with both keyboards.

<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined}>
  <TextInput returnKeyType="done" />
</KeyboardAvoidingView>

Pitfalls & Production

Performance Checklist

Profile before optimizing; avoid inline work in large list rows.

memo(Row)
useCallback(handler, [])
getItemLayout={...}
removeClippedSubviews

Secrets

Mobile bundles can be inspected by users.

// Never ship private API keys in the app bundle.
// Call a trusted backend for privileged operations.