MariaZ
83 lines
2.4 KiB
JavaScript
83 lines
2.4 KiB
JavaScript
import React from 'react'
|
|
import 'react-native-gesture-handler'
|
|
import { StyleSheet, Text } from 'react-native'
|
|
import { NavigationContainer } from '@react-navigation/native'
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
|
|
import { createStackNavigator } from '@react-navigation/stack'
|
|
|
|
import Home from './Home'
|
|
import Chart from './chart/chart'
|
|
import CalendarView from './calendar'
|
|
import CycleDayOverview from './cycle-day/cycle-day-overview'
|
|
import Stats from './stats'
|
|
import Icon from './common/menu-icon'
|
|
import Header from './header'
|
|
|
|
import { Colors, Fonts, Sizes } from '../styles'
|
|
|
|
const HomeStack = createStackNavigator()
|
|
|
|
function HomeStackScreen() {
|
|
return (
|
|
<HomeStack.Navigator screenOptions={{ headerShown: false }}>
|
|
<HomeStack.Screen name="Home" component={Home} />
|
|
<HomeStack.Screen name="CycleDayOverview" component={CycleDayOverview} />
|
|
</HomeStack.Navigator>
|
|
)
|
|
}
|
|
|
|
const Tab = createBottomTabNavigator()
|
|
|
|
const App = () => {
|
|
return (
|
|
<NavigationContainer>
|
|
<Tab.Navigator
|
|
screenOptions={({ route }) => ({
|
|
header: ({ navigation }) => <Header navigation={navigation} />,
|
|
tabBarIcon: ({ focused }) => {
|
|
let icon = 'chart'
|
|
|
|
if (route.name === 'CalendarStackScreen') {
|
|
icon = 'calendar'
|
|
} else if (route.name === 'Stats') {
|
|
icon = 'statistics'
|
|
}
|
|
|
|
return <Icon name={icon} isActive={focused} />
|
|
},
|
|
tabBarLabel: ({ color }) => {
|
|
return (
|
|
<Text style={[styles.text, { color: color }]}>{route.name}</Text>
|
|
)
|
|
},
|
|
tabBarActiveTintColor: Colors.orange,
|
|
tabBarInactiveTintColor: Colors.grey,
|
|
tabBarStyle: { height: 80 },
|
|
})}
|
|
>
|
|
<Tab.Screen
|
|
name="HomeStackScreen"
|
|
component={HomeStackScreen}
|
|
options={{ tabBarButton: () => null, tabBarVisible: false }}
|
|
/>
|
|
<Tab.Screen name="Calendar" component={CalendarView} />
|
|
<Tab.Screen name="Chart" component={Chart} />
|
|
<Tab.Screen name="Stats" component={Stats} />
|
|
</Tab.Navigator>
|
|
</NavigationContainer>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
text: {
|
|
fontFamily: Fonts.bold,
|
|
fontSize: Sizes.small,
|
|
textTransform: 'uppercase',
|
|
},
|
|
})
|
|
|
|
export default App
|