React Native: Add BottomTab Component in React Navigation

Question

I am new in react-native and i want to integrate bottomtab to existing code.

The below code is a simple app which contain two screens Home and Settings. For Navigation, I am using React Navigation library.

But my question is how can i integrate bottomTab to the below existing code.

Please find the code below.

App.js

import React from "react";
import { StyleSheet, SafeAreaView, StatusBar, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import MyStacks from "./src/routes/MyStacks";
import { openDatabase } from "react-native-sqlite-storage";
import { createStackNavigator } from "@react-navigation/stack";

const Stack = createStackNavigator()

const Home = () => {
    return (
        <Text>Home Screen</Text>
    );
}

const Settings = () => {
    return (
        <Text>Settings Screen</Text>
    );
}

const App = () => {
    
    return (
        <SafeAreaView style={styles.container}>
          <NavigationContainer>
            <StatusBar barStyle="light-content" backgroundColor="#11998e" />
            <Stack.Navigator screenOptions={{ headerShown: false }}>
                <Stack.Screen name="Home" component={Home} />
                <Stack.Screen name="Settings" component={Settings} />
            </Stack.Navigator>
          </NavigationContainer>
        </SafeAreaView>
    );
}

export default App;

Package.json

{
  "name": "SimpleApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native link && react-native run-android",
    "installReleaseAPK": "react-native run-android --variant=release",
    "ios": "react-native run-ios",
    "start": "react-native start --reset-cache",
    "test": "jest",
    "lint": "eslint .",
    "export": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ && cd android && ./gradlew assembleDebug"
  },
  "dependencies": {
    "@react-native-picker/picker": "^2.2.1",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-gesture-handler": "^2.1.0",
    "react-native-ionicons": "^4.6.5",
    "react-native-neat-date-picker": "^1.1.4",
    "react-native-qrcode-svg": "^6.1.2",
    "react-native-raw-bottom-sheet": "^2.2.0",
    "react-native-safe-area": "^0.5.1",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1",
    "react-native-sqlite-storage": "^6.0.1",
    "react-native-svg": "^12.1.1",
    "react-native-vector-icons": "^9.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

Please Help me on this issue

Answer 1

You need to use nested navigators. This is an example from the official documentation doing exactly what you want:

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Nesting navigators means rendering a navigator inside a screen of another navigator

Answer 2

You can use Tab navigation, you need just to change your Stack.Navigation for Tab.navigation