React Native provides a robust system for managing navigation and deep linking, thereby ensuring a seamless user experience. Let's break down how React Native handles these essential aspects.

Navigation in React Native

1. React Navigation Library

The most commonly used library for navigation in React Native is React Navigation. This library provides flexible navigational patterns such as stack, tab, and drawer navigation.

• Stack Navigation: This mimics a typical push-and-pop navigation style, allowing users to go back to the previous screen easily. Each screen is represented in a stack, enabling easy stacking of screens.

• Tab Navigation: This allows for multiple screens to be visible concurrently and lets users switch between them using a tab bar interface at the bottom or top.

• Drawer Navigation: Offers a side menu that can be pulled out from the side of the screen for additional navigation options. This is ideal for apps with a lot of sections or functionality.

2. Navigation Container

The Navigation Container is a component that manages the navigation tree and state. It's the top-level component that contains navigation-related elements and must wrap your app’s navigation structure.

import { NavigationContainer } from '@react-navigation/native';

function App() {
  return (
    <NavigationContainer>
      {/* Your navigators go here */}
    </NavigationContainer>
  );
}

3. Navigators and Routes

In React Navigation, you create navigators (like Stack, Tab, or Drawer) that include routes. Each route defines a screen within the navigator. You can pass parameters to screens to make your navigation even more dynamic.

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

Deep Linking in React Native

1. What is Deep Linking?

Deep linking allows mobile apps to open a specific screen through a URL. For example, a link to a product page can take a user straight to that page in the app, providing a seamless transition between the web and the app.

2. Setting Up Deep Linking

React Navigation makes it easy to set up deep linking by configuring your navigators to handle specific paths. You can set up deep linking by defining linking options in the NavigationContainer.

const linking = {
  prefixes: ['https://myapp.com', 'myapp://'],
  config: {
    screens: {
      Home: 'home',
      Details: 'details/:id',
    },
  },
};
  
<NavigationContainer linking={linking}>
  {/* Navigators here */}
</NavigationContainer>

3. Handling Links

When a user clicks a link that matches your app's configuration, React Navigation directs them to the correct screen. You can extract the parameters from links to customize the screen's content.

function DetailsScreen({ route }) {
  const { id } = route.params; // Extracting the id from the route params
  return (
    <View>
      <Text>Product ID: {id}</Text>
    </View>
  );
}

4. Platform-Specific Configuration

Both iOS and Android require specific configurations for deep linking to work. For iOS, you need to add URL schemes in your Info.plist, and for Android, you need to define intent filters in your AndroidManifest.xml.

By adhering to these setups, your React Native application can smoothly handle navigation and deep linking, significantly elevating the user experience.