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

components/app-wrapper.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 
 import { getLicenseFlag, saveEncryptionFlag } from '../local-storage'
-import { openDb } from '../db'
+import { closeDb, openDb } from '../db'
 
 import App from './app'
 import AppLoadingView from './common/app-loading'
@@ -29,6 +29,8 @@ export default function AppWrapper() {
   useEffect(() => {
     checkIsLicenseAccepted()
     checkIsDbEncrypted()
+
+    return () => closeDb()
   }, [])
 
   if (isLoading) {

components/app.js

@@ -1,71 +1,82 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
-import { BackHandler, StyleSheet, View } from 'react-native'
+import 'react-native-gesture-handler'
-import PropTypes from 'prop-types'
+import { StyleSheet, Text } from 'react-native'
-
+import { NavigationContainer } from '@react-navigation/native'
-import { LocalDate } from '@js-joda/core'
+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 { Colors, Fonts, Sizes } from '../styles'
-import { closeDb } from '../db'
 
-const App = ({ restartApp }) => {
+const HomeStack = createStackNavigator()
-  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,
-  }
 
+function HomeStackScreen() {
   return (
-    <View style={styles.container}>
+    <HomeStack.Navigator screenOptions={{ headerShown: false }}>
-      <Header {...headerProps} />
+      <HomeStack.Screen name="Home" component={Home} />
-      <Page {...pageProps} restartApp={restartApp} />
+      <HomeStack.Screen name="CycleDayOverview" component={CycleDayOverview} />
-      <Menu currentPage={currentPage} navigate={setCurrentPage} />
+    </HomeStack.Navigator>
-    </View>
   )
 }
 
-App.propTypes = {
+const Tab = createBottomTabNavigator()
-  restartApp: PropTypes.func,
+
+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

components/header/index.js

@@ -7,17 +7,17 @@ import HamburgerMenu from './hamburger-menu'
 
 import { Colors, Containers, Sizes } from '../../styles'
 
-const Header = ({ isStatic, navigate }) => {
+const Header = ({ isStatic, navigation }) => {
   return (
     <View style={styles.header}>
       {isStatic ? (
         <Logo />
       ) : (
         <>
-          <TouchableOpacity onPress={() => navigate('Home')}>
+          <TouchableOpacity onPress={() => navigation.navigate('Home')}>
             <Logo />
           </TouchableOpacity>
-          <HamburgerMenu navigate={navigate} />
+          <HamburgerMenu navigate={navigation.navigate} />
         </>
       )}
     </View>
@@ -26,7 +26,9 @@ const Header = ({ isStatic, navigate }) => {
 
 Header.propTypes = {
   isStatic: PropTypes.bool,
-  navigate: PropTypes.func,
+  navigation: PropTypes.shape({
+    navigate: PropTypes.func.isRequired,
+  }).isRequired,
 }
 
 Header.defaultProps = {

components/menu/index.js

@@ -1,42 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import PropTypes from 'prop-types'
-
-import MenuItem from './menu-item'
-
-import { Containers } from '../../styles'
-import { pages } from '../pages'
-
-const Menu = ({ currentPage, navigate }) => {
-  const menuItems = pages.filter((page) => page.isInMenu)
-
-  return (
-    <View style={styles.container}>
-      {menuItems.map(({ icon, label, component }) => {
-        return (
-          <MenuItem
-            isActive={component === currentPage}
-            onPress={() => navigate(component)}
-            icon={icon}
-            key={label}
-            label={label}
-          />
-        )
-      })}
-    </View>
-  )
-}
-
-Menu.propTypes = {
-  currentPage: PropTypes.string,
-  navigate: PropTypes.func,
-}
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'white',
-    ...Containers.rowContainer,
-  },
-})
-
-export default Menu

lib/notifications.js

@@ -11,16 +11,15 @@ import { getBleedingDaysSortedByDate } from '../db'
 import cycleModule from './cycle'
 import nothingChanged from '../db/db-unchanged'
 
-export default function setupNotifications(navigate, setDate) {
+export default function setupNotifications(navigation) {
   Notification.configure({
     onNotification: (notification) => {
+      const date = LocalDate.now().toString()
       // https://github.com/zo0r/react-native-push-notification/issues/966#issuecomment-479069106
       if (notification.data?.id === '1' || notification.id === '1') {
-        const todayDate = LocalDate.now().toString()
+        navigation.navigate('TemperatureEditView', { date })
-        setDate(todayDate)
-        navigate('TemperatureEditView')
       } else {
-        navigate('Home')
+        navigation.navigate('Home', { date })
       }
     },
   })