React Native Navigation

Navigation is a fundamental part of any mobile application. In React Native, implementing footer navigation (also known as tab navigation) can greatly enhance the user experience by providing easy access to different sections of your app. This blog will guide you through the basics of setting up footer navigation in a application using react-navigation and react-native-paper.

Why Footer Navigation?

Users may navigate between the main areas of an app with ease using the footer navigation, which is usually located at the bottom of the screen. It is frequently utilised in a wide range of well-known apps, like Facebook, Instagram, and Twitter, to offer a dependable and user-friendly navigation experience.

Prerequisites

Before we begin, ensure you have the following:

• Node.js installed
• React Native environment set up (use the official guide if needed)

Step 1: Create a New Project

First, create a new project using the CLI:

npx react-native init FooterNavigationApp
cd FooterNavigationApp

Step 2: Install Required Dependencies

We will use react-navigation for navigation and react-native-paper for UI components.

npm install @react-navigation/native @react-navigation/bottom-tabs react-native-paper
npm install react-native-screens react-native-safe-area-context

Step 3: Set Up Navigation

Create a basic navigation setup in your project. Start by configuring the navigation container.

// App.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Provider as PaperProvider } from 'react-native-paper';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <PaperProvider>
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen name="Settings" component={SettingsScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
};

export default App;

Step 4: Create Screen Components

Create simple screen components for Home and Settings.

// screens/HomeScreen.js
import * as React from 'react';
import { View, Text } from 'react-native';

const HomeScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
};

export default HomeScreen;

// screens/SettingsScreen.js
import * as React from 'react';
import { View, Text } from 'react-native';

const SettingsScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings Screen</Text>
    </View>
  );
};

export default SettingsScreen;

Step 5: Run Your Application

Finally, run your application to see the footer navigation in action.

npx react-native run-android
# or
npx react-native run-ios

Conclusion

Using react-navigation and react-native-paper, you have now configured a rudimentary footer navigation system in a application. This configuration offers an intuitive user experience and makes it simple to navigate between the various sections of your program. Additional screens can be added as needed, and the navigation can be further customised.

Implementing footer navigation is simple with React Native, making it a potent tool for improving user experience. Have fun with coding!

To learn more about navigation, read this blog Exploring Navigation in React Native: A Comprehensive Guide.

Finally, for more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency.