Navigation and Lists

🗓 May 31, 2026 • ⏱ 1 min read

FlatList for long lists

import { FlatList, Text } from 'react-native';

<FlatList
  data={[{ id: '1', name: 'Anand' }, { id: '2', name: 'Priya' }]}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <Text>{item.name}</Text>}
/>

Navigation

npm install @react-navigation/native @react-navigation/native-stack

const Stack = createNativeStackNavigator();

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
  </Stack.Navigator>
</NavigationContainer>

Tip: Use navigation.navigate('Profile') inside a screen to move forward.