added navigation bottom for the home screen

Author: Kartikeyyadav7

android/app/build.gradle

@@ -1,5 +1,4 @@
 apply plugin: "com.android.application"
-apply plugin: 'com.google.gms.google-services' 
 
 import com.android.build.OutputFile
 
@@ -221,3 +220,4 @@ task copyDownloadableDepsToLibs(type: Copy) {
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply plugin: 'com.google.gms.google-services' 

android/build.gradle

@@ -7,6 +7,7 @@ buildscript {
         compileSdkVersion = 29
         targetSdkVersion = 29
         ndkVersion = "20.1.5948944"
+        googlePlayServicesAuthVersion = "16.0.1" 
     }
     repositories {
         google()

navigation/AppStack.tsx

@@ -1,29 +1,63 @@
 import React from "react";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import { AppParamList } from "../types/AppParamList";
-import HomeScreen from "../screens/HomeScreen";
+import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
+import MaterialIcons from "react-native-vector-icons/MaterialIcons";
+import BookmarkScreen from "../screens/BookmarkScreen";
+import ExploreScreen from "../screens/ExploreScreen";
 
-interface AppStackProps {}
+import HomeScreen from "../screens/HomeScreen";
+import ProfileScreen from "../screens/ProfileScreen";
 
-const Stack = createNativeStackNavigator<AppParamList>();
+const Tab = createMaterialBottomTabNavigator();
 
-const AppStack: React.FC<AppStackProps> = ({}) => {
+function AppStack() {
 	return (
-		<Stack.Navigator
-			screenOptions={{
-				header: () => null,
-			}}
-			initialRouteName="HomeScreen"
+		<Tab.Navigator
+			initialRouteName="Home"
+			activeColor="#000"
+			barStyle={{ backgroundColor: "white" }}
 		>
-			<Stack.Screen
-				// options={{
-				//   headerTitle: "Sign In"
-				// }}
-				name="HomeScreen"
+			<Tab.Screen
+				name="Home"
 				component={HomeScreen}
+				options={{
+					tabBarLabel: "Home",
+					tabBarIcon: ({ color }) => (
+						<MaterialIcons name="home" color={color} size={26} />
+					),
+				}}
+			/>
+			<Tab.Screen
+				name="Search"
+				component={ExploreScreen}
+				options={{
+					tabBarLabel: "Search",
+					tabBarIcon: ({ color }) => (
+						<MaterialIcons name="search" color={color} size={26} />
+					),
+				}}
+			/>
+			<Tab.Screen
+				name="BookMark"
+				component={BookmarkScreen}
+				options={{
+					tabBarLabel: "Bookmarks",
+					tabBarIcon: ({ color }) => (
+						<MaterialIcons name="bookmark-border" color={color} size={26} />
+					),
+				}}
+			/>
+			<Tab.Screen
+				name="Profile"
+				component={ProfileScreen}
+				options={{
+					tabBarLabel: "Profile",
+					tabBarIcon: ({ color }) => (
+						<MaterialIcons name="person" color={color} size={26} />
+					),
+				}}
 			/>
-		</Stack.Navigator>
+		</Tab.Navigator>
 	);
-};
+}
 
 export default AppStack;

navigation/AuthStack.tsx

@@ -1,14 +1,22 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { AuthParamList } from "../types/AuthParamList";
 import LoginScreen from "../screens/LoginScreen";
 import SignupScreen from "../screens/SignupScreen";
+import { GoogleSignin } from "@react-native-google-signin/google-signin";
+import { NavigationContainer } from "@react-navigation/native";
 
 interface AuthStackProps {}
 
 const Stack = createNativeStackNavigator<AuthParamList>();
 
 const AuthStack: React.FC<AuthStackProps> = ({}) => {
+	useEffect(() => {
+		GoogleSignin.configure({
+			webClientId:
+				"117683662084-1r32h7r8jm18gno47q727m40cnp5qfed.apps.googleusercontent.com",
+		});
+	}, []);
 	return (
 		<Stack.Navigator
 			screenOptions={{

navigation/Routes.tsx

@@ -25,6 +25,7 @@ const Routes = () => {
 	return (
 		<NavigationContainer>
 			{state.user ? <AppStack /> : <AuthStack />}
+			{/* <AuthStack /> */}
 		</NavigationContainer>
 	);
 };