-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
112 lines (108 loc) · 3.63 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import {Home, CuciAjaScreen, Login, Register,HomeStack} from "./Screens/Index";
import { View ,Text, Platform} from "react-native";
import { Entypo } from '@expo/vector-icons';
export default function App() {
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const screenOptions = {
tabBarShowLabel : false,
headerShown: false,
tabBarStyle: {
position: "absolute",
bottom: 0,
left: 0,
right: 0,
backgroundColor: "#fff",
elevation: 0,
height: 60,
}
}
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName="Login">
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="CuciAjaScreen" component={CuciAjaScreen} />
<Stack.Screen name="Login" component={Login}/>
<Stack.Screen name="Register" component={Register}/>
</Stack.Navigator>
</NavigationContainer>
);
function Root() {
return (
<Tab.Navigator screenOptions={screenOptions}>
<Tab.Screen
name="Login"
component={Login}
options={{
tabBarIcon: ({focused}) => {
return (
<View style={{alignItems: 'center', justifyContent: 'center'}}>
<Entypo name="home" size={24} color={focused ? "black" : "grey"}/>
<Text style={{color: focused ? "black" : "grey", fontSize: 12}}>Login</Text>
</View>
)
}
}}/>
<Tab.Screen
name="Register"
component={Register}
options={{
tabBarIcon: ({focused}) => {
return (
<View style={{alignItems: 'center', justifyContent: 'center'}}>
<Entypo name="home" size={24} color={focused ? "black" : "grey"}/>
<Text style={{color: focused ? "black" : "grey" , fontSize: 12}}>Login</Text>
</View>
)
}
}}
/>
<Tab.Screen
name="HomeStack"
component={HomeStack}
options={{
tabBarIcon: ({focused}) => {
return (
<View style={{alignItems: 'center', justifyContent: 'center',backgroundColor:'blue', width: Platform.OS === 'ios' ? 60 : 60, height: Platform.OS === 'ios' ? 60 : 60 , top: Platform.OS === 'ios' ? -10 : -20, borderRadius: Platform.OS === 'ios' ? 25 : 30}}>
<Entypo name="shopping-cart" size={24} color={focused ? "black" : "white"}/>
</View>
)
}
}}/>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({focused}) => {
return (
<View style={{alignItems: 'center', justifyContent: 'center'}}>
<Entypo name="home" size={24} color={focused ? "black" : "grey"}/>
<Text style={{color: focused ? "black" : "grey" , fontSize: 12}}>Home</Text>
</View>
)
}
}}/>
<Tab.Screen
name="CuciAjaScreen"
component={CuciAjaScreen}
options={{
tabBarIcon: ({focused}) => {
return (
<View style={{alignItems: 'center', justifyContent: 'center'}}>
<Entypo name="home" size={24} color={focused ? "black" : "grey"}/>
<Text style={{color: focused ? "black" : "grey", fontSize: 12}}>CuciAja</Text>
</View>
)
}
}}/>
</Tab.Navigator>
);
};
};