update: bottom tab navigator

parent 4288cc2d
// // 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
......@@ -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>
);
}
......
......@@ -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}> */}
......
......@@ -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
}
});
......@@ -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>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment