Apps have many screens. Navigation connects them.
Direct answer
React Native apps usually use React Navigation or Expo Router. A stack navigator moves forward and back, tabs switch between top-level sections and a drawer slides in from the side. Pass data between screens with params.
Expo Router (file-based)
app/
_layout.tsx
index.tsx
details/[id].tsx
import { Link, useLocalSearchParams } from "expo-router";
// index.tsx
export default function Home() {
return <Link href="/details/42">Open details</Link>;
}
// details/[id].tsx
export default function Details() {
const { id } = useLocalSearchParams();
return <Text>Item {id}</Text>;
}
React Navigation (code-based)
const Stack = createNativeStackNavigator();
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Details" component={Details} />
</Stack.Navigator>
</NavigationContainer>
Choosing
Use Expo Router for new Expo projects. Use React Navigation if you prefer explicit configuration.
Where Teyro fits
Teyro's React Native for Beginners course turns this into short lessons you can play in a few minutes a day. It has 80 lessons, and you can start free.
The bottom line
Pick one approach and learn its params and layouts well.
