-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
118 lines (90 loc) · 3.25 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
112
113
114
115
116
117
118
import React,{useRef, useState, useEffect} from 'react';
import {StyleSheet ,TextInput, Text, Alert, View, Image, SafeAreaView, Button, Dimensions} from 'react-native';
import {
useFonts,
Inter_900Black,
Inter_400Regular,
Inter_300Light,
Inter_600SemiBold,
} from '@expo-google-fonts/inter';
import { MaterialIcons, Feather } from '@expo/vector-icons';
import { NavigationContainer } from '@react-navigation/native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Splasher from './components/parts/Splasher';
import Homer from './components/pages/Homer';
import Schedule from './components/pages/Schedule';
import Settings from './components/pages/Settings';
import { defaultConsts } from './assets/GlobalStyle';
import useToggleSwitch from './hooks/useToggleSwitch';
import AsyncStorage from '@react-native-async-storage/async-storage';
import useIpAddress from './hooks/useIpAddress';
const Tab = createBottomTabNavigator();
function TheTabs({GlobalState}){
const {toggleValue, setToggleValue, baseURI, setBaseURI} = GlobalState;
return (
<Tab.Navigator
screenOptions={({route}) => ({
headerShown: false,
tabBarShowLabel: false,
tabBarStyle: {borderTopWidth: 0,backgroundColor : toggleValue === "closed" ? defaultConsts.darkPrimary : defaultConsts.lightPrimary},
// tabBarLabelStyle: {fontFamily: 'Inter_400Regular',fontSize: 12 , color: toggleValue === "closed" ? defaultConsts.darkFont : defaultConsts.compOrange},
tabBarIcon:({ focused, color, size}) =>{
let iconName;
if (route.name === 'switch'){
iconName = 'toggle-left'
}else if(route.name === 'schedule'){
iconName = 'calendar'
}else{
iconName = 'settings'
}
return <View style={[{opacity: focused ? .8 : .3}]}><Feather name={iconName} size={focused ? 28: 22} color={toggleValue === "closed"? defaultConsts.darkFont : defaultConsts.compOrange} /></View>
},
})}>
<Tab.Screen
name="switch"
options
>
{props => <Homer {...props} GlobalState={GlobalState}/>}
</Tab.Screen>
<Tab.Screen
name="schedule"
options
>
{props => <Schedule {...props} GlobalState={GlobalState}/>}
</Tab.Screen>
<Tab.Screen
name="settings"
options
>
{props => <Settings {...props} GlobalState={GlobalState}/>}
</Tab.Screen>
</Tab.Navigator>
)
}
const App = () => {
let [fontsLoaded] = useFonts({
Inter_900Black,
Inter_400Regular,
Inter_300Light,
Inter_600SemiBold,
});
const {baseURI, setBaseURI, locUI, saveIp} = useIpAddress();
const {toggleValue, setToggleValue, checkSavedToggle, saveToggle}= useToggleSwitch(null)
const GlobalState = {
saveIp, toggleValue, setToggleValue, baseURI, setBaseURI, saveToggle, checkSavedToggle, locUI
}
return (
<SafeAreaProvider>
{
!fontsLoaded || !toggleValue ?
<Splasher />
:
<NavigationContainer>
<TheTabs GlobalState={GlobalState}/>
</NavigationContainer>
}
</SafeAreaProvider>
)
}
export default App;