Skip to main content

React Native Integration & Best Practices: Navigation

This guide provides a comprehensive overview of how to implement navigation in a React Native application using Expo Router. Expo Router is a powerful routing solution that enables you to build complex navigation structures with ease. It is built on top of React Navigation and provides a file-based routing system that is similar to what you would find in a web framework like Next.js.

Installation​

To get started with Expo Router, you need to install the required dependencies:

npm install expo-router react-native-screens react-native-safe-area-context

Configuration​

After installing the dependencies, you need to configure your project to use Expo Router. This involves updating your app.json and babel.config.js files.

app.json​

In your app.json file, you need to add the following to the expo object:

{
  "expo": {
    "scheme": "your-app-scheme",
    "web": {
      "bundler": "metro"
    },
    "plugins": [
      "expo-router"
    ]
  }
}

babel.config.js​

In your babel.config.js file, you need to add the expo-router/babel plugin:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'expo-router/babel',
    ],
  };
};

File-based Routing​

Expo Router uses a file-based routing system. This means that you create a directory called app in the root of your project, and then you create files in that directory to define your screens. Each file in the app directory corresponds to a route in your application.

Example​

Here is an example of a simple file-based routing structure:

  • app/_layout.tsx: This is the root layout of your application. It can be used to wrap your entire application with a navigation provider or other components.
// app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      {/* Other screens can go here, e.g., modals */}
    </Stack>
  );
}

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="home" options={{ title: 'Home' }} />
      <Tabs.Screen name="profile" options={{ title: 'Profile' }} />
    </Tabs>
  );
}
  • app/index.tsx: This is the default screen of your application. It will be rendered when the user opens the app.
  • app/(tabs)/_layout.tsx: This is the layout for the tabs section of your application. The (tabs) folder is a special convention in Expo Router that allows you to create a tab-based navigation structure. When you create a folder with parentheses in its name, it tells Expo Router that this is a route group. A route group is a way to organize your routes and apply a layout to them.
  • app/(tabs)/home.tsx: This is the screen for the "Home" tab.
  • app/(tabs)/profile.tsx: This is the screen for the "Profile" tab.

This convention is useful for creating a clear and organized file structure for your application. It also makes it easy to add new tabs to your application by simply creating a new file in the (tabs) folder.

For more information on route groups and other Expo Router conventions, please refer to the official Expo Router documentation.

Expo Router provides a set of hooks and components that you can use to navigate between screens.

useRouter​

The useRouter hook allows you to access the router object, which you can use to navigate to different screens.

import { useRouter } from 'expo-router';

export default function MyComponent() {
  const router = useRouter();

  return (
    <button onPress={() => router.push('/profile')}>
      Go to Profile
    </button>
  );
}

The Link component is a wrapper around the TouchableOpacity component that allows you to navigate to a different screen when it is pressed.

import { Link } from 'expo-router';

export default function MyComponent() {
  return (
    <Link href="/profile">
      Go to Profile
    </Link>
  );
}