-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
102 lines (90 loc) · 2.8 KB
/
App.tsx
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
import React, { useEffect } from 'react';
import { View , StatusBar, Dimensions } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import * as NavigationBar from 'expo-navigation-bar';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Home from './src/screens/Home';
import Library from './src/screens/Library';
import Settings from './src/screens/Settings';
import TabComponent from './src/components/Tab'
import Search from './src/screens/Search';
import PlayerLayout from './src/components/PlayerLayout';
import { PlayerProvider } from './src/context/PlayerContext';
import { initSetupPlayer } from './Services';
const Tab = createBottomTabNavigator();
const ScreenHeight = Dimensions.get("screen").height - Dimensions.get("window").height;
function App() {
useEffect(() => {
initSetupPlayer();
NavigationBar.setPositionAsync('absolute');
NavigationBar.setBackgroundColorAsync('#00000000');
StatusBar.setTranslucent(true);
StatusBar.setBackgroundColor('transparent');
StatusBar.setBarStyle('light-content', true);
}, []);
return (
<View style={{ flex: 1, backgroundColor: '#262639' }}>
<PlayerProvider>
<AppContent/>
</PlayerProvider>
</View>);
}
function AppContent(){
return (
<NavigationContainer>
<PlayerLayout/>
<Tab.Navigator
screenOptions={{
headerShown: false,
tabBarStyle: {
position: 'absolute',
bottom: 0,
flex: 1,
alignItems: 'center',
paddingTop: 0,
width: '100%',
height: ScreenHeight + 23,
backgroundColor: '#262639',
borderTopWidth: 0,
shadowOpacity: 0,
elevation: 0,
}
}}>
<Tab.Screen
name="Home"
component={Home}
options={createTabOptions('home-outline', 'home', 'home')}/>
<Tab.Screen
name="Search"
component={Search}
options={createTabOptions('search-outline', 'search-sharp', 'search')}/>
<Tab.Screen
name="Library"
component={Library}
options={createTabOptions('podium-outline', 'podium', 'library')}/>
<Tab.Screen
name="Settings"
component={Settings}
options={createTabOptions('settings-outline', 'settings', 'settings')}/>
</Tab.Navigator>
</NavigationContainer>
)
}
type TabOptions = {
tabBarButton: (props: any) => JSX.Element;
};
const createTabOptions = (
unfocusedIcon: string,
focusedIcon: string,
label: string
): TabOptions => ({
tabBarButton: (props) => (
<TabComponent
unfocusedIcon={unfocusedIcon}
focusedIcon={focusedIcon}
label={label}
{...props}
/>
),
});
export default App