Core Hooks
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id); // cleanup
}, [dep]);
const value = useMemo(() => expensive(a, b), [a, b]);
const stable = useCallback(() => doThing(id), [id]);
const ref = useRef(null);
Styling
const styles = StyleSheet.create({
card: { padding: 16, borderRadius: 8, backgroundColor: '#fff' },
title: { fontSize: 18, fontWeight: 'bold' },
});
<View style={[styles.card, { marginTop: 8 }]} />
<View style={condition && styles.active} />
Flexbox Layout
flex: 1 // grow to fill space
flexDirection: 'row' | 'column' // default: column
justifyContent: 'center' | 'space-between' | 'flex-start'
alignItems: 'center' | 'stretch' | 'flex-start'
flexWrap: 'wrap'
Lists
<FlatList
data={items}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <Row item={item} />}
ListEmptyComponent={<Text>Nothing here</Text>}
/>
<SectionList sections={sections} renderItem={...} renderSectionHeader={...} />
React Navigation
navigation.navigate('Details', { id: 42 });
navigation.goBack();
// Inside the target screen
const { id } = route.params;
const Stack = createNativeStackNavigator();
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
Networking
async function load() {
try {
const res = await fetch(url);
if (!res.ok) throw new Error('failed');
const data = await res.json();
} catch (e) {
// handle error
}
}
AsyncStorage
await AsyncStorage.setItem('key', JSON.stringify(value));
const raw = await AsyncStorage.getItem('key');
const value = raw ? JSON.parse(raw) : null;
await AsyncStorage.removeItem('key');
