Add test checking if StatsTable is shown on button click

.gitignore

@@ -73,6 +73,11 @@ ios/Podfile.lock
 android/app/src/main/res/drawable-*
 android/app/src/main/assets/*
 
+# nodejs-mobile creates these with every npm install
+nodejs-assets/nodejs-project/sample-*
+nodejs-assets/build-native-modules-MacOS-helper-script-node.sh
+nodejs-assets/build-native-modules-MacOS-helper-script-npm.sh
+
 # yarn
 .yarn/*
 yarn-error.log

.gitlab/dependabot.yml

@@ -11,6 +11,7 @@ updates:
       - dependency-name: '*'
         update-types: ['version-update:semver-patch']
       - dependency-name: 'realm'
+      - dependency-name: 'nodejs-mobile-react-native'
       - dependency-name: 'react'
       - dependency-name: 'react-native'
       - dependency-name: 'react-native-push-notifications'

README.md

@@ -50,7 +50,7 @@ Install [Android Studio](https://developer.android.com/studio/) - you'll need it
 
 ### 3.2 More requirements from Android Studio
 
-Open Android Studio and click on "Open an existing Android Studio project". Navigate to the drip repository you cloned and double click the android folder. It detects, downloads and cofigures requirements that might be missing, like the NDK and CMake to build the native code part of the project.
+Open Android Studio and click on "Open an existing Android Studio project". Navigate to the drip repository you cloned and double click the android folder. It detects, downloads and cofigures requirements that might be missing, like the NDK and CMake to build the native code part of the project. Also see the [nodejs-mobile repository](https://github.com/janeasystems/nodejs-mobile) for the necessary prerequisites for your system.
 
 ### 3.3 Run the app on Android
 

android/build.gradle

@@ -5,7 +5,7 @@ buildscript {
         google()
         mavenCentral()
     }
-    ext.kotlinVersion = "1.4.20"
+    ext.kotlinVersion = "1.3.10"
     dependencies {
         classpath("com.android.tools.build:gradle:4.2.2")
 
@@ -31,7 +31,7 @@ allprojects {
             content {
                 excludeGroup "com.facebook.react"
             }
-        }
+        }        
         google()
         maven { url 'https://www.jitpack.io' }
         maven {
@@ -53,5 +53,5 @@ ext {
     minSdkVersion = 23
     compileSdkVersion = 30
     targetSdkVersion = 30
-    ndkVersion = "21.4.7075529"
+    ndkVersion = "21.4.7075529"       
 }

components/Home.js

@@ -1,16 +1,13 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 import moment from 'moment'
 
 import AppText from './common/app-text'
-import Asterisk from './common/Asterisk'
 import Button from './common/button'
-import Footnote from './common/Footnote'
 
 import cycleModule from '../lib/cycle'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
-import setupNotifications from '../lib/notifications'
 import {
   determinePredictionText,
   formatWithOrdinalSuffix,
@@ -20,10 +17,13 @@ import { Colors, Fonts, Sizes, Spacing } from '../styles'
 import { LocalDate } from '@js-joda/core'
 import { useTranslation } from 'react-i18next'
 
-const Home = ({ navigation }) => {
+const Home = ({ navigate, setDate }) => {
   const { t } = useTranslation()
 
-  useEffect(() => setupNotifications(navigation), [])
+  function navigateToCycleDayView() {
+    setDate(todayDateString)
+    navigate('CycleDay')
+  }
 
   const todayDateString = LocalDate.now().toString()
   const { getCycleDayNumber, getPredictedMenses } = cycleModule()
@@ -31,14 +31,11 @@ const Home = ({ navigation }) => {
   const { status, phase, statusText } =
     getFertilityStatusForDay(todayDateString)
   const prediction = determinePredictionText(getPredictedMenses(), t)
+
   const cycleDayText = cycleDayNumber
     ? formatWithOrdinalSuffix(cycleDayNumber)
     : ''
 
-  function navigateToCycleDayView() {
-    navigation.navigate('CycleDayOverview', { date: todayDateString })
-  }
-
   return (
     <ScrollView
       style={styles.container}
@@ -72,12 +69,26 @@ const Home = ({ navigation }) => {
       <Button isCTA isSmall={false} onPress={navigateToCycleDayView}>
         {t('labels.home.addDataForToday')}
       </Button>
-      {phase && <Footnote colorLabel="greyLight">{statusText}</Footnote>}
+      {phase && (
+        <View style={styles.asteriskLine}>
+          <Asterisk />
+          <AppText linkStyle={styles.whiteText} style={styles.greyText}>
+            {statusText}
+          </AppText>
+        </View>
+      )}
     </ScrollView>
   )
 }
 
+const Asterisk = () => {
+  return <AppText style={styles.asterisk}>*</AppText>
+}
+
 const styles = StyleSheet.create({
+  asterisk: {
+    color: Colors.orange,
+  },
   container: {
     backgroundColor: Colors.purple,
     flex: 1,
@@ -93,6 +104,12 @@ const styles = StyleSheet.create({
     marginBottom: Spacing.tiny,
     marginTop: Spacing.small,
   },
+  asteriskLine: {
+    flexDirection: 'row',
+    alignContent: 'flex-start',
+    marginBottom: Spacing.tiny,
+    marginTop: Spacing.small,
+  },
   title: {
     color: Colors.purpleLight,
     fontFamily: Fonts.bold,
@@ -107,12 +124,18 @@ const styles = StyleSheet.create({
     color: 'white',
     fontSize: Sizes.subtitle,
   },
+  whiteText: {
+    color: 'white',
+  },
+  greyText: {
+    color: Colors.greyLight,
+    paddingLeft: Spacing.base,
+  },
 })
 
 Home.propTypes = {
-  navigation: PropTypes.shape({
-    navigate: PropTypes.func.isRequired,
-  }).isRequired,
+  navigate: PropTypes.func,
+  setDate: PropTypes.func,
 }
 
 export default Home

components/app-wrapper.js

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react'
+import nodejs from 'nodejs-mobile-react-native'
 
 import { getLicenseFlag, saveEncryptionFlag } from '../local-storage'
-import { closeDb, openDb } from '../db'
+import { openDb } from '../db'
 
 import App from './app'
 import AppLoadingView from './common/app-loading'
@@ -27,10 +28,9 @@ export default function AppWrapper() {
   }
 
   useEffect(() => {
+    nodejs.start('main.js')
     checkIsLicenseAccepted()
     checkIsDbEncrypted()
-
-    return () => closeDb()
   }, [])
 
   if (isLoading) {

components/app.js

@@ -1,82 +1,71 @@
-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 React, { useState, useEffect } from 'react'
+import { BackHandler, StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import { LocalDate } from '@js-joda/core'
 
-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 { Colors, Fonts, Sizes } from '../styles'
+import setupNotifications from '../lib/notifications'
+import { closeDb } from '../db'
 
-const HomeStack = createStackNavigator()
+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,
+  }
 
-function HomeStackScreen() {
   return (
-    <HomeStack.Navigator screenOptions={{ headerShown: false }}>
-      <HomeStack.Screen name="Home" component={Home} />
-      <HomeStack.Screen name="CycleDayOverview" component={CycleDayOverview} />
-    </HomeStack.Navigator>
+    <View style={styles.container}>
+      <Header {...headerProps} />
+      <Page {...pageProps} restartApp={restartApp} />
+      <Menu currentPage={currentPage} navigate={setCurrentPage} />
+    </View>
   )
 }
 
-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>
-  )
+App.propTypes = {
+  restartApp: PropTypes.func,
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  text: {
-    fontFamily: Fonts.bold,
-    fontSize: Sizes.small,
-    textTransform: 'uppercase',
-  },
 })
 
 export default App

components/calendar.js

@@ -12,12 +12,13 @@ import {
   todayToCalFormat,
 } from './helpers/calendar'
 
-const CalendarView = ({ navigation }) => {
+const CalendarView = ({ setDate, navigate }) => {
   const bleedingDays = getBleedingDaysSortedByDate()
   const predictedMenses = cycleModule().getPredictedMenses()
 
   const passDateToDayView = ({ dateString }) => {
-    navigation.navigate('CycleDayOverview', { date: dateString })
+    setDate(dateString)
+    navigate('CycleDay')
   }
 
   const markedDates = Object.assign(
@@ -48,9 +49,8 @@ const styles = StyleSheet.create({
 })
 
 CalendarView.propTypes = {
-  navigation: PropTypes.shape({
-    navigate: PropTypes.func.isRequired,
-  }).isRequired,
+  setDate: PropTypes.func.isRequired,
+  navigate: PropTypes.func.isRequired,
 }
 
 export default CalendarView

components/chart/chart.js

@@ -28,24 +28,12 @@ import { Spacing } from '../../styles'
 const getSymptomsFromCycleDays = (cycleDays) =>
   SYMPTOMS.filter((symptom) => cycleDays.some((cycleDay) => cycleDay[symptom]))
 
-const CycleChart = ({ navigation }) => {
+const CycleChart = ({ navigate, setDate }) => {
   const [shouldShowHint, setShouldShowHint] = useState(true)
 
-  useEffect(() => {
-    let isMounted = true
-
-    async function checkShouldShowHint() {
-      const flag = await getChartFlag()
-      if (isMounted) {
-        setShouldShowHint(flag === 'true')
-      }
-    }
-
-    checkShouldShowHint()
-
-    return () => {
-      isMounted = false
-    }
+  useEffect(async () => {
+    const flag = await getChartFlag()
+    setShouldShowHint(flag === 'true')
   }, [])
 
   const hideHint = () => {
@@ -84,8 +72,9 @@ const CycleChart = ({ navigation }) => {
   const renderColumn = ({ item }) => {
     return (
       <DayColumn
+        setDate={setDate}
         dateString={item}
-        navigation={navigation}
+        navigate={navigate}
         symptomHeight={symptomHeight}
         columnHeight={columnHeight}
         symptomRowSymptoms={symptomRowSymptoms}
@@ -99,7 +88,7 @@ const CycleChart = ({ navigation }) => {
   const hasDataToDisplay = chartSymptoms.length > 0
 
   if (!hasDataToDisplay) {
-    return <NoData />
+    return <NoData navigate={navigate} />
   }
 
   return (
@@ -134,9 +123,8 @@ const CycleChart = ({ navigation }) => {
 }
 
 CycleChart.propTypes = {
-  navigation: PropTypes.shape({
-    navigate: PropTypes.func.isRequired,
-  }).isRequired,
+  navigate: PropTypes.func,
+  setDate: PropTypes.func,
 }
 
 const styles = StyleSheet.create({

components/chart/day-column.js

@@ -19,7 +19,8 @@ const DayColumn = ({
   dateString,
   chartSymptoms,
   columnHeight,
-  navigation,
+  setDate,
+  navigate,
   shouldShowTemperatureColumn,
   symptomHeight,
   symptomRowSymptoms,
@@ -59,8 +60,10 @@ const DayColumn = ({
     columnHeight
   )
 
-  const onDaySelect = (date) =>
-    navigation.navigate('CycleDayOverview', { date })
+  const onDaySelect = (date) => {
+    setDate(date)
+    navigate('CycleDay')
+  }
 
   return (
     <TouchableOpacity onPress={() => onDaySelect(dateString)} activeOpacity={1}>
@@ -101,13 +104,12 @@ DayColumn.propTypes = {
   dateString: PropTypes.string.isRequired,
   chartSymptoms: PropTypes.array,
   columnHeight: PropTypes.number.isRequired,
+  navigate: PropTypes.func.isRequired,
+  setDate: PropTypes.func.isRequired,
   shouldShowTemperatureColumn: PropTypes.bool,
   symptomHeight: PropTypes.number.isRequired,
   symptomRowSymptoms: PropTypes.array,
   xAxisHeight: PropTypes.number,
-  navigation: PropTypes.shape({
-    navigate: PropTypes.func.isRequired,
-  }).isRequired,
 }
 
 export default DayColumn

components/common/AppHelp.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
+
+import AppText from '../common/app-text'
+
+import { Containers, Spacing, Typography } from '../../styles'
+
+const AppHelp = ({ text }) => (
+  <View style={styles.container}>
+    <AppText style={styles.accentPurple}>*</AppText>
+    <AppText>{text}</AppText>
+  </View>
+)
+
+AppHelp.propTypes = {
+  text: PropTypes.string.isRequired,
+}
+
+const styles = StyleSheet.create({
+  accentPurple: {
+    ...Typography.accentPurple,
+    alignSelf: 'flex-start',
+    paddingRight: Spacing.base,
+  },
+  container: {
+    ...Containers.rowContainer,
+    padding: Spacing.base,
+  },
+})
+
+export default AppHelp

components/common/Asterisk.js

@@ -1,16 +0,0 @@
-import React from 'react'
-import { StyleSheet } from 'react-native'
-
-import AppText from './app-text'
-
-import { Colors } from '../../styles'
-
-const Asterisk = () => <AppText style={styles.asterisk}>*</AppText>
-
-const styles = StyleSheet.create({
-  asterisk: {
-    color: Colors.orange,
-  },
-})
-
-export default Asterisk

components/common/Footnote.js

@@ -1,50 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { StyleSheet, View } from 'react-native'
-
-import AppText from '../common/app-text'
-import Asterisk from '../common/Asterisk'
-
-import { Colors, Spacing } from '../../styles'
-
-const Footnote = ({ children, colorLabel }) => {
-  if (!children) return false
-
-  return (
-    <View style={styles.container}>
-      <Asterisk />
-      <AppText
-        linkStyle={styles.link}
-        style={{ ...styles.text, color: Colors[colorLabel] }}
-      >
-        {children}
-      </AppText>
-    </View>
-  )
-}
-
-Footnote.propTypes = {
-  children: PropTypes.node,
-  colorLabel: PropTypes.string,
-}
-
-Footnote.defaultProps = {
-  colorLabel: 'greyDark',
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignContent: 'flex-start',
-    marginBottom: Spacing.tiny,
-    marginTop: Spacing.base,
-  },
-  link: {
-    color: 'white',
-  },
-  text: {
-    paddingLeft: Spacing.small,
-  },
-})
-
-export default Footnote

components/common/StatsOverview.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import AppText from '../common/app-text'
+import AppText from './app-text'
 
 import { Sizes, Spacing, Typography } from '../../styles'
 
@@ -15,12 +15,12 @@ StatsOverview.propTypes = {
 }
 
 const Row = ({ rowContent }) => {
-  const isStandardDeviation = rowContent[1].includes('deviation')
+  const showHelp = rowContent[1].includes('deviation') ? true : false
 
   return (
     <View style={styles.row}>
       <Cell content={rowContent[0]} isLeft />
-      <Cell content={rowContent[1]} hasAsterisk={isStandardDeviation} />
+      <Cell content={rowContent[1]} showHelp={showHelp} />
     </View>
   )
 }
@@ -29,7 +29,7 @@ Row.propTypes = {
   rowContent: PropTypes.array.isRequired,
 }
 
-const Cell = ({ content, isLeft, hasAsterisk }) => {
+const Cell = ({ content, isLeft, showHelp }) => {
   const styleContainer = isLeft ? styles.cellLeft : styles.cellRight
   const styleText = isLeft ? styles.accentPurpleBig : styles.accentOrange
   const numberOfLines = isLeft ? 1 : 2
@@ -43,8 +43,8 @@ const Cell = ({ content, isLeft, hasAsterisk }) => {
         style={styleText}
       >
         {content}
-        {hasAsterisk && <AppText style={styles.accentOrange}>*</AppText>}
       </AppText>
+      {showHelp && <AppText style={styles.accentPurpleBig}>*</AppText>}
     </View>
   )
 }
@@ -52,7 +52,7 @@ const Cell = ({ content, isLeft, hasAsterisk }) => {
 Cell.propTypes = {
   content: PropTypes.node.isRequired,
   isLeft: PropTypes.bool,
-  hasAsterisk: PropTypes.bool,
+  showHelp: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({
@@ -70,7 +70,10 @@ const styles = StyleSheet.create({
     flex: 3,
     justifyContent: 'center',
   },
-  cellRight: { flex: 5 },
+  cellRight: {
+    flex: 5,
+    flexDirection: 'row',
+  },
   row: { flexDirection: 'row' },
 })
 

components/common/StatsTable.js

@@ -1,13 +1,13 @@
 import React from 'react'
-import { FlatList, StyleSheet, View } from 'react-native'
+import { Dimensions, FlatList, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 
-import AppModal from '../common/app-modal'
-import AppText from '../common/app-text'
+import AppText from './app-text'
+import CloseIcon from './close-icon'
 
 import cycleModule from '../../lib/cycle'
-import { Spacing, Typography, Colors } from '../../styles'
+import { Sizes, Spacing, Typography, Colors } from '../../styles'
 import { humanizeDate } from '../helpers/format-date'
 
 const Item = ({ data }) => {
@@ -36,51 +36,67 @@ Item.propTypes = {
   data: PropTypes.object.isRequired,
 }
 
-const PeriodDetailsModal = ({ onClose }) => {
+const StatsTable = ({ onClose }) => {
   const renderItem = ({ item }) => <Item data={item} />
   const data = cycleModule().getStats()
 
   if (!data || data.length === 0) return false
 
   return (
-    <AppModal onClose={onClose}>
-      <View>
-        <FlatList
-          data={data}
-          renderItem={renderItem}
-          keyExtractor={(item) => item.date}
-          ItemSeparatorComponent={ItemDivider}
-          ListHeaderComponent={FlatListHeader}
-          ListHeaderComponentStyle={styles.headerDivider}
-          stickyHeaderIndices={[0]}
-          contentContainerStyle={styles.container}
-        />
+    <View style={styles.modalContainer}>
+      <View style={styles.headerContainer}>
+        <CloseIcon onClose={onClose} />
       </View>
-    </AppModal>
+      <FlatList
+        data={data}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.date}
+        ItemSeparatorComponent={ItemDivider}
+        ListHeaderComponent={FlatListHeader}
+        ListHeaderComponentStyle={styles.headerDivider}
+        stickyHeaderIndices={[0]}
+        contentContainerStyle={styles.container}
+      />
+    </View>
   )
 }
 
-PeriodDetailsModal.propTypes = {
+StatsTable.propTypes = {
   onClose: PropTypes.func,
 }
 
 const ItemDivider = () => <View style={styles.divider} />
 
-const FlatListHeader = () => (
-  <View style={styles.row}>
-    <View style={styles.accentCell}>
-      <AppText style={styles.header}>{'Cycle Start'}</AppText>
+const FlatListHeader = () => {
+  const { t } = useTranslation(null, { keyPrefix: 'stats' })
+
+  return (
+    <View style={styles.row}>
+      <View style={styles.accentCell}>
+        <AppText style={styles.header}>{t('cycle_start')}</AppText>
+      </View>
+      <View style={styles.cell}>
+        <AppText style={styles.header}>{t('cycle_length')}</AppText>
+      </View>
+      <View style={styles.cell}>
+        <AppText style={styles.header}>{t('bleeding')}</AppText>
+      </View>
     </View>
-    <View style={styles.cell}>
-      <AppText style={styles.header}>{'Cycle Length'}</AppText>
-    </View>
-    <View style={styles.cell}>
-      <AppText style={styles.header}>{'Bleeding'}</AppText>
-    </View>
-  </View>
-)
+  )
+}
 
 const styles = StyleSheet.create({
+  accentCell: {
+    flex: 3,
+    justifyContent: 'center',
+  },
+  cell: {
+    flex: 2,
+    justifyContent: 'center',
+  },
+  container: {
+    paddingHorizontal: Spacing.base,
+  },
   divider: {
     height: 1,
     width: '100%',
@@ -90,29 +106,31 @@ const styles = StyleSheet.create({
     ...Typography.accentOrange,
     paddingVertical: Spacing.small,
   },
+  headerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingTop: Spacing.base,
+    paddingRight: Spacing.base,
+  },
   headerDivider: {
     borderBottomColor: Colors.purple,
     borderBottomWidth: 2,
   },
+  modalContainer: {
+    alignSelf: 'center',
+    backgroundColor: Colors.turquoiseLight,
+    marginTop: Sizes.huge * 2,
+    maxHeight: Dimensions.get('window').height * 0.7,
+    minHeight: '40%',
+    position: 'absolute',
+    width: '100%',
+  },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingVertical: Spacing.tiny,
-    backgroundColor: 'white',
-  },
-  cell: {
-    flex: 2,
-    justifyContent: 'center',
-  },
-  accentCell: {
-    flex: 3,
-    justifyContent: 'center',
-  },
-  container: {
-    minHeight: '40%',
-    minWidth: '95%',
-    paddingHorizontal: Spacing.base,
+    backgroundColor: Colors.turquoiseLight,
   },
 })
 
-export default PeriodDetailsModal
+export default StatsTable

components/common/app-modal.js

@@ -1,33 +1,20 @@
 import React from 'react'
-import {
-  Dimensions,
-  Modal,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native'
+import { Modal, StyleSheet, TouchableOpacity } from 'react-native'
 import PropTypes from 'prop-types'
 
-import CloseIcon from './close-icon'
-
-import { Sizes, Spacing } from '../../styles'
-
-const AppModal = ({ children, onClose }) => (
-  <Modal
-    animationType="fade"
-    onRequestClose={onClose}
-    transparent={true}
-    visible={true}
-  >
-    <TouchableOpacity onPress={onClose} style={styles.blackBackground} />
-    <View style={styles.modalWindow}>
-      <View style={styles.headerContainer}>
-        <CloseIcon onClose={onClose} />
-      </View>
+const AppModal = ({ children, onClose }) => {
+  return (
+    <Modal
+      animationType="fade"
+      onRequestClose={onClose}
+      transparent={true}
+      visible={true}
+    >
+      <TouchableOpacity onPress={onClose} style={styles.blackBackground} />
       {children}
-    </View>
-  </Modal>
-)
+    </Modal>
+  )
+}
 
 AppModal.propTypes = {
   children: PropTypes.node,
@@ -40,28 +27,6 @@ const styles = StyleSheet.create({
     flex: 1,
     opacity: 0.5,
   },
-  headerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    paddingTop: Spacing.base,
-    paddingHorizontal: Spacing.base,
-    position: 'absolute',
-    width: '100%',
-    zIndex: 3, // works on ios
-    elevation: 3, // works on android
-  },
-  modalWindow: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 10,
-    marginTop: Sizes.huge * 2,
-    paddingVertical: Spacing.large * 2,
-    position: 'absolute',
-    maxHeight: Dimensions.get('window').height * 0.7,
-    zIndex: 2, // works on ios
-    elevation: 2, // works on android
-    minWidth: '80%',
-  },
 })
 
 export default AppModal

components/cycle-day/cycle-day-overview.js

@@ -12,8 +12,7 @@ import { getData, nextDate, prevDate } from '../helpers/cycle-day'
 import { Spacing } from '../../styles'
 import { SYMPTOMS } from '../../config'
 
-const CycleDayOverView = ({ route }) => {
-  const { date, isTemperatureEditView } = route.params
+const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
   const cycleDay = getCycleDay(date)
 
   const [editedSymptom, setEditedSymptom] = useState(
@@ -21,11 +20,11 @@ const CycleDayOverView = ({ route }) => {
   )
 
   const showNextCycleDay = () => {
-    //setDate(nextDate(date))
+    setDate(nextDate(date))
   }
 
   const showPrevCycleDay = () => {
-    //setDate(prevDate(date))
+    setDate(prevDate(date))
   }
 
   return (
@@ -58,12 +57,10 @@ const CycleDayOverView = ({ route }) => {
 }
 
 CycleDayOverView.propTypes = {
-  route: PropTypes.shape({
-    params: PropTypes.shape({
-      date: PropTypes.string,
-      isTemperatureEditView: PropTypes.bool,
-    }),
-  }),
+  cycleDay: PropTypes.object,
+  date: PropTypes.string,
+  setDate: PropTypes.func,
+  isTemperatureEditView: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({

components/cycle-day/symptom-box.js

@@ -10,7 +10,7 @@ import SymptomEditView from './symptom-edit-view'
 import { isDateInFuture } from '../helpers/cycle-day'
 
 import { Colors, Sizes, Spacing } from '../../styles'
-import { useTranslation } from 'react-i18next'
+import { headerTitles as symptomTitles } from '../../i18n/en/labels'
 
 const SymptomBox = ({
   date,
@@ -20,7 +20,6 @@ const SymptomBox = ({
   editedSymptom,
   setEditedSymptom,
 }) => {
-  const { t } = useTranslation(null, { keyPrefix: 'cycleDay.symptomBox' })
   const isSymptomEdited = editedSymptom === symptom
   const isSymptomDisabled = isDateInFuture(date) && symptom !== 'note'
   const isExcluded = symptomData !== null ? symptomData.exclude : false
@@ -62,7 +61,9 @@ const SymptomBox = ({
           size={Sizes.icon}
         />
         <View style={styles.textContainer}>
-          <AppText style={symptomNameStyle}>{t(symptom)}</AppText>
+          <AppText style={symptomNameStyle}>
+            {symptomTitles[symptom].toLowerCase()}
+          </AppText>
           {symptomDataToDisplay && (
             <AppText style={textStyle} numberOfLines={4}>
               {symptomDataToDisplay}

components/cycle-day/symptom-edit-view.js

@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { ScrollView, StyleSheet, View } from 'react-native'
+import { Dimensions, ScrollView, StyleSheet, View } from 'react-native'
 
 import AppModal from '../common/app-modal'
 import AppSwitch from '../common/app-switch'
 import AppText from '../common/app-text'
 import AppTextInput from '../common/app-text-input'
 import Button from '../common/button'
+import CloseIcon from '../common/close-icon'
 import Segment from '../common/segment'
 import SelectBoxGroup from './select-box-group'
 import SelectTabGroup from './select-tab-group'
@@ -118,94 +119,99 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
 
   return (
     <AppModal onClose={onSave}>
-      <ScrollView
-        contentContainerStyle={styles.modalContainer}
-        keyboardDismissMode="on-drag"
-      >
-        {symptom === 'temperature' && (
-          <Temperature
-            date={date}
-            data={data}
-            save={(value, field) => onSaveTemperature(value, field)}
-          />
-        )}
-        {shouldShow(symptomConfig.selectTabGroups) &&
-          symtomPage[symptom].selectTabGroups.map((group) => {
-            return (
-              <Segment key={group.key} style={styles.segmentBorder}>
-                <AppText style={styles.title}>{group.title}</AppText>
-                <SelectTabGroup
-                  activeButton={data[group.key]}
-                  buttons={group.options}
-                  onSelect={(value) => onSelectTab(group, value)}
-                />
-              </Segment>
-            )
-          })}
-        {shouldShow(symptomConfig.selectBoxGroups) &&
-          symtomPage[symptom].selectBoxGroups.map((group) => {
-            const isOtherSelected =
-              data['other'] !== null &&
-              data['other'] !== false &&
-              Object.keys(group.options).includes('other')
-
-            return (
-              <Segment key={group.key} style={styles.segmentBorder}>
-                <AppText style={styles.title}>{group.title}</AppText>
-                <SelectBoxGroup
-                  labels={group.options}
-                  onSelect={(value) => onSelectBox(value)}
-                  optionsState={data}
-                />
-                {isOtherSelected && (
-                  <AppTextInput
-                    {...inputProps}
-                    placeholder={sharedLabels.enter}
-                    value={data.note}
-                    onChangeText={(value) => onSelectBoxNote(value)}
-                  />
-                )}
-              </Segment>
-            )
-          })}
-        {shouldShow(symptomConfig.excludeText) && (
-          <Segment style={styles.segmentBorder}>
-            <AppSwitch
-              onToggle={onExcludeToggle}
-              text={symtomPage[symptom].excludeText}
-              value={data.exclude}
-            />
-          </Segment>
-        )}
-        {shouldShow(symptomConfig.note) && (
-          <Segment style={styles.segmentBorder}>
-            <AppText>{symtomPage[symptom].note}</AppText>
-            <AppTextInput
-              {...inputProps}
-              onChangeText={onEditNote}
-              placeholder={sharedLabels.enter}
-              testID="noteInput"
-              value={noteText !== null ? noteText : ''}
-            />
-          </Segment>
-        )}
-        <View style={styles.buttonsContainer}>
-          <Button iconName={iconName} isSmall onPress={onPressLearnMore}>
-            {sharedLabels.learnMore}
-          </Button>
-          <Button isSmall onPress={onRemove}>
-            {sharedLabels.remove}
-          </Button>
-          <Button isCTA isSmall onPress={onSave}>
-            {sharedLabels.save}
-          </Button>
+      <View style={styles.modalWindow}>
+        <View style={styles.headerContainer}>
+          <CloseIcon onClose={onSave} />
         </View>
-        {shouldShowInfo && (
-          <Segment last style={styles.segmentBorder}>
-            <AppText>{info[symptom].text}</AppText>
-          </Segment>
-        )}
-      </ScrollView>
+        <ScrollView
+          contentContainerStyle={styles.modalContainer}
+          keyboardDismissMode="on-drag"
+        >
+          {symptom === 'temperature' && (
+            <Temperature
+              date={date}
+              data={data}
+              save={(value, field) => onSaveTemperature(value, field)}
+            />
+          )}
+          {shouldShow(symptomConfig.selectTabGroups) &&
+            symtomPage[symptom].selectTabGroups.map((group) => {
+              return (
+                <Segment key={group.key} style={styles.segmentBorder}>
+                  <AppText style={styles.title}>{group.title}</AppText>
+                  <SelectTabGroup
+                    activeButton={data[group.key]}
+                    buttons={group.options}
+                    onSelect={(value) => onSelectTab(group, value)}
+                  />
+                </Segment>
+              )
+            })}
+          {shouldShow(symptomConfig.selectBoxGroups) &&
+            symtomPage[symptom].selectBoxGroups.map((group) => {
+              const isOtherSelected =
+                data['other'] !== null &&
+                data['other'] !== false &&
+                Object.keys(group.options).includes('other')
+
+              return (
+                <Segment key={group.key} style={styles.segmentBorder}>
+                  <AppText style={styles.title}>{group.title}</AppText>
+                  <SelectBoxGroup
+                    labels={group.options}
+                    onSelect={(value) => onSelectBox(value)}
+                    optionsState={data}
+                  />
+                  {isOtherSelected && (
+                    <AppTextInput
+                      {...inputProps}
+                      placeholder={sharedLabels.enter}
+                      value={data.note}
+                      onChangeText={(value) => onSelectBoxNote(value)}
+                    />
+                  )}
+                </Segment>
+              )
+            })}
+          {shouldShow(symptomConfig.excludeText) && (
+            <Segment style={styles.segmentBorder}>
+              <AppSwitch
+                onToggle={onExcludeToggle}
+                text={symtomPage[symptom].excludeText}
+                value={data.exclude}
+              />
+            </Segment>
+          )}
+          {shouldShow(symptomConfig.note) && (
+            <Segment style={styles.segmentBorder}>
+              <AppText>{symtomPage[symptom].note}</AppText>
+              <AppTextInput
+                {...inputProps}
+                onChangeText={onEditNote}
+                placeholder={sharedLabels.enter}
+                testID="noteInput"
+                value={noteText !== null ? noteText : ''}
+              />
+            </Segment>
+          )}
+          <View style={styles.buttonsContainer}>
+            <Button iconName={iconName} isSmall onPress={onPressLearnMore}>
+              {sharedLabels.learnMore}
+            </Button>
+            <Button isSmall onPress={onRemove}>
+              {sharedLabels.remove}
+            </Button>
+            <Button isCTA isSmall onPress={onSave}>
+              {sharedLabels.save}
+            </Button>
+          </View>
+          {shouldShowInfo && (
+            <Segment last style={styles.segmentBorder}>
+              <AppText>{info[symptom].text}</AppText>
+            </Segment>
+          )}
+        </ScrollView>
+      </View>
     </AppModal>
   )
 }
@@ -223,12 +229,32 @@ const styles = StyleSheet.create({
     paddingHorizontal: Spacing.base,
     paddingBottom: Spacing.base,
   },
+  headerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingTop: Spacing.base,
+    paddingHorizontal: Spacing.base,
+    position: 'absolute',
+    width: '100%',
+    zIndex: 3, // works on ios
+    elevation: 3, // works on android
+  },
   input: {
     height: Sizes.base * 5,
   },
   modalContainer: {
     paddingHorizontal: Spacing.base,
   },
+  modalWindow: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 10,
+    marginTop: Sizes.huge * 2,
+    paddingTop: Spacing.large * 2,
+    position: 'absolute',
+    minHeight: '40%',
+    maxHeight: Dimensions.get('window').height * 0.7,
+  },
   segmentBorder: {
     borderBottomColor: Colors.greyLight,
   },

components/header/hamburger-menu.js

@@ -7,28 +7,28 @@ import {
   View,
 } from 'react-native'
 import PropTypes from 'prop-types'
-import AppText from '../common/app-text'
 
 import AppIcon from '../common/app-icon'
 import CloseIcon from '../common/close-icon'
+import MenuItem from './menu-item'
 
-import { Colors, Sizes, Typography } from '../../styles'
+import { Colors, Sizes } from '../../styles'
+import settingsLabels from '../../i18n/en/settings'
 import { HIT_SLOP } from '../../config'
-import { useTranslation } from 'react-i18next'
+
+const { menuItems } = settingsLabels
 
 const settingsMenuItems = [
-  { labelKey: 'settings', componentName: 'SettingsMenu' },
-  { labelKey: 'about', componentName: 'About' },
-  { labelKey: 'license', componentName: 'License' },
-  { labelKey: 'privacyPolicy', componentName: 'PrivacyPolicy' },
+  { name: menuItems.settings, component: 'SettingsMenu' },
+  { name: menuItems.about, component: 'About' },
+  { name: menuItems.license, component: 'License' },
+  { name: menuItems.privacyPolicy, component: 'PrivacyPolicy' },
 ]
 
 const HamburgerMenu = ({ navigate }) => {
   const [isOpen, setIsOpen] = useState(false)
   const closeMenu = () => setIsOpen(false)
 
-  const { t } = useTranslation(null, { keyPrefix: 'hamburgerMenu.menuMain' })
-
   if (!isOpen)
     return (
       <TouchableOpacity onPress={() => setIsOpen(true)} hitSlop={HIT_SLOP}>
@@ -36,25 +36,23 @@ const HamburgerMenu = ({ navigate }) => {
       </TouchableOpacity>
     )
 
-  function onPress(componentName) {
-    closeMenu()
-    navigate(componentName)
-  }
-
   return (
-    <Modal animationType="fade" onRequestClose={closeMenu} transparent>
-      <TouchableOpacity onPress={closeMenu} style={styles.blackBackground} />
+    <Modal animationType="fade" onRequestClose={closeMenu} transparent={true}>
+      <TouchableOpacity
+        onPress={closeMenu}
+        style={styles.blackBackground}
+      ></TouchableOpacity>
       <View style={styles.menu}>
         <View style={styles.iconContainer}>
           <CloseIcon color={'black'} onClose={closeMenu} />
         </View>
-        {settingsMenuItems.map(({ labelKey, componentName }) => (
-          <TouchableOpacity
-            onPress={() => onPress(componentName)}
-            key={labelKey}
-          >
-            <AppText style={styles.menuItem}>{t(labelKey)}</AppText>
-          </TouchableOpacity>
+        {settingsMenuItems.map((item) => (
+          <MenuItem
+            item={item}
+            key={item.name}
+            closeMenu={closeMenu}
+            navigate={navigate}
+          />
         ))}
       </View>
     </Modal>
@@ -86,5 +84,4 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '60%',
   },
-  menuItem: Typography.subtitle,
 })

components/header/index.js

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

components/header/menu-item.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import PropTypes from 'prop-types'
+
+import AppText from '../common/app-text'
+
+import { Typography } from '../../styles'
+
+const MenuItem = ({ item, navigate, closeMenu }) => {
+  const { component, name } = item
+  const onPress = () => {
+    closeMenu()
+    navigate(component)
+  }
+
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <AppText style={styles.text}>{name}</AppText>
+    </TouchableOpacity>
+  )
+}
+
+MenuItem.propTypes = {
+  item: PropTypes.object.isRequired,
+  navigate: PropTypes.func.isRequired,
+  closeMenu: PropTypes.func.isRequired,
+}
+
+const styles = StyleSheet.create({
+  text: {
+    ...Typography.subtitle,
+  },
+})
+
+export default MenuItem

components/menu/index.js

@@ -0,0 +1,42 @@
+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

components/password-prompt.js

@@ -1,7 +1,7 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { Alert, KeyboardAvoidingView, StyleSheet, View } from 'react-native'
-import { SHA512 } from 'jshashes'
+import nodejs from 'nodejs-mobile-react-native'
 
 import AppPage from './common/app-page'
 import AppTextInput from './common/app-text-input'
@@ -9,7 +9,7 @@ import Button from './common/button'
 import Header from './header'
 
 import { saveEncryptionFlag } from '../local-storage'
-import { deleteDbAndOpenNew, openDb } from '../db'
+import { requestHash, deleteDbAndOpenNew, openDb } from '../db'
 import { passwordPrompt as labels, shared } from '../i18n/en/labels'
 import { Containers, Spacing } from '../styles'
 
@@ -17,10 +17,9 @@ const cancelButton = { text: shared.cancel, style: 'cancel' }
 
 const PasswordPrompt = ({ enableShowApp }) => {
   const [password, setPassword] = useState(null)
+  const unlockApp = () => requestHash('check-pw', password)
   const isPasswordEntered = Boolean(password)
-
-  const unlockApp = async () => {
-    const hash = new SHA512().hex(password)
+  const passHashToDb = async (hash) => {
     const connected = await openDb(hash)
 
     if (!connected) {
@@ -32,9 +31,16 @@ const PasswordPrompt = ({ enableShowApp }) => {
       ])
       return
     }
+
     enableShowApp()
   }
 
+  useEffect(() => {
+    const listener = nodejs.channel.addListener('check-pw', passHashToDb, this)
+
+    return () => listener.remove()
+  }, [])
+
   const onDeleteDataConfirmation = async () => {
     await deleteDbAndOpenNew()
     await saveEncryptionFlag(false)

components/settings/About.js

@@ -12,7 +12,7 @@ import links from '../../i18n/en/links'
 import { useTranslation } from 'react-i18next'
 
 const AboutSection = () => {
-  const { t } = useTranslation(null, { keyPrefix: 'hamburgerMenu.about' })
+  const { t } = useTranslation(null, { keyPrefix: 'settings.about' })
 
   return (
     <AppPage title={t('title')}>

components/settings/License.js

@@ -8,7 +8,7 @@ import AppLink from '../common/AppLink'
 import Segment from '../common/segment'
 
 const License = ({ children }) => {
-  const { t } = useTranslation(null, { keyPrefix: 'hamburgerMenu.license' })
+  const { t } = useTranslation(null, { keyPrefix: 'settings.license' })
   const currentYear = new Date().getFullYear()
   const link = 'https://www.gnu.org/licenses/gpl-3.0.html'
   return (

components/settings/common/confirm-with-password.js

@@ -1,12 +1,12 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Alert, KeyboardAvoidingView, StyleSheet, View } from 'react-native'
-import { SHA512 } from 'jshashes'
+import nodejs from 'nodejs-mobile-react-native'
 
 import AppTextInput from '../../common/app-text-input'
 import Button from '../../common/button'
 
-import { openDb } from '../../../db'
+import { requestHash, openDb } from '../../../db'
 import { Containers } from '../../../styles'
 import settings from '../../../i18n/en/settings'
 import { shared } from '../../../i18n/en/labels'
@@ -14,8 +14,7 @@ import { shared } from '../../../i18n/en/labels'
 const ConfirmWithPassword = ({ onSuccess, onCancel }) => {
   const [password, setPassword] = useState(null)
 
-  const checkPassword = async () => {
-    const hash = new SHA512().hex(password)
+  const checkPassword = async (hash) => {
     try {
       await openDb(hash)
       onSuccess()
@@ -24,6 +23,15 @@ const ConfirmWithPassword = ({ onSuccess, onCancel }) => {
     }
   }
 
+  useEffect(() => {
+    const listener = nodejs.channel.addListener(
+      'password-check',
+      checkPassword,
+      this
+    )
+    return () => listener.remove()
+  }, [])
+
   const onIncorrectPassword = () => {
     Alert.alert(shared.incorrectPassword, shared.incorrectPasswordMessage, [
       {
@@ -37,6 +45,10 @@ const ConfirmWithPassword = ({ onSuccess, onCancel }) => {
     ])
   }
 
+  const initPasswordCheck = () => {
+    requestHash('password-check', password)
+  }
+
   const labels = settings.passwordSettings
   const isPassword = password !== null
 
@@ -53,7 +65,7 @@ const ConfirmWithPassword = ({ onSuccess, onCancel }) => {
         <Button
           disabled={!isPassword}
           isCTA={isPassword}
-          onPress={checkPassword}
+          onPress={initPasswordCheck}
         >
           {shared.confirmToProceed}
         </Button>

components/settings/menu-item.js

@@ -7,22 +7,18 @@ import AppText from '../common/app-text'
 import Segment from '../common/segment'
 
 import { Colors, Containers, Sizes } from '../../styles'
-import { useTranslation } from 'react-i18next'
 
 const MenuItem = ({ item, last, navigate }) => {
-  const { t } = useTranslation(null, {
-    keyPrefix: 'hamburgerMenu.settings.menuItem',
-  })
   return (
     <Segment last={last}>
       <TouchableOpacity
         style={styles.container}
-        key={item.label}
-        onPress={() => navigate(item.componentName)}
+        key={item.name}
+        onPress={() => navigate(item.component)}
       >
         <View>
-          <AppText style={styles.title}>{t(`${item.label}.name`)}</AppText>
-          {!!item.label && <AppText>{t(`${item.label}.text`)}</AppText>}
+          <AppText style={styles.title}>{item.name}</AppText>
+          {item.text.length > 0 && <AppText>{item.text}</AppText>}
         </View>
         <AppIcon name="chevron-right" color={Colors.orange} />
       </TouchableOpacity>

components/settings/password/enter-new-password.js

@@ -1,24 +1,35 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { KeyboardAvoidingView, StyleSheet } from 'react-native'
+import nodejs from 'nodejs-mobile-react-native'
 import PropTypes from 'prop-types'
-import { SHA512 } from 'jshashes'
 
 import AppText from '../../common/app-text'
 import AppTextInput from '../../common/app-text-input'
 import Button from '../../common/button'
 
+import { requestHash } from '../../../db'
 import { Colors, Spacing } from '../../../styles'
 import settings from '../../../i18n/en/settings'
 
+const LISTENER_TYPE = 'create-or-change-pw'
+
 const EnterNewPassword = ({ changeEncryptionAndRestart }) => {
   const [password, setPassword] = useState('')
   const [passwordConfirmation, setPasswordConfirmation] = useState('')
   const [shouldShowErrorMessage, setShouldShowErrorMessage] = useState(false)
 
+  useEffect(() => {
+    const listener = nodejs.channel.addListener(
+      LISTENER_TYPE,
+      changeEncryptionAndRestart,
+      this
+    )
+    return () => listener.remove()
+  }, [])
+
   const savePassword = () => {
     if (comparePasswords()) {
-      const hash = new SHA512().hex(password)
-      changeEncryptionAndRestart(hash)
+      requestHash(LISTENER_TYPE, password)
     } else {
       setShouldShowErrorMessage(true)
     }

components/settings/privacy-policy.js

@@ -9,9 +9,7 @@ import Segment from '../common/segment'
 import { Colors, Sizes } from '../../styles'
 
 const PrivacyPolicy = () => {
-  const { t } = useTranslation(null, {
-    keyPrefix: 'hamburgerMenu.privacyPolicy',
-  })
+  const { t } = useTranslation(null, { keyPrefix: 'settings.privacyPolicy' })
   const sections = ['intro', 'dataUse', 'permissions', 'transparency']
 
   return (

components/settings/settings-menu.js

@@ -4,21 +4,21 @@ import PropTypes from 'prop-types'
 import AppPage from '../common/app-page'
 import MenuItem from './menu-item'
 
-import { useTranslation } from 'react-i18next'
+import settingsLabels from '../../i18n/en/settings'
 
-const menuItems = [
-  { label: 'reminders', componentName: 'Reminders' },
-  { label: 'nfpSettings', componentName: 'NfpSettings' },
-  { label: 'dataManagement', componentName: 'DataManagement' },
-  { label: 'password', componentName: 'Password' },
+const { menuItems } = settingsLabels
+const menu = [
+  { ...menuItems.reminders, component: 'Reminders' },
+  { ...menuItems.nfpSettings, component: 'NfpSettings' },
+  { ...menuItems.dataManagement, component: 'DataManagement' },
+  { ...menuItems.password, component: 'Password' },
 ]
 
 const SettingsMenu = ({ navigate }) => {
-  const { t } = useTranslation()
   return (
-    <AppPage title={t('hamburgerMenu.settings.title')}>
-      {menuItems.map((menuItem, i) => {
-        const last = menuItems.length === i + 1
+    <AppPage title={settingsLabels.title}>
+      {menu.map((menuItem, i) => {
+        const last = menu.length === i + 1
 
         return (
           <MenuItem item={menuItem} key={i} last={last} navigate={navigate} />

components/stats.js

@@ -3,18 +3,19 @@ import { ImageBackground, SafeAreaView, ScrollView, View } from 'react-native'
 import { ScaledSheet } from 'react-native-size-matters'
 import { useTranslation } from 'react-i18next'
 
-import AppText from '../common/app-text'
-import Button from '../common/button'
-import Footnote from '../common/Footnote'
-import StatsOverview from './StatsOverview'
-import PeriodDetailsModal from './PeriodDetailsModal'
+import Button from './common/button'
+import AppHelp from './common/AppHelp'
+import AppModal from './common/app-modal'
+import AppText from './common/app-text'
+import StatsOverview from './common/StatsOverview'
+import StatsTable from './common/StatsTable'
 
-import cycleModule from '../../lib/cycle'
-import { getCycleLengthStats as getCycleInfo } from '../../lib/cycle-length'
+import cycleModule from '../lib/cycle'
+import { getCycleLengthStats as getCycleInfo } from '../lib/cycle-length'
 
-import { Containers, Sizes, Spacing, Typography } from '../../styles'
+import { Containers, Sizes, Spacing, Typography } from '../styles'
 
-const image = require('../../assets/cycle-icon.png')
+const image = require('../assets/cycle-icon.png')
 
 const Stats = () => {
   const [isStatsVisible, setIsStatsVisible] = useState(false)
@@ -22,28 +23,27 @@ const Stats = () => {
   const { t } = useTranslation(null, { keyPrefix: 'stats' })
 
   const cycleLengths = cycleModule().getAllCycleLengths()
-  const numberOfCycles = cycleLengths.length
-  const cycleData =
-    numberOfCycles > 0
-      ? getCycleInfo(cycleLengths)
-      : { minimum: '—', maximum: '—', stdDeviation: '—' }
-  const standardDeviation = cycleData.stdDeviation
-    ? cycleData.stdDeviation
-    : '—'
+  const numberOfCycles = cycleLengths?.length
+  const hasAtLeastOneCycle = numberOfCycles >= 1
+  const cycleData = hasAtLeastOneCycle
+    ? getCycleInfo(cycleLengths)
+    : { minimum: '—', maximum: '—', stdDeviation: '—' }
   const statsData = [
-    [cycleData.minimum, t('overview.min')],
-    [cycleData.maximum, t('overview.max')],
-    [standardDeviation, t('overview.standardDeviation')],
-    [numberOfCycles, t('overview.completedCycles')],
+    [cycleData.minimum, t('min')],
+    [cycleData.maximum, t('max')],
+    [
+      cycleData.stdDeviation ? cycleData.stdDeviation : '—',
+      t('standard_deviation'),
+    ],
+    [numberOfCycles, t('completed_cycles')],
   ]
 
   return (
     <SafeAreaView style={styles.pageContainer}>
       <ScrollView contentContainerStyle={styles.overviewContainer}>
-        <AppText>{t('intro')}</AppText>
-        {numberOfCycles === 0 ? (
-          <AppText>{t('noData')}</AppText>
-        ) : (
+        <AppText>{t('cycle_length_explainer')}</AppText>
+        {!hasAtLeastOneCycle && <AppText>{t('no_data')}</AppText>}
+        {hasAtLeastOneCycle && (
           <>
             <View style={styles.container}>
               <View style={styles.columnLeft}>
@@ -59,28 +59,30 @@ const Stats = () => {
                   >
                     {cycleData.mean}
                   </AppText>
-                  <AppText style={styles.accentPurpleHuge}>
-                    {t('overview.days')}
-                  </AppText>
+                  <AppText style={styles.accentPurpleHuge}>{t('days')}</AppText>
                 </ImageBackground>
-                <AppText style={styles.accentOrange}>
-                  {t('overview.average')}
-                </AppText>
+                <AppText style={styles.accentOrange}>{t('average')}</AppText>
               </View>
               <View style={styles.columnRight}>
                 <StatsOverview data={statsData} />
               </View>
             </View>
             <Button isCTA onPress={() => setIsStatsVisible(true)}>
-              {t('showStats')}
+              {t('show_stats')}
             </Button>
-            {isStatsVisible && (
-              <PeriodDetailsModal onClose={() => setIsStatsVisible(false)} />
-            )}
-            <Footnote>{t('footnote')}</Footnote>
+            <AppHelp text={t('standard_deviation_help')} />
           </>
         )}
       </ScrollView>
+
+      {isStatsVisible && (
+        <AppModal onClose={() => setIsStatsVisible(false)}>
+          <StatsTable
+            onClose={() => setIsStatsVisible(false)}
+            testID="statsTable"
+          />
+        </AppModal>
+      )}
     </SafeAreaView>
   )
 }

db/index.js

@@ -1,5 +1,6 @@
 import Realm from 'realm'
 import { LocalDate, ChronoUnit } from '@js-joda/core'
+import nodejs from 'nodejs-mobile-react-native'
 import fs from 'react-native-fs'
 
 import schemas from './schemas'
@@ -183,6 +184,16 @@ export function tryToImportWithoutDelete(cycleDays) {
   })
 }
 
+export function requestHash(type, pw) {
+  nodejs.channel.post(
+    'request-SHA512',
+    JSON.stringify({
+      type: type,
+      message: pw,
+    })
+  )
+}
+
 export async function changeDbEncryption(hash) {
   let key
   if (hash) key = hashToInt8Array(hash)

i18n/en.json

@@ -1,17 +1,4 @@
 {
-  "cycleDay": {
-    "symptomBox": {
-      "bleeding": "Bleeding",
-      "temperature": "Temperature",
-      "mucus": "Cervical Mucus",
-      "cervix": "Cervix",
-      "note": "Note",
-      "desire": "Desire",
-      "sex": "Sex",
-      "pain": "Pain",
-      "mood": "Mood"
-    }
-  },
   "labels": {
     "bleedingPrediction": {
       "noPrediction": "As soon as you have tracked 3 menstrual cycles, drip. will make predictions for the next ones."
@@ -26,7 +13,7 @@
       "ok": "OK"
     }
   },
-  "hamburgerMenu": {
+  "settings": {
     "about": {
       "credits": {
         "title": "Credits",
@@ -54,12 +41,6 @@
       "title": "drip. an open-source cycle tracking app",
       "text": "Copyright (C) {{currentYear}} Heart of Code e.V.\n\nThis program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details:"
     },
-    "menuMain": {
-      "about": "About",
-      "license": "License",
-      "settings": "Settings",
-      "privacyPolicy": "Privacy Policy"
-    },
     "privacyPolicy": {
       "title": "Privacy Policy",
       "intro": {
@@ -78,50 +59,25 @@
         "title": "Transparency",
         "text": "You can read through the source code of drip. to ensure the given information is correct. The source code is like a recipe: It tells you how much and what kind of ingredients you need and how you prepare them to cook a tasty meal or program a funky app.\n\nBuon appetito!"
       }
-    },
-    "settings": {
-      "menuItem": {
-        "dataManagement": {
-          "name": "Data",
-          "text": "import, export or delete your data"
-        },
-        "nfpSettings": {
-          "name": "NFP settings",
-          "text": "define how you want to use NFP"
-        },
-        "password": {
-          "name": "Password",
-          "text": ""
-        },
-        "reminders": {
-          "name": "Reminders",
-          "text": "turn on/off reminders"
-        }
-      },
-      "title": "Settings"
     }
   },
-  "stats": {
-    "noData": "At least one completed cycle is needed to display stats.",
-    "intro": "Basic statistics about the length of your cycles.",
-    "overview": {
-      "average": "Average cycle",
-      "days": "days",
-      "min": "Shortest",
-      "max": "Longest",
-      "standardDeviation": "Standard\ndeviation",
-      "completedCycles": "completed\ncycles"
-    },
-    "showStats": "Show period details",
-    "details": {
-      "cycleStart": "Cycle start",
-      "cycleLength": "Cycle length",
-      "bleedingDays": "Bleeding"
-    },
-    "footnote": "Based on the standard deviation of all your tracked periods drip. calculates a range for the starting day of the upcoming 3 periods. The range will be 3 days if your standard deviation is smaller than 1.5 and 5 days if the value is bigger.\n\nThe standard deviation tells you how much the length of your periods vary, 0 means all your periods are exactly the same length and the bigger the value the more the period length varies."
-  },
   "plurals": {
     "day": "{{count}} day",
     "day_plural": "{{count}} days"
+  },
+  "stats": {
+    "show_stats": "Show period details",
+    "cycle_start": "Cycle start",
+    "cycle_length": "Cycle length",
+    "bleeding": "Bleeding",
+    "cycle_length_explainer": "Basic statistics about the length of your cycles.",
+    "no_data": "At least one completed cycle is needed to display stats.",
+    "days": "days",
+    "completed_cycles": "completed\ncycles",
+    "average": "Average cycle",
+    "min": "Shortest",
+    "max": "Longest",
+    "standard_deviation": "Standard\ndeviation",
+    "standard_deviation_help": "Based on the standard deviation of all your tracked periods drip. calculates a range for the starting day of the upcoming 3 periods. The range will be 3 days if your standard deviation is smaller than 1.5 and 5 days if the value is bigger.\n\nThe standard deviation tells you how much the length of your periods vary, 0 means all your periods are exactly the same length and the bigger the value the more the period length varies."
   }
 }

i18n/en/labels.js

@@ -1,3 +1,6 @@
+import labels from './settings'
+const settingsTitles = labels.menuItems
+
 export const home = {
   unknown: '?',
   phase: (n) => `${['1st', '2nd', '3rd'][n - 1]} cycle phase`,
@@ -30,6 +33,30 @@ export const shared = {
   learnMore: 'Learn more',
 }
 
+export const headerTitles = {
+  Home: 'Home',
+  Calendar: 'Calendar',
+  Chart: 'Chart',
+  Stats: 'Statistics',
+  SettingsMenu: 'Settings',
+  Reminders: settingsTitles.reminders.name,
+  NfpSettings: settingsTitles.nfpSettings.name,
+  DataManagement: settingsTitles.dataManagement.name,
+  Password: settingsTitles.password.name,
+  About: 'About',
+  License: 'License',
+  PrivacyPolicy: 'Privacy Policy',
+  bleeding: 'Bleeding',
+  temperature: 'Temperature',
+  mucus: 'Cervical Mucus',
+  cervix: 'Cervix',
+  note: 'Note',
+  desire: 'Desire',
+  sex: 'Sex',
+  pain: 'Pain',
+  mood: 'Mood',
+}
+
 export const stats = {
   cycleLengthExplainer: 'Basic statistics about the length of your cycles.',
   emptyStats: 'At least one completed cycle is needed to display stats.',

i18n/en/settings.js

@@ -1,6 +1,7 @@
 import links from './links'
 
 export default {
+  title: 'Settings',
   menuItems: {
     reminders: {
       name: 'Reminders',
@@ -18,6 +19,10 @@ export default {
       name: 'Password',
       text: '',
     },
+    about: 'About',
+    license: 'License',
+    settings: 'Settings',
+    privacyPolicy: 'Privacy Policy',
   },
   export: {
     errors: {

ios/drip.xcodeproj/project.pbxproj

@@ -36,9 +36,12 @@
 		54DFE73D25D94DED0025C3FC /* cycle-icon.png in Resources */ = {isa = PBXBuildFile; fileRef = 54DFE73C25D94DED0025C3FC /* cycle-icon.png */; };
 		54DFE73E25D94DED0025C3FC /* cycle-icon.png in Resources */ = {isa = PBXBuildFile; fileRef = 54DFE73C25D94DED0025C3FC /* cycle-icon.png */; };
 		54E1D49923E7588F003FA37B /* JavaScriptCore.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 54E1D49823E7588F003FA37B /* JavaScriptCore.framework */; };
+		5C4C9DDE2824847500B72CBE /* NodeMobile.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = C225FC4966694B9FBD32E946 /* NodeMobile.framework */; };
 		62F2A4645AC84CDC9506FF27 /* libc++.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 9AEBF0735214455AAEDF56D5 /* libc++.tbd */; };
+		A16B351C3F3644CF95F104D2 /* builtin_modules in Resources */ = {isa = PBXBuildFile; fileRef = 36F1B55D0DEE47AA9AF4BBDD /* builtin_modules */; };
 		BD7041F2826E4A2CBE6CB87D /* RealmJSTests.xctest in Frameworks */ = {isa = PBXBuildFile; fileRef = F79F72C5390646E0A06AAE68 /* RealmJSTests.xctest */; };
 		D91133DCE120440893E2FD2E /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = CD8C8B91E0A747B3883A0D56 /* libz.tbd */; };
+		E4584E55EEC24302A3E84A23 /* nodejs-project in Resources */ = {isa = PBXBuildFile; fileRef = 6466AE2461BE4FA88B8372F0 /* nodejs-project */; };
 		E545887DBE87912F11770AB9 /* libPods-drip.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 699D3B3789FC2E5185CB9894 /* libPods-drip.a */; };
 		FAC423E577F555F66C9891E4 /* libPods-drip-dripTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F33CCAAB670FD0D98C5C72DF /* libPods-drip-dripTests.a */; };
 /* End PBXBuildFile section */
@@ -66,6 +69,7 @@
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = drip/main.m; sourceTree = "<group>"; };
 		2B1578D5817F46EE9BFC9BAF /* Pods-drip.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-drip.debug.xcconfig"; path = "Target Support Files/Pods-drip/Pods-drip.debug.xcconfig"; sourceTree = "<group>"; };
 		2D16E6891FA4F8E400B85C8A /* libReact.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; path = libReact.a; sourceTree = BUILT_PRODUCTS_DIR; };
+		36F1B55D0DEE47AA9AF4BBDD /* builtin_modules */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = builtin_modules; path = "../node_modules/nodejs-mobile-react-native/install/resources/nodejs-modules/builtin_modules"; sourceTree = "<group>"; };
 		4A9B2D77CAC90DFEB5C4565A /* Pods-dripTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-dripTests.debug.xcconfig"; path = "Target Support Files/Pods-dripTests/Pods-dripTests.debug.xcconfig"; sourceTree = "<group>"; };
 		5409189625AB725F00086AE1 /* OpenSans-LightItalic.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "OpenSans-LightItalic.ttf"; path = "../../assets/fonts/OpenSans-LightItalic.ttf"; sourceTree = "<group>"; };
 		540918A225AB725F00086AE1 /* Prompt-ExtraLight.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "Prompt-ExtraLight.ttf"; path = "../../assets/fonts/Prompt-ExtraLight.ttf"; sourceTree = "<group>"; };
@@ -93,6 +97,7 @@
 		54E1D49823E7588F003FA37B /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		5ABC2C1190B4D25AC0398D09 /* Pods-dripTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-dripTests.release.xcconfig"; path = "Target Support Files/Pods-dripTests/Pods-dripTests.release.xcconfig"; sourceTree = "<group>"; };
 		5C649EDC281151BC005FED46 /* dripRelease.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = dripRelease.entitlements; path = drip/dripRelease.entitlements; sourceTree = "<group>"; };
+		6466AE2461BE4FA88B8372F0 /* nodejs-project */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "nodejs-project"; path = "../nodejs-assets/nodejs-project"; sourceTree = "<group>"; };
 		699D3B3789FC2E5185CB9894 /* libPods-drip.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-drip.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		6B7C2A0A7AAA83BBEFBD0B6A /* libPods-drip-tvOS.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-drip-tvOS.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		72DDDE8D34518ED64FD7EBBA /* Pods-drip-dripTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-drip-dripTests.release.xcconfig"; path = "Target Support Files/Pods-drip-dripTests/Pods-drip-dripTests.release.xcconfig"; sourceTree = "<group>"; };
@@ -103,6 +108,7 @@
 		A8B59389C2FC4F19BD30ABC3 /* libRNShare.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNShare.a; sourceTree = "<group>"; };
 		AB636AA0286D45CE9B23B2C3 /* libRCTRestart.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRCTRestart.a; sourceTree = "<group>"; };
 		B6FD0A300273E09D74C14C19 /* Pods-drip-dripTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-drip-dripTests.debug.xcconfig"; path = "Target Support Files/Pods-drip-dripTests/Pods-drip-dripTests.debug.xcconfig"; sourceTree = "<group>"; };
+		C225FC4966694B9FBD32E946 /* NodeMobile.framework */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = wrapper.framework; name = NodeMobile.framework; path = "../node_modules/nodejs-mobile-react-native/ios/NodeMobile.framework"; sourceTree = "<group>"; };
 		CD8C8B91E0A747B3883A0D56 /* libz.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = libz.tbd; path = usr/lib/libz.tbd; sourceTree = SDKROOT; };
 		D211D71BE5A8436A978770A9 /* libRNDocumentPicker.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNDocumentPicker.a; sourceTree = "<group>"; };
 		E086AB579387F878A2CBCFEB /* libPods-drip-tvOSTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-drip-tvOSTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -111,6 +117,7 @@
 		F5039D0A572B4BBCB7995891 /* libRNVectorIcons.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNVectorIcons.a; sourceTree = "<group>"; };
 		F710D85E391D4094816E1B62 /* libRealmJS.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRealmJS.a; sourceTree = "<group>"; };
 		F79F72C5390646E0A06AAE68 /* RealmJSTests.xctest */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = wrapper.cfbundle; path = RealmJSTests.xctest; sourceTree = "<group>"; };
+		F992F2D99E614DD79FAD6565 /* libRNNodeJsMobile.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNNodeJsMobile.a; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -130,6 +137,7 @@
 				62F2A4645AC84CDC9506FF27 /* libc++.tbd in Frameworks */,
 				D91133DCE120440893E2FD2E /* libz.tbd in Frameworks */,
 				BD7041F2826E4A2CBE6CB87D /* RealmJSTests.xctest in Frameworks */,
+				5C4C9DDE2824847500B72CBE /* NodeMobile.framework in Frameworks */,
 				E545887DBE87912F11770AB9 /* libPods-drip.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -196,6 +204,7 @@
 				2D16E6891FA4F8E400B85C8A /* libReact.a */,
 				9AEBF0735214455AAEDF56D5 /* libc++.tbd */,
 				CD8C8B91E0A747B3883A0D56 /* libz.tbd */,
+				C225FC4966694B9FBD32E946 /* NodeMobile.framework */,
 				6B7C2A0A7AAA83BBEFBD0B6A /* libPods-drip-tvOS.a */,
 				E086AB579387F878A2CBCFEB /* libPods-drip-tvOSTests.a */,
 				699D3B3789FC2E5185CB9894 /* libPods-drip.a */,
@@ -213,6 +222,7 @@
 				D211D71BE5A8436A978770A9 /* libRNDocumentPicker.a */,
 				84CCEBD3B2C44758853BC941 /* libRNFS.a */,
 				AB636AA0286D45CE9B23B2C3 /* libRCTRestart.a */,
+				F992F2D99E614DD79FAD6565 /* libRNNodeJsMobile.a */,
 				90224CB4571D41C4969E9722 /* libGCDWebServers.a */,
 				F710D85E391D4094816E1B62 /* libRealmJS.a */,
 				F79F72C5390646E0A06AAE68 /* RealmJSTests.xctest */,
@@ -257,6 +267,8 @@
 				00E356EF1AD99517003FC87E /* dripTests */,
 				83CBBA001A601CBA00E9B192 /* Products */,
 				2D16E6871FA4F8E400B85C8A /* Frameworks */,
+				6466AE2461BE4FA88B8372F0 /* nodejs-project */,
+				36F1B55D0DEE47AA9AF4BBDD /* builtin_modules */,
 				42C7F9942202468200F22656 /* Recovered References */,
 				6817ABC38854EEB6D3EE933A /* Pods */,
 				006C39A0B9774387BC5ACA43 /* Resources */,
@@ -286,6 +298,7 @@
 				00E356EA1AD99517003FC87E /* Sources */,
 				00E356EB1AD99517003FC87E /* Frameworks */,
 				00E356EC1AD99517003FC87E /* Resources */,
+				22A5D3F7F84BDF2020F07B0E /* [CP] Embed Pods Frameworks */,
 				46313D848A7A3E69E5ED05E7 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
@@ -307,6 +320,14 @@
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
+				DE9DD9049EBE47E5A1EA3F5D /* Build NodeJS Mobile Native Modules */,
+				6C10CEE2CE544C7F9400F1B4 /* Sign NodeJS Mobile Native Modules */,
+				B93B657279074F0DB95BCDE2 /* Remove NodeJS Mobile Framework Simulator Strips */,
+				CD43B73558845DFAF38EE039 /* [CP] Embed Pods Frameworks */,
+				935E6C85F581DC5BB536B833 /* [CP-User] [NODEJS MOBILE] Copy Node.js Project files */,
+				FCE9B437260EC219FF32251C /* [CP-User] [NODEJS MOBILE] Build Native Modules */,
+				2A3F66C5C345646DE949E1FF /* [CP-User] [NODEJS MOBILE] Sign Native Modules */,
+				CD7DBF41D9E2377DC61F80D8 /* [CP-User] [NODEJS MOBILE] Remove Simulator Strip */,
 				616E70055A3365D214C7B201 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
@@ -391,6 +412,8 @@
 				54DFE73A25D94D6E0025C3FC /* swipe.png in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				5472A44A25BB7806005E81DE /* drip-home-icons.ttf in Resources */,
+				E4584E55EEC24302A3E84A23 /* nodejs-project in Resources */,
+				A16B351C3F3644CF95F104D2 /* builtin_modules in Resources */,
 				5472A45225BB7807005E81DE /* Jost-700-Bold.otf in Resources */,
 				5472A44E25BB7807005E81DE /* Prompt-ExtraLight.ttf in Resources */,
 			);
@@ -413,6 +436,34 @@
 			shellPath = /bin/sh;
 			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
+		22A5D3F7F84BDF2020F07B0E /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-drip-dripTests/Pods-drip-dripTests-frameworks.sh",
+				"${PODS_ROOT}/../../node_modules/nodejs-mobile-react-native/ios/NodeMobile.framework",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/NodeMobile.framework",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-drip-dripTests/Pods-drip-dripTests-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
+		2A3F66C5C345646DE949E1FF /* [CP-User] [NODEJS MOBILE] Sign Native Modules */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			name = "[CP-User] [NODEJS MOBILE] Sign Native Modules";
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "#!/bin/sh\nset -e\nif [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then\n# If build native modules preference is not set, look for it in the project's\n#nodejs-assets/BUILD_NATIVE_MODULES.txt file.\nNODEJS_ASSETS_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../nodejs-assets/ && pwd )\"\nPREFERENCE_FILE_PATH=\"$NODEJS_ASSETS_DIR/BUILD_NATIVE_MODULES.txt\"\n  if [ -f \"$PREFERENCE_FILE_PATH\" ]; then\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=\"$(cat $PREFERENCE_FILE_PATH | xargs)\"\n  fi\nfi\nif [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then\n# If build native modules preference is not set, try to find .gyp files\n#to turn it on.\n  gypfiles=($(find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -type f -name \"*.gyp\"))\n  if [ ${#gypfiles[@]} -gt 0 ]; then\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=1\n  else\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=0\n  fi\nfi\nif [ \"1\" != \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then exit 0; fi\n# Delete object files\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.o\" -type f -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.a\" -type f -delete\n# Create Info.plist for each framework built and loader override.\nPATCH_SCRIPT_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/scripts/ && pwd )\"\nNODEJS_PROJECT_DIR=\"$( cd \"$CODESIGNING_FOLDER_PATH\" && cd nodejs-project/ && pwd )\"\nnode \"$PATCH_SCRIPT_DIR\"/ios-create-plists-and-dlopen-override.js $NODEJS_PROJECT_DIR\n# Embed every resulting .framework in the application and delete them afterwards.\nembed_framework()\n{\n    FRAMEWORK_NAME=\"$(basename \"$1\")\"\n    cp -r \"$1\" \"$TARGET_BUILD_DIR/$FRAMEWORKS_FOLDER_PATH/\"\n    /usr/bin/codesign --force --sign $EXPANDED_CODE_SIGN_IDENTITY --preserve-metadata=identifier,entitlements,flags --timestamp=none \"$TARGET_BUILD_DIR/$FRAMEWORKS_FOLDER_PATH/$FRAMEWORK_NAME\"\n}\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d | while read frmwrk_path; do embed_framework \"$frmwrk_path\"; done\n\n#Delete gyp temporary .deps dependency folders from the project structure.\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/.deps/*\" -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \".deps\" -type d -delete\n\n#Delete frameworks from their build paths\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.framework/*\" -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d -delete\n";
+		};
 		46313D848A7A3E69E5ED05E7 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -513,6 +564,20 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-drip/Pods-drip-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
+		6C10CEE2CE544C7F9400F1B4 /* Sign NodeJS Mobile Native Modules */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Sign NodeJS Mobile Native Modules";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\nset -e\nif [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then\n# If build native modules preference is not set, look for it in the project's\n#nodejs-assets/BUILD_NATIVE_MODULES.txt file.\nNODEJS_ASSETS_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../nodejs-assets/ && pwd )\"\nPREFERENCE_FILE_PATH=\"$NODEJS_ASSETS_DIR/BUILD_NATIVE_MODULES.txt\"\n  if [ -f \"$PREFERENCE_FILE_PATH\" ]; then\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=\"$(cat $PREFERENCE_FILE_PATH | xargs)\"\n  fi\nfi\nif [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then\n# If build native modules preference is not set, try to find .gyp files\n#to turn it on.\n  gypfiles=($(find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -type f -name \"*.gyp\"))\n  if [ ${#gypfiles[@]} -gt 0 ]; then\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=1\n  else\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=0\n  fi\nfi\nif [ \"1\" != \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then exit 0; fi\n# Delete object files\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.o\" -type f -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.a\" -type f -delete\n# Create Info.plist for each framework built and loader override.\nPATCH_SCRIPT_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/scripts/ && pwd )\"\nNODEJS_PROJECT_DIR=\"$( cd \"$CODESIGNING_FOLDER_PATH\" && cd nodejs-project/ && pwd )\"\nnode \"$PATCH_SCRIPT_DIR\"/ios-create-plists-and-dlopen-override.js $NODEJS_PROJECT_DIR\n# Embed every resulting .framework in the application and delete them afterwards.\nembed_framework()\n{\n    FRAMEWORK_NAME=\"$(basename \"$1\")\"\n    cp -r \"$1\" \"$TARGET_BUILD_DIR/$FRAMEWORKS_FOLDER_PATH/\"\n    \n    /usr/bin/codesign --force --sign $EXPANDED_CODE_SIGN_IDENTITY --preserve-metadata=identifier,entitlements,flags --timestamp=none \"$TARGET_BUILD_DIR/$FRAMEWORKS_FOLDER_PATH/$FRAMEWORK_NAME\"\n}\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d | while read frmwrk_path; do embed_framework \"$frmwrk_path\"; done\n\n#Delete gyp temporary .deps dependency folders from the project structure.\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/.deps/*\" -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \".deps\" -type d -delete\n\n#Delete frameworks from their build paths\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.framework/*\" -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d -delete\n";
+		};
 		852A2E0CD5D0F561CE2927A3 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -535,6 +600,48 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
+		935E6C85F581DC5BB536B833 /* [CP-User] [NODEJS MOBILE] Copy Node.js Project files */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			name = "[CP-User] [NODEJS MOBILE] Copy Node.js Project files";
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "#!/bin/sh\nset -e\nNODEJS_ASSETS_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../nodejs-assets/ && pwd )\"\nNODEJS_BUILT_IN_MODULES_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/install/resources/nodejs-modules/ && pwd )\"\nif [ -d \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" ]\nthen\nrm -rf \"$CODESIGNING_FOLDER_PATH/nodejs-project/\"\nfi\nif [ -d \"$CODESIGNING_FOLDER_PATH/builtin_modules/\" ]\nthen\nrm -rf \"$CODESIGNING_FOLDER_PATH/builtin_modules/\"\nfi\nrsync -av --delete \"$NODEJS_ASSETS_DIR/nodejs-project\" \"$CODESIGNING_FOLDER_PATH\"\nrsync -av --delete \"$NODEJS_BUILT_IN_MODULES_DIR/builtin_modules\" \"$CODESIGNING_FOLDER_PATH\"\n";
+		};
+		B93B657279074F0DB95BCDE2 /* Remove NodeJS Mobile Framework Simulator Strips */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Remove NodeJS Mobile Framework Simulator Strips";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\nset -e\nFRAMEWORK_BINARY_PATH=\"$TARGET_BUILD_DIR/$FRAMEWORKS_FOLDER_PATH/NodeMobile.framework/NodeMobile\"\nFRAMEWORK_STRIPPED_PATH=\"$FRAMEWORK_BINARY_PATH-strip\"\nif [ \"$PLATFORM_NAME\" != \"iphonesimulator\" ]; then\n  if $(lipo \"$FRAMEWORK_BINARY_PATH\" -verify_arch \"x86_64\") ; then\n    lipo -output \"$FRAMEWORK_STRIPPED_PATH\" -remove \"x86_64\" \"$FRAMEWORK_BINARY_PATH\"\n    rm \"$FRAMEWORK_BINARY_PATH\"\n    mv \"$FRAMEWORK_STRIPPED_PATH\" \"$FRAMEWORK_BINARY_PATH\"\n    echo \"Removed simulator strip from NodeMobile.framework\"\n  fi\nfi\n";
+		};
+		CD43B73558845DFAF38EE039 /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-drip/Pods-drip-frameworks.sh",
+				"${PODS_ROOT}/../../node_modules/nodejs-mobile-react-native/ios/NodeMobile.framework",
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/NodeMobile.framework",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-drip/Pods-drip-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 		CD68B565C5F4A7A674494D02 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -557,6 +664,40 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
+		CD7DBF41D9E2377DC61F80D8 /* [CP-User] [NODEJS MOBILE] Remove Simulator Strip */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			name = "[CP-User] [NODEJS MOBILE] Remove Simulator Strip";
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "#!/bin/sh\nset -e\nFRAMEWORK_BINARY_PATH=\"$TARGET_BUILD_DIR/$FRAMEWORKS_FOLDER_PATH/NodeMobile.framework/NodeMobile\"\nFRAMEWORK_STRIPPED_PATH=\"$FRAMEWORK_BINARY_PATH-strip\"\nif [ \"$PLATFORM_NAME\" != \"iphonesimulator\" ]; then\n  if $(lipo \"$FRAMEWORK_BINARY_PATH\" -verify_arch \"x86_64\") ; then\n    lipo -output \"$FRAMEWORK_STRIPPED_PATH\" -remove \"x86_64\" \"$FRAMEWORK_BINARY_PATH\"\n    rm \"$FRAMEWORK_BINARY_PATH\"\n    mv \"$FRAMEWORK_STRIPPED_PATH\" \"$FRAMEWORK_BINARY_PATH\"\n    echo \"Removed simulator strip from NodeMobile.framework\"\n  fi\nfi\n";
+		};
+		DE9DD9049EBE47E5A1EA3F5D /* Build NodeJS Mobile Native Modules */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Build NodeJS Mobile Native Modules";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\nset -e\nif [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then\n# If build native modules preference is not set, look for it in the project's\n#nodejs-assets/BUILD_NATIVE_MODULES.txt file.\nNODEJS_ASSETS_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../nodejs-assets/ && pwd )\"\nPREFERENCE_FILE_PATH=\"$NODEJS_ASSETS_DIR/BUILD_NATIVE_MODULES.txt\"\n  if [ -f \"$PREFERENCE_FILE_PATH\" ]; then\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=\"$(cat $PREFERENCE_FILE_PATH | xargs)\"\n  fi\nfi\nif [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then\n# If build native modules preference is not set, try to find .gyp files\n#to turn it on.\n  gypfiles=($(find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -type f -name \"*.gyp\"))\n  if [ ${#gypfiles[@]} -gt 0 ]; then\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=1\n  else\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=0\n  fi\nfi\nif [ \"1\" != \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then exit 0; fi\n# Delete object files that may already come from within the npm package.\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.o\" -type f -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.a\" -type f -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.node\" -type f -delete\n# Delete bundle contents that may be there from previous builds.\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.node/*\" -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.node\" -type d -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.framework/*\" -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d -delete\n# Apply patches to the modules package.json\nif [ -d \"$CODESIGNING_FOLDER_PATH\"/nodejs-project/node_modules/ ]; then\n  PATCH_SCRIPT_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/scripts/ && pwd )\"\n  NODEJS_PROJECT_MODULES_DIR=\"$( cd \"$CODESIGNING_FOLDER_PATH\" && cd nodejs-project/node_modules/ && pwd )\"\n  node \"$PATCH_SCRIPT_DIR\"/patch-package.js $NODEJS_PROJECT_MODULES_DIR\nfi\n# Get the nodejs-mobile-gyp location\nif [ -d \"$PROJECT_DIR/../node_modules/nodejs-mobile-gyp/\" ]; then\n  NODEJS_MOBILE_GYP_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-gyp/ && pwd )\"\nelse\n  NODEJS_MOBILE_GYP_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/node_modules/nodejs-mobile-gyp/ && pwd )\"\nfi\nNODEJS_MOBILE_GYP_BIN_FILE=\"$NODEJS_MOBILE_GYP_DIR\"/bin/node-gyp.js\n# Rebuild modules with right environment\nNODEJS_HEADERS_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/ios/libnode/ && pwd )\"\npushd $CODESIGNING_FOLDER_PATH/nodejs-project/\nif [ \"$PLATFORM_NAME\" == \"iphoneos\" ]\nthen\n  GYP_DEFINES=\"OS=ios\" npm_config_nodedir=\"$NODEJS_HEADERS_DIR\" npm_config_node_gyp=\"$NODEJS_MOBILE_GYP_BIN_FILE\" npm_config_platform=\"ios\" npm_config_format=\"make-ios\" npm_config_node_engine=\"chakracore\" npm_config_arch=\"arm64\" npm --verbose rebuild --build-from-source\nelse\n  GYP_DEFINES=\"OS=ios\" npm_config_nodedir=\"$NODEJS_HEADERS_DIR\" npm_config_node_gyp=\"$NODEJS_MOBILE_GYP_BIN_FILE\" npm_config_platform=\"ios\" npm_config_format=\"make-ios\" npm_config_node_engine=\"chakracore\" npm_config_arch=\"x64\" npm --verbose rebuild --build-from-source\nfi\npopd\n";
+		};
+		FCE9B437260EC219FF32251C /* [CP-User] [NODEJS MOBILE] Build Native Modules */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			name = "[CP-User] [NODEJS MOBILE] Build Native Modules";
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "#!/bin/sh\nset -e\nif [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then\n# If build native modules preference is not set, look for it in the project's\n#nodejs-assets/BUILD_NATIVE_MODULES.txt file.\nNODEJS_ASSETS_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../nodejs-assets/ && pwd )\"\nPREFERENCE_FILE_PATH=\"$NODEJS_ASSETS_DIR/BUILD_NATIVE_MODULES.txt\"\n  if [ -f \"$PREFERENCE_FILE_PATH\" ]; then\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=\"$(cat $PREFERENCE_FILE_PATH | xargs)\"\n  fi\nfi\nif [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then\n# If build native modules preference is not set, try to find .gyp files\n#to turn it on.\n  gypfiles=($(find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -type f -name \"*.gyp\"))\n  if [ ${#gypfiles[@]} -gt 0 ]; then\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=1\n  else\n    NODEJS_MOBILE_BUILD_NATIVE_MODULES=0\n  fi\nfi\nif [ \"1\" != \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then exit 0; fi\n# Delete object files that may already come from within the npm package.\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.o\" -type f -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.a\" -type f -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.node\" -type f -delete\n# Delete bundle contents that may be there from previous builds.\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.node/*\" -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.node\" -type d -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.framework/*\" -delete\nfind \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d -delete\n# Apply patches to the modules package.json\nif [ -d \"$CODESIGNING_FOLDER_PATH\"/nodejs-project/node_modules/ ]; then\n  PATCH_SCRIPT_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/scripts/ && pwd )\"\n  NODEJS_PROJECT_MODULES_DIR=\"$( cd \"$CODESIGNING_FOLDER_PATH\" && cd nodejs-project/node_modules/ && pwd )\"\n  node \"$PATCH_SCRIPT_DIR\"/patch-package.js $NODEJS_PROJECT_MODULES_DIR\nfi\n# Get the nodejs-mobile-gyp location\nif [ -d \"$PROJECT_DIR/../node_modules/nodejs-mobile-gyp/\" ]; then\n  NODEJS_MOBILE_GYP_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-gyp/ && pwd )\"\nelse\n  NODEJS_MOBILE_GYP_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/node_modules/nodejs-mobile-gyp/ && pwd )\"\nfi\nNODEJS_MOBILE_GYP_BIN_FILE=\"$NODEJS_MOBILE_GYP_DIR\"/bin/node-gyp.js\n# Support building neon-bindings (Rust) native modules\nif [ -f ~/.cargo/env ]; then\n  source ~/.cargo/env;\nfi\n# Rebuild modules with right environment\nNODEJS_HEADERS_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/ios/libnode/ && pwd )\"\npushd $CODESIGNING_FOLDER_PATH/nodejs-project/\nif [ \"$PLATFORM_NAME\" == \"iphoneos\" ]\nthen\n  GYP_DEFINES=\"OS=ios\" CARGO_BUILD_TARGET=\"aarch64-apple-ios\" npm_config_nodedir=\"$NODEJS_HEADERS_DIR\" npm_config_node_gyp=\"$NODEJS_MOBILE_GYP_BIN_FILE\" npm_config_platform=\"ios\" npm_config_format=\"make-ios\" npm_config_node_engine=\"chakracore\" npm_config_arch=\"arm64\" npm --verbose rebuild --build-from-source\nelse\n  GYP_DEFINES=\"OS=ios\" CARGO_BUILD_TARGET=\"x86_64-apple-ios\" npm_config_nodedir=\"$NODEJS_HEADERS_DIR\" npm_config_node_gyp=\"$NODEJS_MOBILE_GYP_BIN_FILE\" npm_config_platform=\"ios\" npm_config_format=\"make-ios\" npm_config_node_engine=\"chakracore\" npm_config_arch=\"x64\" npm --verbose rebuild --build-from-source\nfi\npopd\n";
+		};
 /* End PBXShellScriptBuildPhase section */
 
 /* Begin PBXSourcesBuildPhase section */
@@ -596,6 +737,8 @@
 				ENABLE_BITCODE = "$(inherited)";
 				FRAMEWORK_SEARCH_PATHS = (
 					"$(inherited)",
+					"\"../node_modules/nodejs-mobile-react-native/ios\"",
+					"\"../node_modules/nodejs-mobile-react-native/ios\"",
 					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 				);
 				GCC_PREPROCESSOR_DEFINITIONS = (
@@ -610,6 +753,7 @@
 					"$(SRCROOT)/../node_modules/react-native-document-picker/ios/RNDocumentPicker",
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/nodejs-mobile-react-native/ios/**",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 				);
 				INFOPLIST_FILE = dripTests/Info.plist;
@@ -641,6 +785,8 @@
 				ENABLE_BITCODE = "$(inherited)";
 				FRAMEWORK_SEARCH_PATHS = (
 					"$(inherited)",
+					"\"../node_modules/nodejs-mobile-react-native/ios\"",
+					"\"../node_modules/nodejs-mobile-react-native/ios\"",
 					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 				);
 				HEADER_SEARCH_PATHS = (
@@ -651,6 +797,7 @@
 					"$(SRCROOT)/../node_modules/react-native-document-picker/ios/RNDocumentPicker",
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/nodejs-mobile-react-native/ios/**",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 				);
 				INFOPLIST_FILE = dripTests/Info.plist;
@@ -685,7 +832,10 @@
 				ENABLE_BITCODE = "$(inherited)";
 				EXCLUDED_ARCHS = "";
 				"EXCLUDED_ARCHS[sdk=*]" = "";
-				FRAMEWORK_SEARCH_PATHS = "$(inherited)";
+				FRAMEWORK_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"../node_modules/nodejs-mobile-react-native/ios\"",
+				);
 				GCC_PREPROCESSOR_DEFINITIONS = (
 					"COCOAPODS=1",
 					"$(inherited)",
@@ -698,6 +848,7 @@
 					"$(SRCROOT)/../node_modules/react-native-document-picker/ios/RNDocumentPicker",
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/nodejs-mobile-react-native/ios/**",
 					"$(SRCROOT)/../node_modules/@react-native-community/push-notification-ios/ios",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 				);
@@ -732,6 +883,7 @@
 					"\"${PODS_CONFIGURATION_BUILD_DIR}/RealmJS\"",
 					"\"${PODS_CONFIGURATION_BUILD_DIR}/Yoga\"",
 					"\"${PODS_CONFIGURATION_BUILD_DIR}/glog\"",
+					"\"${PODS_CONFIGURATION_BUILD_DIR}/nodejs-mobile-react-native\"",
 					"\"${PODS_CONFIGURATION_BUILD_DIR}/react-native-document-picker\"",
 					"\"${PODS_CONFIGURATION_BUILD_DIR}/react-native-restart\"",
 					"\"${PODS_ROOT}/../../node_modules/realm/vendor/realm-ios\"",
@@ -763,7 +915,10 @@
 				DEVELOPMENT_TEAM = 6AD72X6W26;
 				ENABLE_BITCODE = "$(inherited)";
 				EXCLUDED_ARCHS = "";
-				FRAMEWORK_SEARCH_PATHS = "$(inherited)";
+				FRAMEWORK_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"../node_modules/nodejs-mobile-react-native/ios\"",
+				);
 				GCC_PREPROCESSOR_DEFINITIONS = (
 					"COCOAPODS=1",
 					"$(inherited)",
@@ -776,6 +931,7 @@
 					"$(SRCROOT)/../node_modules/react-native-document-picker/ios/RNDocumentPicker",
 					"$(SRCROOT)/../node_modules/react-native-fs/**",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/nodejs-mobile-react-native/ios/**",
 					"$(SRCROOT)/../node_modules/@react-native-community/push-notification-ios/ios",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 				);
@@ -810,6 +966,7 @@
 					"\"${PODS_CONFIGURATION_BUILD_DIR}/RealmJS\"",
 					"\"${PODS_CONFIGURATION_BUILD_DIR}/Yoga\"",
 					"\"${PODS_CONFIGURATION_BUILD_DIR}/glog\"",
+					"\"${PODS_CONFIGURATION_BUILD_DIR}/nodejs-mobile-react-native\"",
 					"\"${PODS_CONFIGURATION_BUILD_DIR}/react-native-document-picker\"",
 					"\"${PODS_CONFIGURATION_BUILD_DIR}/react-native-restart\"",
 					"\"${PODS_ROOT}/../../node_modules/realm/vendor/realm-ios\"",

jest-setup.js

@@ -1,2 +0,0 @@
-// Import Jest Native matchers
-import '@testing-library/jest-native/extend-expect'

jest.config.js

@@ -1,7 +1,10 @@
 module.exports = {
   preset: '@testing-library/react-native',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
-  setupFilesAfterEnv: ['./jest-setup.js'],
+  moduleNameMapper: {
+    '\\.(png)$': require.resolve('./test/file-mock.js'),
+  },
+  setupFilesAfterEnv: ['./test/jest-setup.js'],
   transformIgnorePatterns: [
     'node_modules/(?!((jest-)?react-native(-.*)?|@react-native(-community)?)/)',
   ],

lib/notifications.js

@@ -11,15 +11,16 @@ import { getBleedingDaysSortedByDate } from '../db'
 import cycleModule from './cycle'
 import nothingChanged from '../db/db-unchanged'
 
-export default function setupNotifications(navigation) {
+export default function setupNotifications(navigate, setDate) {
   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') {
-        navigation.navigate('TemperatureEditView', { date })
+        const todayDate = LocalDate.now().toString()
+        setDate(todayDate)
+        navigate('TemperatureEditView')
       } else {
-        navigation.navigate('Home', { date })
+        navigate('Home')
       }
     },
   })

nodejs-assets/nodejs-project/main.js

@@ -0,0 +1,12 @@
+// too see stdout / stderr from this process, run
+// adb logcat | grep "NODEJS-MOBILE"
+const rnBridge = require('rn-bridge')
+const crypto = require('crypto')
+
+rnBridge.channel.on('request-SHA512', (msg) => {
+  msg = JSON.parse(msg)
+  const hash = crypto.createHash('sha512')
+  hash.update(msg.message)
+  const result = hash.digest('hex')
+  rnBridge.channel.post(msg.type, result)
+})

nodejs-assets/nodejs-project/package.json

@@ -0,0 +1,4 @@
+{
+  "dependencies": {},
+  "main": "main.js"
+}

package.json

@@ -35,14 +35,10 @@
     "@react-native-community/art": "^1.2.0",
     "@react-native-community/datetimepicker": "^6.3.1",
     "@react-native-community/push-notification-ios": "^1.8.0",
-    "@react-navigation/bottom-tabs": "^6.4.0",
-    "@react-navigation/native": "^6.0.13",
-    "@react-navigation/native-stack": "^6.9.0",
-    "@react-navigation/stack": "^6.3.1",
     "csvtojson": "^2.0.8",
     "i18next": "^21.9.0",
-    "jshashes": "^1.0.8",
     "moment": "^2.29.4",
+    "nodejs-mobile-react-native": "^0.8.2",
     "object-path": "^0.11.4",
     "obv": "0.0.1",
     "prop-types": "^15.8.1",
@@ -52,11 +48,8 @@
     "react-native-calendars": "^1.1287.0",
     "react-native-document-picker": "^8.1.1",
     "react-native-fs": "^2.20.0",
-    "react-native-gesture-handler": "^2.6.2",
     "react-native-modal-datetime-picker": "14.0.0",
     "react-native-push-notification": "3.2.1",
-    "react-native-safe-area-context": "^4.3.4",
-    "react-native-screens": "^3.17.0",
     "react-native-share": "^7.9.0",
     "react-native-simple-toast": "^1.1.3",
     "react-native-size-matters": "^0.4.0",

rn-cli.config.js

@@ -0,0 +1,13 @@
+// https://github.com/janeasystems/nodejs-mobile-react-native#duplicate-module-name
+
+const blacklist = require('metro-config/src/defaults/blacklist')
+
+module.exports = {
+  resolver:{
+    blacklistRE: blacklist([
+      /nodejs-assets\/.*/,
+      /android\/.*/,
+      /ios\/.*/
+    ])
+  },
+}

styles/typography.js

@@ -6,7 +6,7 @@ import Spacing from './spacing'
 
 export const fonts = {
   main: Platform.OS === 'ios' ? 'Jost-Book' : 'Jost-400-Book',
-  bold : Platform.OS === 'ios' ? 'Jost-Bold' : 'Jost-700-Bold',
+  bold: Platform.OS === 'ios' ? 'Jost-Bold' : 'Jost-700-Bold',
 }
 
 export const sizes = {
@@ -23,7 +23,7 @@ export const sizes = {
 const accentText = {
   fontFamily: fonts.bold,
   textAlignVertical: 'center',
-  textTransform: 'uppercase'
+  textTransform: 'uppercase',
 }
 
 const accentTextBig = {
@@ -43,47 +43,51 @@ const accentTextHuge = {
 
 const accentTextSmall = {
   ...accentText,
-  fontSize: sizes.small
+  fontSize: sizes.small,
 }
 
 const title = {
   color: Colors.purple,
-  marginVertical: Spacing.large
+  marginVertical: Spacing.large,
 }
 
 const label = {
   fontSize: sizes.small,
-  textTransform: 'uppercase'
+  textTransform: 'uppercase',
 }
 
 export default {
   accentOrange: {
     ...accentTextSmall,
-    color: Colors.orange
+    color: Colors.orange,
+  },
+  accentPurple: {
+    ...accentTextSmall,
+    color: Colors.purple,
   },
   accentPurpleBig: {
     ...accentTextBig,
-    color: Colors.purple
+    color: Colors.purple,
   },
   accentPurpleGiant: {
     ...accentTextGiant,
-    color: Colors.purple
+    color: Colors.purple,
   },
   accentPurpleHuge: {
     ...accentTextHuge,
-    color: Colors.purple
+    color: Colors.purple,
   },
   mainText: {
     fontFamily: fonts.main,
-    fontSize: sizes.base
+    fontSize: sizes.base,
   },
   label: {
-    ...label
+    ...label,
   },
   labelBold: {
     color: Colors.greyDark,
     fontWeight: 'bold',
-    ...label
+    ...label,
   },
   labelLight: {
     color: Colors.grey,
@@ -91,7 +95,7 @@ export default {
   },
   subtitle: {
     fontSize: sizes.subtitle,
-    ...title
+    ...title,
   },
   title: {
     alignSelf: 'center',
@@ -99,7 +103,7 @@ export default {
     fontWeight: '700',
     fontSize: sizes.title,
     marginHorizontal: Spacing.base,
-    ...title
+    ...title,
   },
   titleWithoutMargin: {
     alignSelf: 'center',
@@ -107,5 +111,5 @@ export default {
     fontFamily: fonts.bold,
     fontWeight: '700',
     fontSize: sizes.title,
-  }
+  },
 }

test/components/AcceptLicense.spec.js

@@ -1,21 +1,14 @@
 import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react-native'
-import AcceptLicense from '../components/AcceptLicense'
 
-import { saveLicenseFlag } from '../local-storage'
+import AcceptLicense from '../../components/AcceptLicense'
 
-jest.mock('../local-storage', () => ({
+import { saveLicenseFlag } from '../../local-storage'
+
+jest.mock('../../local-storage', () => ({
   saveLicenseFlag: jest.fn(() => Promise.resolve()),
 }))
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (str, options) => {
-      return str + (options ? JSON.stringify(options) : '')
-    },
-  }),
-}))
-
 describe('AcceptLicense', () => {
   test('On clicking OK button, the license is accepted', async () => {
     const mockedSetLicense = jest.fn()

test/components/__snapshots__/stats.spec.js.snap

@@ -0,0 +1,395 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Stats screen when provided data, renders stats 1`] = `
+<RCTSafeAreaView
+  emulateUnlessSupported={true}
+  style={
+    Object {
+      "backgroundColor": "#E9F2ED",
+      "flex": 1,
+    }
+  }
+>
+  <RCTScrollView
+    contentContainerStyle={
+      Object {
+        "paddingHorizontal": 34.285714285714285,
+        "paddingTop": 34.285714285714285,
+      }
+    }
+  >
+    <View>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#555",
+              "fontFamily": "Jost-Book",
+              "fontSize": 34.285714285714285,
+            },
+            undefined,
+          ]
+        }
+      >
+        cycle_length_explainer
+      </Text>
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          }
+        }
+      >
+        <View
+          style={
+            Object {
+              "flex": 3,
+              "flexDirection": "column",
+            }
+          }
+        >
+          <View
+            accessibilityIgnoresInvertColors={true}
+            style={
+              Object {
+                "marginBottom": 42.857142857142854,
+                "paddingTop": 107.14285714285714,
+              }
+            }
+          >
+            <Image
+              source={123}
+              style={
+                Array [
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  Object {
+                    "height": undefined,
+                    "width": undefined,
+                  },
+                  Object {
+                    "resizeMode": "contain",
+                  },
+                ]
+              }
+            />
+            <Text
+              ellipsizeMode="clip"
+              numberOfLines={1}
+              style={
+                Array [
+                  Object {
+                    "color": "#555",
+                    "fontFamily": "Jost-Book",
+                    "fontSize": 34.285714285714285,
+                  },
+                  Object {
+                    "color": "#3A2671",
+                    "fontFamily": "Jost-Bold",
+                    "fontSize": 85.71428571428571,
+                    "marginTop": -68.57142857142857,
+                    "textAlignVertical": "center",
+                    "textTransform": "uppercase",
+                  },
+                ]
+              }
+            >
+              30.33
+            </Text>
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#555",
+                    "fontFamily": "Jost-Book",
+                    "fontSize": 34.285714285714285,
+                  },
+                  Object {
+                    "color": "#3A2671",
+                    "fontFamily": "Jost-Bold",
+                    "fontSize": 68.57142857142857,
+                    "marginTop": -34.285714285714285,
+                    "textAlignVertical": "center",
+                    "textTransform": "uppercase",
+                  },
+                ]
+              }
+            >
+              days
+            </Text>
+          </View>
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#555",
+                  "fontFamily": "Jost-Book",
+                  "fontSize": 34.285714285714285,
+                },
+                Object {
+                  "color": "#F38337",
+                  "fontFamily": "Jost-Bold",
+                  "fontSize": 27.857142857142858,
+                  "textAlignVertical": "center",
+                  "textTransform": "uppercase",
+                },
+              ]
+            }
+          >
+            average
+          </Text>
+        </View>
+        <View
+          style={
+            Object {
+              "flex": 5,
+              "flexDirection": "column",
+              "paddingTop": 21.428571428571427,
+            }
+          }
+        >
+          <StatsOverview
+            data={
+              Array [
+                Array [
+                  30,
+                  "min",
+                ],
+                Array [
+                  31,
+                  "max",
+                ],
+                Array [
+                  0.58,
+                  "standard_deviation",
+                ],
+                Array [
+                  3,
+                  "completed_cycles",
+                ],
+              ]
+            }
+          />
+        </View>
+      </View>
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "alignSelf": "center",
+            "backgroundColor": "#F38337",
+            "borderRadius": 25,
+            "flexDirection": "row",
+            "justifyContent": "center",
+            "marginTop": 34.285714285714285,
+            "minWidth": "15%",
+            "opacity": 1,
+            "paddingHorizontal": 8.571428571428571,
+          }
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#555",
+                "fontFamily": "Jost-Book",
+                "fontSize": 34.285714285714285,
+              },
+              Array [
+                Object {
+                  "color": "white",
+                  "fontFamily": "Jost-Bold",
+                },
+                Object {
+                  "fontSize": 27.857142857142858,
+                  "padding": 21.428571428571427,
+                  "textTransform": "uppercase",
+                },
+              ],
+            ]
+          }
+        >
+          show_stats
+        </Text>
+      </View>
+      <AppHelp
+        text="standard_deviation_help"
+      />
+    </View>
+  </RCTScrollView>
+</RCTSafeAreaView>
+`;
+
+exports[`Stats screen when provided no data, renders no_data text 1`] = `
+<RCTSafeAreaView
+  emulateUnlessSupported={true}
+  style={
+    Object {
+      "backgroundColor": "#E9F2ED",
+      "flex": 1,
+    }
+  }
+>
+  <RCTScrollView
+    contentContainerStyle={
+      Object {
+        "paddingHorizontal": 34.285714285714285,
+        "paddingTop": 34.285714285714285,
+      }
+    }
+  >
+    <View>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#555",
+              "fontFamily": "Jost-Book",
+              "fontSize": 34.285714285714285,
+            },
+            undefined,
+          ]
+        }
+      >
+        cycle_length_explainer
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#555",
+              "fontFamily": "Jost-Book",
+              "fontSize": 34.285714285714285,
+            },
+            undefined,
+          ]
+        }
+      >
+        no_data
+      </Text>
+    </View>
+  </RCTScrollView>
+</RCTSafeAreaView>
+`;
+
+exports[`Stats screen when provided null, renders no_data text 1`] = `
+<RCTSafeAreaView
+  emulateUnlessSupported={true}
+  style={
+    Object {
+      "backgroundColor": "#E9F2ED",
+      "flex": 1,
+    }
+  }
+>
+  <RCTScrollView
+    contentContainerStyle={
+      Object {
+        "paddingHorizontal": 34.285714285714285,
+        "paddingTop": 34.285714285714285,
+      }
+    }
+  >
+    <View>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#555",
+              "fontFamily": "Jost-Book",
+              "fontSize": 34.285714285714285,
+            },
+            undefined,
+          ]
+        }
+      >
+        cycle_length_explainer
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#555",
+              "fontFamily": "Jost-Book",
+              "fontSize": 34.285714285714285,
+            },
+            undefined,
+          ]
+        }
+      >
+        no_data
+      </Text>
+    </View>
+  </RCTScrollView>
+</RCTSafeAreaView>
+`;
+
+exports[`Stats screen when provided undefined, renders no_data text 1`] = `
+<RCTSafeAreaView
+  emulateUnlessSupported={true}
+  style={
+    Object {
+      "backgroundColor": "#E9F2ED",
+      "flex": 1,
+    }
+  }
+>
+  <RCTScrollView
+    contentContainerStyle={
+      Object {
+        "paddingHorizontal": 34.285714285714285,
+        "paddingTop": 34.285714285714285,
+      }
+    }
+  >
+    <View>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#555",
+              "fontFamily": "Jost-Book",
+              "fontSize": 34.285714285714285,
+            },
+            undefined,
+          ]
+        }
+      >
+        cycle_length_explainer
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#555",
+              "fontFamily": "Jost-Book",
+              "fontSize": 34.285714285714285,
+            },
+            undefined,
+          ]
+        }
+      >
+        no_data
+      </Text>
+    </View>
+  </RCTScrollView>
+</RCTSafeAreaView>
+`;

test/components/common/AppHelp.spec.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+
+import AppHelp from '../../../components/common/AppHelp'
+
+describe('AppHelp screen', () => {
+  test('when provided text, should render it', async () => {
+    const text = 'Some help test'
+    const { toJSON } = render(<AppHelp text={text} />)
+
+    expect(toJSON()).toMatchSnapshot()
+  })
+})

test/components/common/Footnote.spec.js

@@ -1,19 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import Footnote from '../../../components/common/Footnote'
-
-describe('Footnote component', () => {
-  test('when children are present, renders them', () => {
-    const text = 'Some footnote text'
-    const { toJSON } = render(<Footnote>{text}</Footnote>)
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  test('when no children, renders nothing', () => {
-    const { toJSON } = render(<Footnote></Footnote>)
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-})

test/components/common/StatsOverview.spec.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+
+import StatsOverview from '../../../components/common/StatsOverview'
+
+describe('StatsOverview screen', () => {
+  test('when provided correct, renders it', async () => {
+    const data = [
+      [21, 'shortest'],
+      [21, 'longest'],
+      [0, 'standard deviation'],
+      [2, 'completed cycles'],
+    ]
+    const { toJSON } = render(<StatsOverview data={data} />)
+
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  test('when provided empty data, renders nothing (does not break)', async () => {
+    const data = []
+    const { toJSON } = render(<StatsOverview data={data} />)
+
+    expect(toJSON()).toMatchSnapshot()
+  })
+})

test/components/common/StatsTable.spec.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+
+import StatsTable from '../../../components/common/StatsTable'
+
+const mockGetStats = jest
+  .fn()
+  .mockImplementationOnce(() => [
+    { date: '2022-07-01', cycleLength: 31, bleedingLength: 5 },
+    { date: '2022-06-01', cycleLength: 31, bleedingLength: 5 },
+  ])
+  .mockImplementationOnce(() => [])
+  .mockImplementationOnce(() => null)
+  .mockImplementationOnce(() => undefined)
+
+jest.mock('../../../lib/cycle', () => ({
+  __esModule: true,
+  default: () => ({
+    getStats: mockGetStats,
+  }),
+}))
+
+describe('StatsTable screen', () => {
+  test('when provided correct data set, renders it', async () => {
+    const { toJSON } = render(<StatsTable onClose={jest.fn()} />)
+
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  test('when provided no data, renders nothing', async () => {
+    const { toJSON } = render(<StatsTable onClose={jest.fn()} />)
+
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  test('when provided null, renders nothing', async () => {
+    const { toJSON } = render(<StatsTable onClose={jest.fn()} />)
+
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  test('when provided undefined, renders nothing', async () => {
+    const { toJSON } = render(<StatsTable onClose={jest.fn()} />)
+
+    expect(toJSON()).toMatchSnapshot()
+  })
+})

test/components/common/__snapshots__/AppHelp.spec.js.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Footnote component when children are present, renders them 1`] = `
+exports[`AppHelp screen when provided text, should render it 1`] = `
 <View
   style={
     Object {
-      "alignContent": "flex-start",
+      "alignItems": "center",
       "flexDirection": "row",
-      "marginBottom": 8.571428571428571,
-      "marginTop": 34.285714285714285,
+      "justifyContent": "space-between",
+      "padding": 34.285714285714285,
     }
   }
 >
@@ -20,7 +20,13 @@ exports[`Footnote component when children are present, renders them 1`] = `
           "fontSize": 34.285714285714285,
         },
         Object {
-          "color": "#F38337",
+          "alignSelf": "flex-start",
+          "color": "#3A2671",
+          "fontFamily": "Jost-Bold",
+          "fontSize": 27.857142857142858,
+          "paddingRight": 34.285714285714285,
+          "textAlignVertical": "center",
+          "textTransform": "uppercase",
         },
       ]
     }
@@ -28,11 +34,6 @@ exports[`Footnote component when children are present, renders them 1`] = `
     *
   </Text>
   <Text
-    linkStyle={
-      Object {
-        "color": "white",
-      }
-    }
     style={
       Array [
         Object {
@@ -40,16 +41,11 @@ exports[`Footnote component when children are present, renders them 1`] = `
           "fontFamily": "Jost-Book",
           "fontSize": 34.285714285714285,
         },
-        Object {
-          "color": "#555",
-          "paddingLeft": 21.428571428571427,
-        },
+        undefined,
       ]
     }
   >
-    Some footnote text
+    Some help test
   </Text>
 </View>
 `;
-
-exports[`Footnote component when no children, renders nothing 1`] = `null`;

test/components/common/__snapshots__/StatsOverview.spec.js.snap

@@ -0,0 +1,321 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StatsOverview screen when provided correct, renders it 1`] = `
+Array [
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "alignItems": "flex-end",
+          "flex": 3,
+          "justifyContent": "center",
+        }
+      }
+    >
+      <Text
+        ellipsizeMode="clip"
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "color": "#555",
+              "fontFamily": "Jost-Book",
+              "fontSize": 34.285714285714285,
+            },
+            Object {
+              "color": "#3A2671",
+              "fontFamily": "Jost-Bold",
+              "fontSize": 64.28571428571428,
+              "marginRight": 8.571428571428571,
+              "textAlignVertical": "center",
+              "textTransform": "uppercase",
+            },
+          ]
+        }
+      >
+        21
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "flex": 5,
+          "flexDirection": "row",
+        }
+      }
+    >
+      <Text
+        ellipsizeMode="tail"
+        numberOfLines={2}
+        style={
+          Array [
+            Object {
+              "color": "#555",
+              "fontFamily": "Jost-Book",
+              "fontSize": 34.285714285714285,
+            },
+            Object {
+              "color": "#F38337",
+              "fontFamily": "Jost-Bold",
+              "fontSize": 27.857142857142858,
+              "margin": 15,
+              "textAlignVertical": "center",
+              "textTransform": "uppercase",
+            },
+          ]
+        }
+      >
+        shortest
+      </Text>
+    </View>
+  </View>,
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "alignItems": "flex-end",
+          "flex": 3,
+          "justifyContent": "center",
+        }
+      }
+    >
+      <Text
+        ellipsizeMode="clip"
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "color": "#555",
+              "fontFamily": "Jost-Book",
+              "fontSize": 34.285714285714285,
+            },
+            Object {
+              "color": "#3A2671",
+              "fontFamily": "Jost-Bold",
+              "fontSize": 64.28571428571428,
+              "marginRight": 8.571428571428571,
+              "textAlignVertical": "center",
+              "textTransform": "uppercase",
+            },
+          ]
+        }
+      >
+        21
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "flex": 5,
+          "flexDirection": "row",
+        }
+      }
+    >
+      <Text
+        ellipsizeMode="tail"
+        numberOfLines={2}
+        style={
+          Array [
+            Object {
+              "color": "#555",
+              "fontFamily": "Jost-Book",
+              "fontSize": 34.285714285714285,
+            },
+            Object {
+              "color": "#F38337",
+              "fontFamily": "Jost-Bold",
+              "fontSize": 27.857142857142858,
+              "margin": 15,
+              "textAlignVertical": "center",
+              "textTransform": "uppercase",
+            },
+          ]
+        }
+      >
+        longest
+      </Text>
+    </View>
+  </View>,
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "alignItems": "flex-end",
+          "flex": 3,
+          "justifyContent": "center",
+        }
+      }
+    >
+      <Text
+        ellipsizeMode="clip"
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "color": "#555",
+              "fontFamily": "Jost-Book",
+              "fontSize": 34.285714285714285,
+            },
+            Object {
+              "color": "#3A2671",
+              "fontFamily": "Jost-Bold",
+              "fontSize": 64.28571428571428,
+              "marginRight": 8.571428571428571,
+              "textAlignVertical": "center",
+              "textTransform": "uppercase",
+            },
+          ]
+        }
+      >
+        0
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "flex": 5,
+          "flexDirection": "row",
+        }
+      }
+    >
+      <Text
+        ellipsizeMode="tail"
+        numberOfLines={2}
+        style={
+          Array [
+            Object {
+              "color": "#555",
+              "fontFamily": "Jost-Book",
+              "fontSize": 34.285714285714285,
+            },
+            Object {
+              "color": "#F38337",
+              "fontFamily": "Jost-Bold",
+              "fontSize": 27.857142857142858,
+              "margin": 15,
+              "textAlignVertical": "center",
+              "textTransform": "uppercase",
+            },
+          ]
+        }
+      >
+        standard deviation
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#555",
+              "fontFamily": "Jost-Book",
+              "fontSize": 34.285714285714285,
+            },
+            Object {
+              "color": "#3A2671",
+              "fontFamily": "Jost-Bold",
+              "fontSize": 64.28571428571428,
+              "marginRight": 8.571428571428571,
+              "textAlignVertical": "center",
+              "textTransform": "uppercase",
+            },
+          ]
+        }
+      >
+        *
+      </Text>
+    </View>
+  </View>,
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "alignItems": "flex-end",
+          "flex": 3,
+          "justifyContent": "center",
+        }
+      }
+    >
+      <Text
+        ellipsizeMode="clip"
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "color": "#555",
+              "fontFamily": "Jost-Book",
+              "fontSize": 34.285714285714285,
+            },
+            Object {
+              "color": "#3A2671",
+              "fontFamily": "Jost-Bold",
+              "fontSize": 64.28571428571428,
+              "marginRight": 8.571428571428571,
+              "textAlignVertical": "center",
+              "textTransform": "uppercase",
+            },
+          ]
+        }
+      >
+        2
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "flex": 5,
+          "flexDirection": "row",
+        }
+      }
+    >
+      <Text
+        ellipsizeMode="tail"
+        numberOfLines={2}
+        style={
+          Array [
+            Object {
+              "color": "#555",
+              "fontFamily": "Jost-Book",
+              "fontSize": 34.285714285714285,
+            },
+            Object {
+              "color": "#F38337",
+              "fontFamily": "Jost-Bold",
+              "fontSize": 27.857142857142858,
+              "margin": 15,
+              "textAlignVertical": "center",
+              "textTransform": "uppercase",
+            },
+          ]
+        }
+      >
+        completed cycles
+      </Text>
+    </View>
+  </View>,
+]
+`;
+
+exports[`StatsOverview screen when provided empty data, renders nothing (does not break) 1`] = `null`;

test/components/common/__snapshots__/StatsTable.spec.js.snap

@@ -0,0 +1,433 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StatsTable screen when provided correct data set, renders it 1`] = `
+<View
+  style={
+    Object {
+      "alignSelf": "center",
+      "backgroundColor": "#E9F2ED",
+      "marginTop": 137.14285714285714,
+      "maxHeight": 933.8,
+      "minHeight": "40%",
+      "position": "absolute",
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "justifyContent": "flex-end",
+        "paddingRight": 34.285714285714285,
+        "paddingTop": 34.285714285714285,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 39.23529411764706,
+          "left": 42.857142857142854,
+          "right": 42.857142857142854,
+          "top": 39.23529411764706,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignSelf": "flex-start",
+          "marginBottom": 34.285714285714285,
+          "opacity": 1,
+        }
+      }
+    >
+      <Text
+        allowFontScaling={false}
+        selectable={false}
+        style={
+          Array [
+            Object {
+              "color": undefined,
+              "fontSize": 12,
+            },
+            Array [
+              Object {
+                "fontSize": 47.14285714285714,
+              },
+              undefined,
+              Object {
+                "color": "#F38337",
+              },
+            ],
+            Object {
+              "fontFamily": "Entypo",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            Object {},
+          ]
+        }
+      >
+        
+      </Text>
+    </View>
+  </View>
+  <RCTScrollView
+    ItemSeparatorComponent={[Function]}
+    ListHeaderComponent={[Function]}
+    ListHeaderComponentStyle={
+      Object {
+        "borderBottomColor": "#3A2671",
+        "borderBottomWidth": 2,
+      }
+    }
+    contentContainerStyle={
+      Object {
+        "paddingHorizontal": 34.285714285714285,
+      }
+    }
+    data={
+      Array [
+        Object {
+          "bleedingLength": 5,
+          "cycleLength": 31,
+          "date": "2022-07-01",
+        },
+        Object {
+          "bleedingLength": 5,
+          "cycleLength": 31,
+          "date": "2022-06-01",
+        },
+      ]
+    }
+    getItem={[Function]}
+    getItemCount={[Function]}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    removeClippedSubviews={false}
+    renderItem={[Function]}
+    scrollEventThrottle={50}
+    stickyHeaderIndices={
+      Array [
+        0,
+      ]
+    }
+    viewabilityConfigCallbackPairs={Array []}
+  >
+    <View>
+      <View
+        onLayout={[Function]}
+        style={
+          Object {
+            "borderBottomColor": "#3A2671",
+            "borderBottomWidth": 2,
+          }
+        }
+      >
+        <View
+          style={
+            Object {
+              "backgroundColor": "#E9F2ED",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "paddingVertical": 8.571428571428571,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 3,
+                "justifyContent": "center",
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#555",
+                    "fontFamily": "Jost-Book",
+                    "fontSize": 34.285714285714285,
+                  },
+                  Object {
+                    "color": "#F38337",
+                    "fontFamily": "Jost-Bold",
+                    "fontSize": 27.857142857142858,
+                    "paddingVertical": 21.428571428571427,
+                    "textAlignVertical": "center",
+                    "textTransform": "uppercase",
+                  },
+                ]
+              }
+            >
+              cycle_start
+            </Text>
+          </View>
+          <View
+            style={
+              Object {
+                "flex": 2,
+                "justifyContent": "center",
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#555",
+                    "fontFamily": "Jost-Book",
+                    "fontSize": 34.285714285714285,
+                  },
+                  Object {
+                    "color": "#F38337",
+                    "fontFamily": "Jost-Bold",
+                    "fontSize": 27.857142857142858,
+                    "paddingVertical": 21.428571428571427,
+                    "textAlignVertical": "center",
+                    "textTransform": "uppercase",
+                  },
+                ]
+              }
+            >
+              cycle_length
+            </Text>
+          </View>
+          <View
+            style={
+              Object {
+                "flex": 2,
+                "justifyContent": "center",
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#555",
+                    "fontFamily": "Jost-Book",
+                    "fontSize": 34.285714285714285,
+                  },
+                  Object {
+                    "color": "#F38337",
+                    "fontFamily": "Jost-Bold",
+                    "fontSize": 27.857142857142858,
+                    "paddingVertical": 21.428571428571427,
+                    "textAlignVertical": "center",
+                    "textTransform": "uppercase",
+                  },
+                ]
+              }
+            >
+              bleeding
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          style={
+            Object {
+              "backgroundColor": "#E9F2ED",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "paddingVertical": 8.571428571428571,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 3,
+                "justifyContent": "center",
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#555",
+                    "fontFamily": "Jost-Book",
+                    "fontSize": 34.285714285714285,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              01. Jul 22
+            </Text>
+          </View>
+          <View
+            style={
+              Object {
+                "flex": 2,
+                "justifyContent": "center",
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#555",
+                    "fontFamily": "Jost-Book",
+                    "fontSize": 34.285714285714285,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              day{"count":31}
+            </Text>
+          </View>
+          <View
+            style={
+              Object {
+                "flex": 2,
+                "justifyContent": "center",
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#555",
+                    "fontFamily": "Jost-Book",
+                    "fontSize": 34.285714285714285,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              day{"count":5}
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            Object {
+              "backgroundColor": "#888",
+              "height": 1,
+              "width": "100%",
+            }
+          }
+        />
+      </View>
+      <View
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          style={
+            Object {
+              "backgroundColor": "#E9F2ED",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "paddingVertical": 8.571428571428571,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 3,
+                "justifyContent": "center",
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#555",
+                    "fontFamily": "Jost-Book",
+                    "fontSize": 34.285714285714285,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              01. Jun 22
+            </Text>
+          </View>
+          <View
+            style={
+              Object {
+                "flex": 2,
+                "justifyContent": "center",
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#555",
+                    "fontFamily": "Jost-Book",
+                    "fontSize": 34.285714285714285,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              day{"count":31}
+            </Text>
+          </View>
+          <View
+            style={
+              Object {
+                "flex": 2,
+                "justifyContent": "center",
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#555",
+                    "fontFamily": "Jost-Book",
+                    "fontSize": 34.285714285714285,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              day{"count":5}
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </RCTScrollView>
+</View>
+`;
+
+exports[`StatsTable screen when provided no data, renders nothing 1`] = `null`;
+
+exports[`StatsTable screen when provided null, renders nothing 1`] = `null`;
+
+exports[`StatsTable screen when provided undefined, renders nothing 1`] = `null`;

test/components/settings/License.spec.js

@@ -1,14 +1,7 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react-native'
-import License from '../components/settings/License'
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (str, options) => {
-      return str + (options ? JSON.stringify(options) : '')
-    },
-  }),
-}))
+import License from '../../../components/settings/License'
 
 describe('License screen', () => {
   test('It should have a correct year', async () => {

test/components/stats.spec.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import Stats from '../../components/stats'
+
+jest.mock('../../components/common/AppHelp', () => 'AppHelp')
+jest.mock('../../components/common/StatsOverview', () => 'StatsOverview')
+jest.mock('../../components/common/StatsTable', () => 'StatsTable')
+
+const mockGetAllCycleLengths = jest
+  .fn()
+  .mockImplementationOnce(() => [])
+  .mockImplementationOnce(() => [30, 31, 30])
+  .mockImplementationOnce(() => null)
+  .mockImplementationOnce(() => undefined)
+  .mockImplementationOnce(() => [30, 31, 30])
+
+jest.mock('../../lib/cycle', () => ({
+  __esModule: true,
+  default: () => ({
+    getAllCycleLengths: mockGetAllCycleLengths,
+  }),
+}))
+
+describe('Stats screen', () => {
+  test('when provided no data, renders no_data text', async () => {
+    const { toJSON } = render(<Stats />)
+
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  test('when provided data, renders stats', async () => {
+    const { toJSON } = render(<Stats />)
+
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  test('when provided null, renders no_data text', async () => {
+    const { toJSON } = render(<Stats />)
+
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  test('when provided undefined, renders no_data text', async () => {
+    const { toJSON } = render(<Stats />)
+
+    expect(toJSON()).toMatchSnapshot()
+  })
+
+  test('when button is clicked, StatsTable is rendered', async () => {
+    const { getByText, findByTestId } = render(<Stats />)
+    const button = getByText('show_stats')
+
+    fireEvent(button, 'click')
+
+    await expect(findByTestId('statsTable')).toBeTruthy()
+  })
+})

test/file-mock.js

@@ -0,0 +1 @@
+module.exports = 123

test/jest-setup.js

@@ -0,0 +1,8 @@
+// Import Jest Native matchers
+import '@testing-library/jest-native/extend-expect'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (str, options) => str + (options ? JSON.stringify(options) : ''),
+  }),
+}))

yarn.lock

@@ -1197,13 +1197,6 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@egjs/hammerjs@^2.0.17":
-  version "2.0.17"
-  resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
-  integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
-  dependencies:
-    "@types/hammerjs" "^2.0.36"
-
 "@eslint/eslintrc@^0.2.1":
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.2.2.tgz#d01fc791e2fc33e88a29d6f3dc7e93d0cd784b76"
@@ -1716,66 +1709,6 @@
   resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa"
   integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ==
 
-"@react-navigation/bottom-tabs@^6.4.0":
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-6.4.0.tgz#63743874648f92adedf37186cb7cedcd47826ee9"
-  integrity sha512-90CapiXjiWudbCiki9e6fOr/CECQRguIxv5OD7IBfbAMGX5GGiJpX8aqiHAz2DxpAz31v4JZcUr945+lFhXBfA==
-  dependencies:
-    "@react-navigation/elements" "^1.3.6"
-    color "^4.2.3"
-    warn-once "^0.1.0"
-
-"@react-navigation/core@^6.4.0":
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.4.0.tgz#c44d33a8d8ef010a102c7f831fc8add772678509"
-  integrity sha512-tpc0Ak/DiHfU3LlYaRmIY7vI4sM/Ru0xCet6runLUh9aABf4wiLgxyFJ5BtoWq6xFF8ymYEA/KWtDhetQ24YiA==
-  dependencies:
-    "@react-navigation/routers" "^6.1.3"
-    escape-string-regexp "^4.0.0"
-    nanoid "^3.1.23"
-    query-string "^7.0.0"
-    react-is "^16.13.0"
-    use-latest-callback "^0.1.5"
-
-"@react-navigation/elements@^1.3.6":
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.6.tgz#fa700318528db93f05144b1be4b691b9c1dd1abe"
-  integrity sha512-pNJ8R9JMga6SXOw6wGVN0tjmE6vegwPmJBL45SEMX2fqTfAk2ykDnlJHodRpHpAgsv0DaI8qX76z3A+aqKSU0w==
-
-"@react-navigation/native-stack@^6.9.0":
-  version "6.9.0"
-  resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-6.9.0.tgz#1e79e06da8b81f0368d3709aedca269947da3649"
-  integrity sha512-cwqm/2GO0hf94OFRuH6R0beZPVKY4vMFxrdAPaDwwoukN5a0UgcsMYxrN8s2huwssTCuGScABFME9GnqG5hC5w==
-  dependencies:
-    "@react-navigation/elements" "^1.3.6"
-    warn-once "^0.1.0"
-
-"@react-navigation/native@^6.0.13":
-  version "6.0.13"
-  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.0.13.tgz#ec504120e193ea6a7f24ffa765a1338be5a3160a"
-  integrity sha512-CwaJcAGbhv3p3ECablxBkw8QBCGDWXqVRwQ4QbelajNW623m3sNTC9dOF6kjp8au6Rg9B5e0KmeuY0xWbPk79A==
-  dependencies:
-    "@react-navigation/core" "^6.4.0"
-    escape-string-regexp "^4.0.0"
-    fast-deep-equal "^3.1.3"
-    nanoid "^3.1.23"
-
-"@react-navigation/routers@^6.1.3":
-  version "6.1.3"
-  resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-6.1.3.tgz#1df51959e9a67c44367462e8b929b7360a5d2555"
-  integrity sha512-idJotMEzHc3haWsCh7EvnnZMKxvaS4YF/x2UyFBkNFiEFUaEo/1ioQU6qqmVLspdEv4bI/dLm97hQo7qD8Yl7Q==
-  dependencies:
-    nanoid "^3.1.23"
-
-"@react-navigation/stack@^6.3.1":
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-6.3.1.tgz#71f53d7598332765da08f78b56aeae245cc98cb6"
-  integrity sha512-WkURDiSip8QpB+cuEbp5GfDPDGxER7w7ooJVgG3J2nJNnYuKxsZR7qnlqWL2vjQW81NzKQpT7xrCADy+mfvIiQ==
-  dependencies:
-    "@react-navigation/elements" "^1.3.6"
-    color "^4.2.3"
-    warn-once "^0.1.0"
-
 "@realm.io/common@^0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@realm.io/common/-/common-0.1.1.tgz#2950846cbedd14bdfdc1175d7c3119c3469547b0"
@@ -1875,11 +1808,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/hammerjs@^2.0.36":
-  version "2.0.41"
-  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.41.tgz#f6ecf57d1b12d2befcce00e928a6a097c22980aa"
-  integrity sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@@ -2730,7 +2658,7 @@ character-reference-invalid@^1.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
   integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
 
-chownr@^1.1.1:
+chownr@^1.1.1, chownr@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
@@ -2865,27 +2793,11 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@^1.0.0, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
-  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
-color@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
-  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
-  dependencies:
-    color-convert "^2.0.1"
-    color-string "^1.9.0"
-
 colorette@^1.0.7, colorette@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
@@ -3480,11 +3392,6 @@ escape-string-regexp@^2.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
   integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
 
-escape-string-regexp@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
-  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
-
 eslint-plugin-react@^7.8.2:
   version "7.25.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.25.2.tgz#d567a217d306b76dd110561f28074e2328ae38f8"
@@ -3746,7 +3653,7 @@ extsprintf@1.3.0, extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
   integrity sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==
 
-fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+fast-deep-equal@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@@ -3810,11 +3717,6 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-filter-obj@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
-  integrity sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==
-
 finalhandler@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@@ -3953,6 +3855,13 @@ fs-extra@^8.1.0:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
+fs-minipass@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
+  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
+  dependencies:
+    minipass "^2.6.0"
+
 fs-minipass@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
@@ -4092,7 +4001,7 @@ glob-parent@^5.0.0:
   dependencies:
     is-glob "^4.0.1"
 
-glob@^7.0.0, glob@^7.1.3, glob@^7.1.4:
+glob@^7.0.0, glob@^7.0.3, glob@^7.1.3, glob@^7.1.4:
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
   integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
@@ -4243,7 +4152,7 @@ hermes-profile-transformer@^0.0.6:
   dependencies:
     source-map "^0.7.3"
 
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -4481,11 +4390,6 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
-is-arrayish@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
-  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
-
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -5399,11 +5303,6 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
 
-jshashes@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/jshashes/-/jshashes-1.0.8.tgz#f60d837428383abf73ab022e1542e6614bd75514"
-  integrity sha512-btmQZ/w1rj8Lb6nEwvhjM7nBYoj54yaEFo2PWh3RkxZ8qNwuvOxvQYN/JxVuwoMmdIluL+XwYVJ+pEEZoSYybQ==
-
 json-parse-better-errors@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
@@ -5582,7 +5481,7 @@ lodash@^2.4.1:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-2.4.2.tgz#fadd834b9683073da179b3eae6d9c0d15053f73e"
   integrity sha512-Kak1hi6/hYHGVPmdyiZijoQyz5x2iGVzs6w9GYB/HiXEtylY7tIoYEROMjvM1d9nXJqPOrG2MNPMn01bJ+S0Rw==
 
-lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.3:
+lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.3:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -6064,6 +5963,14 @@ minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
+minipass@^2.6.0, minipass@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
+  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
+  dependencies:
+    safe-buffer "^5.1.2"
+    yallist "^3.0.0"
+
 minipass@^3.0.0:
   version "3.1.6"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.6.tgz#3b8150aa688a711a1521af5e8779c1d3bb4f45ee"
@@ -6071,6 +5978,13 @@ minipass@^3.0.0:
   dependencies:
     yallist "^4.0.0"
 
+minizlib@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
+  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
+  dependencies:
+    minipass "^2.9.0"
+
 minizlib@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
@@ -6092,7 +6006,7 @@ mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
   resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
   integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
 
-mkdirp@^0.5.1:
+mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.5:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
   integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
@@ -6150,11 +6064,6 @@ multimatch@^4.0.0:
     arrify "^2.0.1"
     minimatch "^3.0.4"
 
-nanoid@^3.1.23:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
-  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
-
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -6182,6 +6091,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+ncp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
+  integrity sha512-zIdGUrPRFTUELUvr3Gmc7KZ2Sw/h1PiVM0Af/oHB6zgnV1ikqSfRk+TOufi79aHYCW3NiOXmr1BP5nWbzojLaA==
+
 negotiator@0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
@@ -6259,6 +6173,40 @@ node-stream-zip@^1.9.1:
   resolved "https://registry.yarnpkg.com/node-stream-zip/-/node-stream-zip-1.15.0.tgz#158adb88ed8004c6c49a396b50a6a5de3bca33ea"
   integrity sha512-LN4fydt9TqhZhThkZIVQnF9cwjU3qmUH9h78Mx/K7d3VvfRqqwthLwJEUOEL0QPZ0XQmNN7be5Ggit5+4dq3Bw==
 
+nodejs-mobile-gyp@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/nodejs-mobile-gyp/-/nodejs-mobile-gyp-0.3.1.tgz#e37357cc74b70a15b57c1ec4bd1d0fdd6b80e1e6"
+  integrity sha512-AcS4xbeWjOIfLQ+xZp0m7zEhd263v33O54OeJz/ObzpqvN1LXoph7ceeTQVrmp1YL0zSoUxX3s8AinotR8OgVg==
+  dependencies:
+    glob "^7.0.3"
+    graceful-fs "^4.1.2"
+    mkdirp "^0.5.0"
+    nopt "2 || 3"
+    npmlog "0 || 1 || 2 || 3 || 4"
+    osenv "0"
+    request "^2.87.0"
+    rimraf "2"
+    semver "~5.3.0"
+    tar "^4.4.8"
+    which "1"
+
+nodejs-mobile-react-native@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/nodejs-mobile-react-native/-/nodejs-mobile-react-native-0.8.2.tgz#bf3d18602d970419967212fd9d4a4c28f9953a18"
+  integrity sha512-+W0cYzZdA8SANe0/gi84NyOxoPE7ttwJeGr7r9DZvwek3xhEUhpiUk6JdxgrvjTx+J+jPXBcXbsCuLElp+JxHw==
+  dependencies:
+    mkdirp "^0.5.1"
+    ncp "^2.0.0"
+    nodejs-mobile-gyp "^0.3.1"
+    xcode "^2.0.0"
+
+"nopt@2 || 3":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  integrity sha512-4GUt3kSEYmk4ITxzB/b9vaIDfUVWN/Ml1Fwl11IlnIG2iaJ9O6WXZ9SrYM9NLI8OCBieN2Y8SWC2oJV0RQ7qYg==
+  dependencies:
+    abbrev "1"
+
 nopt@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
@@ -6292,7 +6240,7 @@ npm-run-path@^4.0.0, npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
-npmlog@^4.0.1:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.1:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -6497,11 +6445,24 @@ ora@^3.4.0:
     strip-ansi "^5.2.0"
     wcwidth "^1.0.1"
 
+os-homedir@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+  integrity sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==
+
 os-tmpdir@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
 
+osenv@0:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
+  integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
+  dependencies:
+    os-homedir "^1.0.0"
+    os-tmpdir "^1.0.0"
+
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
@@ -6846,16 +6807,6 @@ qs@^6.1.0, qs@~6.5.2:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
-query-string@^7.0.0:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.1.tgz#754620669db978625a90f635f12617c271a088e1"
-  integrity sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w==
-  dependencies:
-    decode-uri-component "^0.2.0"
-    filter-obj "^1.1.0"
-    split-on-first "^1.0.0"
-    strict-uri-encode "^2.0.0"
-
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@@ -6884,11 +6835,6 @@ react-devtools-core@4.19.1:
     shell-quote "^1.6.1"
     ws "^7"
 
-react-freeze@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.3.tgz#5e3ca90e682fed1d73a7cb50c2c7402b3e85618d"
-  integrity sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==
-
 react-i18next@^11.18.3:
   version "11.18.3"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.18.3.tgz#50211810bcc9fdea2d70c8aefdfff5f1eb39a923"
@@ -6902,7 +6848,7 @@ react-i18next@^11.18.3:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -6952,17 +6898,6 @@ react-native-fs@^2.20.0:
     base-64 "^0.1.0"
     utf8 "^3.0.0"
 
-react-native-gesture-handler@^2.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.6.2.tgz#f3b68d374f5dda603ff29f7df2edb39472eb97ce"
-  integrity sha512-Ff/WKlR8KiM1wq7UJZvIyCB+OsweewaeZk+4RDIYNGM9tvNIAXEm/MtYnLHiBXiSJjZItF/8B83gE6pVq40vIw==
-  dependencies:
-    "@egjs/hammerjs" "^2.0.17"
-    hoist-non-react-statics "^3.3.0"
-    invariant "^2.2.4"
-    lodash "^4.17.21"
-    prop-types "^15.7.2"
-
 react-native-modal-datetime-picker@14.0.0:
   version "14.0.0"
   resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-14.0.0.tgz#ca2c81a275ee3a23d9ad02113e76ed243c90781e"
@@ -6977,19 +6912,6 @@ react-native-push-notification@3.2.1:
   dependencies:
     "@react-native-community/push-notification-ios" "^1.0.1"
 
-react-native-safe-area-context@^4.3.4:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.3.4.tgz#79060fcc02ef38d6fd7afdf87b2301b06bd99fe9"
-  integrity sha512-4dFZPDHRigZ+uw8HCmMLyC/IT1BG0B9QLvuwsBQAMDCRSrxISIYza9VIbsIn2FGvZiQ1gOoXBHDmy9WFihQsTg==
-
-react-native-screens@^3.17.0:
-  version "3.17.0"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.17.0.tgz#b099b3ec9d46de07c857f14d713c293024c7c842"
-  integrity sha512-OZCQU7+3neHNaM19jBkYRjL50kXz7p7MUgWQTCcdRoshcCiolf8aXs4eRVQKGK6m1RmoB8UL0//m5R9KoR+41w==
-  dependencies:
-    react-freeze "^1.0.0"
-    warn-once "^0.1.0"
-
 react-native-share@^7.9.0:
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/react-native-share/-/react-native-share-7.9.0.tgz#31f28d85201bada5e511c5f14d5935df2166fe93"
@@ -7332,7 +7254,7 @@ replace-ext@1.0.0:
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
   integrity sha512-vuNYXC7gG7IeVNBC1xUllqCcZKRbJoSPOBhnTEcAIiKCsbuef6zO3F0Rve3isPMMoNoQRWjQwbAgAjHUHniyEA==
 
-request@^2.88.0:
+request@^2.87.0, request@^2.88.0:
   version "2.88.2"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
   integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
@@ -7434,6 +7356,13 @@ ret@~0.1.10:
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
   integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 
+rimraf@2, rimraf@^2.5.4:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@2.6.3, rimraf@~2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
@@ -7441,13 +7370,6 @@ rimraf@2.6.3, rimraf@~2.6.2:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^2.5.4:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  dependencies:
-    glob "^7.1.3"
-
 rimraf@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -7470,6 +7392,11 @@ safe-buffer@5.1.2, safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, s
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
+safe-buffer@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@@ -7537,6 +7464,11 @@ semver@^7.2.1, semver@^7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+  integrity sha512-mfmm3/H9+67MCVix1h+IXTpDwL6710LyHuk7+cWC9T1mE0qz4iHhh6r4hU2wrIT9iTsAAC2XQRvfblL028cpLw==
+
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
@@ -7689,13 +7621,6 @@ simple-plist@^1.0.0:
     bplist-parser "0.2.0"
     plist "^3.0.1"
 
-simple-swizzle@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
-  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
-  dependencies:
-    is-arrayish "^0.3.1"
-
 sisteransi@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -7792,11 +7717,6 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
   integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
 
-split-on-first@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
-  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
-
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -7876,11 +7796,6 @@ stream-counter@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-counter/-/stream-counter-1.0.0.tgz#91cf2569ce4dc5061febcd7acb26394a5a114751"
   integrity sha512-4nfHc1016AhNOs0CFDR3S0FNeqnYbT7xZ408coajcx2Msj8malNNjvFHzWYIfIAXNK5i0eaKIVfgBYPOkyOTIg==
 
-strict-uri-encode@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
-  integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
-
 string-length@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
@@ -8123,6 +8038,19 @@ tar-stream@^2.1.4:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
+tar@^4.4.8:
+  version "4.4.19"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.19.tgz#2e4d7263df26f2b914dee10c825ab132123742f3"
+  integrity sha512-a20gEsvHnWe0ygBY8JbxoM4w3SJdhc7ZAuxkLqh+nvNQN2IOt0B5lLgM490X5Hl8FF0dl0tOf2ewFYAlIFgzVA==
+  dependencies:
+    chownr "^1.1.4"
+    fs-minipass "^1.2.7"
+    minipass "^2.9.0"
+    minizlib "^1.3.3"
+    mkdirp "^0.5.5"
+    safe-buffer "^5.2.1"
+    yallist "^3.1.1"
+
 tar@^6.0.1:
   version "6.1.11"
   resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.11.tgz#6760a38f003afa1b2ffd0ffe9e9abbd0eab3d621"
@@ -8511,11 +8439,6 @@ url-parse@^1.4.4:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
-use-latest-callback@^0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/use-latest-callback/-/use-latest-callback-0.1.5.tgz#a4a836c08fa72f6608730b5b8f4bbd9c57c04f51"
-  integrity sha512-HtHatS2U4/h32NlkhupDsPlrbiD27gSH5swBdtXbCAlc6pfOFzaj0FehW/FO12rx8j2Vy4/lJScCiJyM01E+bQ==
-
 use-subscription@^1.0.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.8.0.tgz#f118938c29d263c2bce12fc5585d3fe694d4dbce"
@@ -8632,11 +8555,6 @@ walker@^1.0.7, walker@^1.0.8, walker@~1.0.5:
   dependencies:
     makeerror "1.0.12"
 
-warn-once@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43"
-  integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==
-
 wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
@@ -8677,7 +8595,7 @@ which-typed-array@^1.1.2:
     has-tostringtag "^1.0.0"
     is-typed-array "^1.1.9"
 
-which@^1.2.9:
+which@1, which@^1.2.9:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
@@ -8825,6 +8743,11 @@ yallist@^2.1.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
   integrity sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==
 
+yallist@^3.0.0, yallist@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"