# Dynamic Routing in React Native: Building Flexible Navigation React Native allows you to build cross-platform mobile applications using JavaScript and React. Unlike Next.js, which relies on a file-based routing system, React Native uses libraries like React Navigation to implement dynamic routing and flexible screen transitions. In this guide, we’ll explore how to create dynamic and nested routes in a React Native app using React Navigation. ## What Is Dynamic Routing in React Native? Dynamic routing in React Native means navigating to screens with dynamic parameters such as user IDs, product names, or post slugs. Instead of hardcoding all routes, you pass data between screens using navigation props. Setting Up React Navigation First, install the required packages: ```bash npm install @react-navigation/native npm install @react-navigation/native-stack npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated ``` Then wrap your app in a NavigationContainer: ```tsx import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; const Stack = createNativeStackNavigator(); export default function App() { return ( ); } ``` Passing Parameters Dynamically You can pass parameters between screens when navigating: ```tsx // Navigate to ProfileScreen with a user ID navigation.navigate('Profile', { userId: 42 }); ``` Accessing Route Parameters In the target screen, use the route prop: ```tsx const ProfileScreen = ({ route }) => { const { userId } = route.params; return Viewing profile of user ID: {userId}; }; ``` ## Optional Parameters React Navigation supports optional parameters using default values: ```tsx const PostScreen = ({ route }) => { const { slug = 'default-post' } = route.params || {}; return Viewing post: {slug}; }; ``` ## Nested Navigators For complex apps, you can nest navigators: ```tsx const SettingsStack = createNativeStackNavigator(); function SettingsNavigator() { return ( ); } ``` Then use it in a parent navigator: ```tsx ``` ## Deep Linking You can integrate deep linking for dynamic URLs like `myapp://profile/42` : ```tsx const linking = { prefixes: ['myapp://'], config: { screens: { Profile: 'profile/:userId', }, }, }; ... ``` ## Conclusion Dynamic routing in React Native, powered by React Navigation, makes your app flexible and user-friendly. You can easily handle parameterized routes, nested navigators, and deep links across platforms. Whether you're creating a social app, e-commerce experience, or news reader, understanding dynamic routing will help you build intuitive navigation flows for your users.

Dynamic Routing in React Native: Building Flexible Navigation

Lifecycle Hooks in Strapi 5