update: bottom tab navigator

Navigations/BottomTab.js

-// // import React from 'react';
+import React, { useState, useEffect } from "react";
+import {
+  StyleSheet,
+  Button,
+  TextInput,
+  View,
+  Text,
+  TouchableOpacity,
+  ImageBackground,
+} from "react-native";
+import { Entypo } from "@expo/vector-icons";
+import {
+    AntDesign,
+    MaterialCommunityIcons,
+    Ionicons,
+  } from "@expo/vector-icons";
+  import { MaterialIcons } from '@expo/vector-icons';
+  import { gamification } from "../screen/gamification";
+  import { useNavigation } from '@react-navigation/native';
 
-// // import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
-// // import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+export function BottomTab() {
+    const navigation = useNavigation(); 
+    return(
+        <View style={styles.bottomBtn}>
+            <TouchableOpacity style={styles.barButtonView}
+             onPress={() => navigation.navigate("gamification")}
+             >
+            <Ionicons name="game-controller" size={24} color="black" />
+                <Text>Gamification</Text>
+            </TouchableOpacity>
 
-// // import { HomeScreen } from "../screen/HomeScreen";
 
+            <TouchableOpacity style={styles.barButtonView}
+             onPress={() => navigation.navigate("gamification")}
+            >
+            <Ionicons name="hardware-chip-sharp" size={24} color="black" />
+                <Text>IOT</Text>
+            </TouchableOpacity>
 
-// // const Tab = createMaterialBottomTabNavigator();
 
-// // export function BottomTab() {
-// //   return (
+            <TouchableOpacity style={styles.barButtonView}
+                onPress={() => navigation.navigate("Leaderboard")}
+            >
+            <MaterialIcons name="leaderboard" size={24} color="black" />
+                <Text>Leaderboard</Text>
+            </TouchableOpacity>
 
-// //     <Tab.Navigator
-// //       initialRouteName="HomeScreen"
-// //       screenOptions={{
-// //           tabBarActiveTintColor: '#e91e63',
-// //         }}
-// //         >
-// //       <Tab.Screen
-// //         name="HomeScreen"
-// //         component={HomeScreen}
-// //         options={{
-// //             tabBarLabel: 'Home',
-// //             tabBarIcon: ({ color, size }) => (
-// //                 <MaterialCommunityIcons name="home" color={color} size={size} />
-// //                 ),
-// //             }}
-// //             />
-// //     </Tab.Navigator>
-// //   );
-// // }
-// import React from 'react';
-// import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
-// import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
+            <TouchableOpacity style={styles.barButtonView}
+             onPress={() => navigation.navigate("gamification")}
+            >
+            <Ionicons name="hardware-chip-sharp" size={24} color="black" />
+                <Text>Auction</Text>
+            </TouchableOpacity>
 
-// // import { gamification } from '../screen/gamification';
-// // import { Leaderboard } from '../screen/Leaderboard';
-// import  PriceScreen  from '../screen/PriceScreen';
 
-// const Tab = createMaterialBottomTabNavigator();
+            <TouchableOpacity style={styles.barButtonView}
+             onPress={() => navigation.navigate("HomeScreen")}
+            >
+            <Ionicons name="home" size={24} color="black" />
+                <Text>Home</Text>
+            </TouchableOpacity>
+        </View>
+    );
+}
 
-// export function MyTabs() {
-//   return (
-//     <Tab.Navigator
-//       initialRouteName="Feed"
-//       activeColor="#e91e63"
-//       barStyle={{ backgroundColor: 'tomato' }}
-//     >
-//      <Tab.Screen
-//         name="Feed"
-//         component={Feed}
-//         options={{
-//           tabBarLabel: 'Home',
-//           tabBarIcon: ({ color }) => (
-//             <MaterialCommunityIcons name="home" color={color} size={26} />
-//           ),
-//         }}
-//       />
-//       {/* <Tab.Screen
-//         name="PriceScreen"
-//         component={PriceScreen}
-//         options={{
-//           tabBarLabel: 'Updates',
-//           tabBarIcon: ({ color }) => (
-//             <MaterialCommunityIcons name="bell" color={color} size={26} />
-//           ),
-//         }}
-//       /> */}
-//       {/* <Tab.Screen
-//         name="gamification"
-//         component={gamification}
-//         options={{
-//           tabBarLabel: 'Profile',
-//           tabBarIcon: ({ color }) => (
-//             <MaterialCommunityIcons name="account" color={color} size={26} />
-//           ),
-//         }}
-//       /> */}
-//     </Tab.Navigator>
-//   );
-// }
\ No newline at end of file
+const styles = StyleSheet.create({
+
+    bottomBtn:{
+        width:"100%",
+        height:60,
+        flexDirection:"row",
+        justifyContent:"space-between",
+        padding:15,
+        backgroundColor:"white",
+        alignItems:"center"
+
+    },
+    barButtonView:{
+        marginTop:5,
+        flexDirection:"column",
+        alignItems:"center"
+    }
+
+})
\ No newline at end of file

screen/HomeScreen.js

@@ -19,7 +19,7 @@ import {
 } from "@expo/vector-icons";
 import { MaterialIcons } from "@expo/vector-icons";
 import { gamification } from "./gamification";
-// import {MyTabs} from '../Navigations/BottomTab'
+import { BottomTab } from "../Navigations/BottomTab";
 // import BottomTab from "../Navigations/BottomTab";
 export function HomeScreen({ navigation }) {
   //to diable the yellow box warning on the simulator
@@ -32,7 +32,7 @@ export function HomeScreen({ navigation }) {
         style={styles.images}
       >
         <ImageSliderz
-          height={450}
+          height={400}
           dataSource={[
             {
               url: require("../assets/d.jpg"),
@@ -97,8 +97,8 @@ export function HomeScreen({ navigation }) {
       <Text style={styles.heading1}>Build to Empower Entrepreneurs</Text> */}
         <Text style={styles.heading2}>All Right Reserved.</Text>
 
+      <BottomTab/>
       </ImageBackground>
-      {/* <MyTabs/> */}
     </View>
   );
 }

screen/Leaderboard.js

@@ -25,7 +25,8 @@ export function Leaderboard({ navigation, data }) {
 
     return (
             
-        // <ImageBackground source={require('../assets/agri.jpg')} style={styles.images}>
+        // <ImageBackground source={require('../assets/agri.jpg')} style={styles.images}>\
+        
             <ScrollView style={styles.container}>
                 {/* <ImageBackground source={require('../assets/gamification.jpg')} style={styles.images}> */}
 

screen/PriceScreen.js

@@ -17,6 +17,7 @@ import { AntDesign } from "@expo/vector-icons";
 import { SignIn } from "./SignIn";
 
 import axios from "axios";
+import { BottomTab } from "../Navigations/BottomTab";
 
 export function PriceScreen({ navigation, data }) {
   const [details, setDetails] = useState({
@@ -240,6 +241,10 @@ export function PriceScreen({ navigation, data }) {
             </View>
           </View>
         </View>
+        <View style={styles.bottom}>
+      <BottomTab/>
+
+        </View>
       </ImageBackground>
     </View>
   );
@@ -295,6 +300,7 @@ const styles = StyleSheet.create({
   },
   secondContainer: {
     justifyContent: "flex-start",
+    marginTop:65
   },
   textinputicon: {
     // flex: 1,
@@ -353,4 +359,8 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     borderRadius: 8,
   },
+  bottom:{
+    justifyContent:"flex-end",
+    marginTop:90
+  }
 });

screen/gamification.js

@@ -7,6 +7,7 @@ import {StyleSheet, View, Text, SafeAreaView, TouchableOpacity, TextInput, Image
 import { Formik } from 'formik';
 import { FontAwesome } from '@expo/vector-icons';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { BottomTab } from "../Navigations/BottomTab";
 
 
 export function  gamification ({navigation}) {
@@ -66,6 +67,7 @@ export function  gamification ({navigation}) {
           </View>
         )}
       </Formik>
+     <BottomTab/>
      </ImageBackground>
     </SafeAreaView>
   );