Add stack&bottom-tab navigation to App&move out closeDB&notifications

components/app.js

@@ -1,71 +1,82 @@
-import React, { useState, useEffect } from 'react'
-import { BackHandler, StyleSheet, View } from 'react-native'
-import PropTypes from 'prop-types'
-
-import { LocalDate } from '@js-joda/core'
+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 Menu from './menu'
-import { viewsList } from './views'
-import { pages } from './pages'
 
-import setupNotifications from '../lib/notifications'
-import { closeDb } from '../db'
+import { Colors, Fonts, Sizes } from '../styles'
 
-const App = ({ restartApp }) => {
-  const [date, setDate] = useState(LocalDate.now().toString())
-  const [currentPage, setCurrentPage] = useState('Home')
-  const goBack = () => {
-    if (currentPage === 'Home') {
-      closeDb()
-      BackHandler.exitApp()
-    } else {
-      const { parent } = pages.find((p) => p.component === currentPage)
-
-      setCurrentPage(parent)
-    }
-
-    return true
-  }
-
-  useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      goBack
-    )
-
-    return () => backHandler.remove()
-  })
-
-  useEffect(() => setupNotifications(setCurrentPage, setDate), [])
-
-  const Page = viewsList[currentPage]
-  const isTemperatureEditView = currentPage === 'TemperatureEditView'
-  const headerProps = { navigate: setCurrentPage }
-  const pageProps = {
-    date,
-    setDate,
-    isTemperatureEditView,
-    navigate: setCurrentPage,
-  }
+const HomeStack = createStackNavigator()
 
+function HomeStackScreen() {
   return (
-    <View style={styles.container}>
-      <Header {...headerProps} />
-      <Page {...pageProps} restartApp={restartApp} />
-      <Menu currentPage={currentPage} navigate={setCurrentPage} />
-    </View>
+    <HomeStack.Navigator screenOptions={{ headerShown: false }}>
+      <HomeStack.Screen name="Home" component={Home} />
+      <HomeStack.Screen name="CycleDayOverview" component={CycleDayOverview} />
+    </HomeStack.Navigator>
   )
 }
 
-App.propTypes = {
-  restartApp: PropTypes.func,
+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