How can I implement dynamic routing in React Navigation?

How can I implement dynamic routing in React Navigation?

To implement dynamic routing in React Navigation, you can use the createStackNavigator or createBottomTabNavigator and pass dynamic routes based on your app's state.

Can you give me an example of how to set up dynamic routes?

Sure! You can define your routes in an array and map over it to create navigators. For instance:

const routes = [
  { name: 'Home', component: HomeScreen },
  { name: 'Profile', component: ProfileScreen },
];

const Stack = createStackNavigator();

function App() {
  return (
    <Stack.Navigator>
      {routes.map(route => (
        <Stack.Screen key={route.name} name={route.name} component={route.component} />
      ))}
    </Stack.Navigator>
  );
}

What if I want to pass parameters to these dynamic routes?

You can pass parameters using the navigation.navigate method. For example:

navigation.navigate('Profile', { userId: 123 });

Then, in your ProfileScreen, you can access the parameters using route.params.userId.