INTRODUCTION

This blog post will teach us how to use React Native navigations in a simple app. We will start by setting up a new React Native project with TypeScript and then install the necessary navigation dependencies. Finally, we will create and configure different types of navigators including stack, tab, and drawer navigators to build a navigation structure for our app.

 

npx create-expo-app --template

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
npm install @react-navigation/bottom-tabs @react-navigation/drawer @react-navigation/native-stack
npx expo install react-native-gesture-handler react-native-reanimated

// navigation/types.ts
import { NavigatorScreenParams } from '@react-navigation/native';

export type RootStackParamList = {
 Home: undefined;
 Details: undefined;
};

export type RootTabParamList = {
 Settings: undefined;
 Profile: undefined;
};

export type RootDrawerParamList = {
 Stack: NavigatorScreenParams<RootStackParamList>;
 Tabs: undefined;
};

// screens/HomeScreen.tsx
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';

import { RootStackParamList } from '../navigation/types';

type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;

const HomeScreen = ({ navigation }: Props) => (
 <View style={styles.container}>
   <Text>Home Screen</Text>
   <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
 </View>
);

export default HomeScreen;

const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
 },
});

// screens/DetailsScreen.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const DetailsScreen = () => (
 <View style={styles.container}>
   <Text>Details Screen</Text>
 </View>
);
export default DetailsScreen;

const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
 },
});

// screens/ProfileScreen.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const ProfileScreen = () => (
 <View style={styles.container}>
   <Text>Profile Screen</Text>
 </View>
);

export default ProfileScreen;

const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
 },
});

// screens/SettingsScreen.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const SettingsScreen = () => (
 <View style={styles.container}>
   <Text>Settings Screen</Text>
 </View>
);
export default SettingsScreen;
const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
 },
});

// navigation/StackNavigator.tsx
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import { RootStackParamList } from './types';

import HomeScreen from '../screens/HomeScreen';
import DetailsScreen from '../screens/DetailsScreen';

const Stack = createNativeStackNavigator<RootStackParamList>();

function StackNavigator() {
 return (
   <Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown: false }}>
     <Stack.Screen name="Home" component={HomeScreen} />
     <Stack.Screen name="Details" component={DetailsScreen} />
   </Stack.Navigator>
 );
}

export default StackNavigator;

// navigation/TabNavigator.tsx
import React from 'react';
import { Ionicons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import ProfileScreen from '../screens/ProfileScreen';
import SettingsScreen from '../screens/SettingsScreen';

import { RootTabParamList } from './types';

const Tab = createBottomTabNavigator<RootTabParamList>();

function TabNavigator() {
 return (
   <Tab.Navigator initialRouteName="Profile" screenOptions={{ headerShown: false }}>
     <Tab.Screen
       name="Profile"
       component={ProfileScreen}
       options={{
         tabBarIcon: ({ color, size }) => (
           <Ionicons name="person" size={size} color={color} />
         ),
       }}
     />
     <Tab.Screen
       name="Settings"
       component={SettingsScreen}
       options={{
         tabBarIcon: ({ color, size }) => (
           <Ionicons name="settings" size={size} color={color} />
         ),
       }}
     />
   </Tab.Navigator>
 );
}

export default TabNavigator;

// navigation/MainNavigator.tsx
import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';

import { RootDrawerParamList } from './types';

import StackNavigator from './StackNavigator';
import TabNavigator from './TabNavigator';

const Drawer = createDrawerNavigator<RootDrawerParamList>();

function MainNavigator() {
 return (
   <Drawer.Navigator>
     <Drawer.Screen name="Stack" component={StackNavigator} />
     <Drawer.Screen name="Tabs" component={TabNavigator} />
   </Drawer.Navigator>
 );
}

export default MainNavigator;

// App.tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { StatusBar } from 'expo-status-bar';
import MainNavigator from './navigation/MainNavigator';
export default function App() {
 return (
   <NavigationContainer>
     <StatusBar style="auto" />
     <MainNavigator />
   </NavigationContainer>
 );
}