How To Create A Bottom Tab Navigator In React Native

Install Following Package :
1.@react-navigation/bottom-tabs: This package provides a tab-based navigation component for React Native applications using the React Navigation library. It allows you to easily create a bottom tab bar for navigating between different screens in your app.

2.@react-navigation/native: This package is a core part of the React Navigation library for React Native applications. It provides essential navigation functionalities, such as stack navigation, drawer navigation, and more. It serves as the foundation for building navigation flows within your React Native app.

3.react-native-safe-area-context: This package helps you handle safe area insets in your React Native application. Safe areas are the areas of the screen that are guaranteed not to be obstructed by system UI elements, such as the status bar, navigation bar, or notch. This package provides a context API for determining safe area insets, which you can use to ensure that your UI elements are properly positioned and not hidden by system UI.

4.react-native-screens: This package provides a set of native components for managing screens in React Native applications. It is optimized for performance and memory usage, especially for applications with many screens. By using native components for rendering screens, it can help improve the overall performance and responsiveness of your React Native app.

Install each of these packages using npm

npm install @react-navigation/bottom-tabs@^6.5.20
npm install @react-navigation/native@^6.1.17
npm install react-native-safe-area-context@^4.10.1
npm install react-native-screens@^3.31.1

If you prefer using Yarn, you can use the following commands instead:

yarn add @react-navigation/bottom-tabs@^6.5.20
yarn add @react-navigation/native@^6.1.17
yarn add react-native-safe-area-context@^4.10.1
yarn add react-native-screens@^3.31.1