Add new home screen

components/app-text.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { Text } from 'react-native'
 import styles from "../styles"
 
-export class AppText extends Component {
+export default class AppText extends Component {
   render() {
     return (
       <Text style={[styles.appText, this.props.style]}>
@@ -12,6 +12,16 @@ export class AppText extends Component {
   }
 }
 
+export class AppTextLight extends Component {
+  render() {
+    return (
+      <Text style={[styles.appTextLight, this.props.style]}>
+        {this.props.children}
+      </Text>
+    )
+  }
+}
+
 export class SymptomSectionHeader extends Component {
   render() {
     return (

components/app.js

@@ -40,20 +40,18 @@ export default class App extends Component {
   }
 
   navigate = (pageName, props) => {
-    const curr = this.state.currentPage
-    if (navigatingToCycleDayFromMainMenuEntry(pageName, curr)) {
-      this.cycleDayOrigin = curr
-    }
+    this.origin = this.state.currentPage
     this.setState({currentPage: pageName, currentProps: props})
   }
 
   handleBackButtonPress = () => {
     if (this.state.currentPage === 'Home') return false
     if (isSymptomView(this.state.currentPage)) {
-      this.navigate('CycleDay', { cycleDay: this.state.currentProps.cycleDay })
+      this.navigate(
+        this.origin, { cycleDay: this.state.currentProps.cycleDay }
+      )
     } else if(this.state.currentPage === 'CycleDay') {
-      this.navigate(this.cycleDayOrigin || 'Home')
-      this.cycleDayOrigin = null
+      this.navigate(this.origin)
     } else {
       this.navigate('Home')
     }
@@ -93,7 +91,3 @@ export default class App extends Component {
     )
   }
 }
-
-function navigatingToCycleDayFromMainMenuEntry(target, curr) {
-  return target === 'CycleDay' && ['Home', 'Calendar', 'Chart'].indexOf(curr) > -1
-}

components/chart/chart.js

@@ -10,7 +10,7 @@ import { getCycleDay, getCycleDaysSortedByDate, getAmountOfCycleDays } from '../
 import styles from './styles'
 import { scaleObservable } from '../../local-storage'
 import config from '../../config'
-import { AppText } from '../app-text'
+import AppText from '../app-text'
 import { shared as labels } from '../labels'
 import BleedingIcon from '../../assets/bleeding'
 import CervixIcon from '../../assets/cervix'

components/chart/y-axis.js

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import config from '../../config'
 import styles from './styles'
 import { scaleObservable, unitObservable } from '../../local-storage'
-import { AppText } from '../app-text'
+import AppText from '../app-text'
 
 export function makeYAxisLabels(columnHeight) {
   const units = unitObservable.value

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

@@ -11,8 +11,8 @@ import Header from '../header'
 import { getOrCreateCycleDay } from '../../db'
 import cycleModule from '../../lib/cycle'
 import styles from '../../styles'
-import * as labels from './labels/labels'
-import { AppText } from '../app-text'
+import * as labels from './labels'
+import AppText from '../app-text'
 import BleedingIcon from '../../assets/bleeding'
 import CervixIcon from '../../assets/cervix'
 import DesireIcon from '../../assets/desire'

components/cycle-day/labels.js

@@ -65,13 +65,6 @@ export const pain = {
   explainer: 'How did your body feel today?'
 }
 
-export const fertilityStatus = {
-  fertile: 'fertile',
-  infertile: 'infertile',
-  fertileUntilEvening: 'Fertile phase ends in the evening',
-  unknown: 'We cannot show any cycle information because no menses has been entered'
-}
-
 export const temperature = {
   outOfRangeWarning: 'This temperature value is out of the current range for the temperature chart. You can change the range in the settings.',
   outOfAbsoluteRangeWarning: 'This temperature value is too high or low to be shown on the temperature chart.',

components/cycle-day/labels/format.js

@@ -1,5 +0,0 @@
-import moment from "moment"
-
-export function formatDateForViewHeader(date) {
-  return moment(date).format('MMMM Do YYYY')
-}

components/cycle-day/select-box-group.js

@@ -4,7 +4,7 @@ import {
   TouchableOpacity,
 } from 'react-native'
 import styles from '../../styles'
-import { AppText } from '../app-text'
+import AppText from '../app-text'
 
 export default class SelectBoxGroup extends Component {
   render() {

components/cycle-day/select-tab-group.js

@@ -4,7 +4,7 @@ import {
   TouchableOpacity,
 } from 'react-native'
 import styles from '../../styles'
-import { AppText } from '../app-text'
+import AppText from '../app-text'
 
 export default class SelectTabGroup extends Component {
   render() {

components/cycle-day/symptoms/action-button-footer.js

@@ -5,7 +5,7 @@ import {
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { saveSymptom } from '../../../db'
 import styles, {iconStyles} from '../../../styles'
-import {sharedDialogs as labels} from '../labels/labels'
+import {sharedDialogs as labels} from '../labels'
 
 export default class ActionButtonFooter extends Component {
   render() {

components/cycle-day/symptoms/bleeding.js

@@ -6,7 +6,7 @@ import {
 } from 'react-native'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
-import { bleeding as labels } from '../labels/labels'
+import { bleeding as labels } from '../labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'

components/cycle-day/symptoms/cervix.js

@@ -6,7 +6,7 @@ import {
 } from 'react-native'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
-import { cervix as labels } from '../labels/labels'
+import { cervix as labels } from '../labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'

components/cycle-day/symptoms/desire.js

@@ -5,7 +5,7 @@ import {
 } from 'react-native'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
-import { intensity, desire } from '../labels/labels'
+import { intensity, desire } from '../labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'

components/cycle-day/symptoms/mucus.js

@@ -6,7 +6,7 @@ import {
 } from 'react-native'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
-import { mucus as labels } from '../labels/labels'
+import { mucus as labels } from '../labels'
 import computeSensiplanValue from '../../../lib/sensiplan-mucus'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'

components/cycle-day/symptoms/note.js

@@ -9,7 +9,7 @@ import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
 import ActionButtonFooter from './action-button-footer'
 import SymptomSection from './symptom-section'
-import { noteExplainer } from '../labels/labels'
+import { noteExplainer } from '../labels'
 
 export default class Note extends Component {
   constructor(props) {

components/cycle-day/symptoms/pain.js

@@ -5,7 +5,7 @@ import {
   View
 } from 'react-native'
 import { saveSymptom } from '../../../db'
-import { pain as labels } from '../labels/labels'
+import { pain as labels } from '../labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'

components/cycle-day/symptoms/sex.js

@@ -6,7 +6,7 @@ import {
 } from 'react-native'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
-import { sex as labels } from '../labels/labels'
+import { sex as labels } from '../labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'

components/cycle-day/symptoms/symptom-section.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { View } from 'react-native'
-import { SymptomSectionHeader, AppText } from '../../app-text'
+import AppText, { SymptomSectionHeader } from '../../app-text'
 
 export default class SymptomSection extends Component {
   render() {

components/cycle-day/symptoms/temperature.js

@@ -12,7 +12,7 @@ import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
 import { getPreviousTemperature, saveSymptom } from '../../../db'
 import styles from '../../../styles'
 import { LocalTime, ChronoUnit } from 'js-joda'
-import { temperature as labels } from '../labels/labels'
+import { temperature as labels } from '../labels'
 import { scaleObservable } from '../../../local-storage'
 import { shared } from '../../labels'
 import ActionButtonFooter from './action-button-footer'

components/header.js

@@ -4,11 +4,10 @@ import {
   Text,
   Dimensions
 } from 'react-native'
+import moment from 'moment'
 import styles, { iconStyles } from '../styles'
 import Icon from 'react-native-vector-icons/Entypo'
 import FeatherIcon from 'react-native-vector-icons/Feather'
-import { formatDateForViewHeader } from '../components/cycle-day/labels/format'
-
 
 export default class Header extends Component {
   render() {
@@ -27,7 +26,7 @@ export default class Header extends Component {
           />
           <View>
             <Text style={styles.dateHeader}>
-              {formatDateForViewHeader(this.props.date)}
+              {moment(this.props.date).format('MMMM Do YYYY')}
             </Text>
             {this.props.cycleDayNumber &&
               <Text style={styles.cycleDayNumber} >

components/home.js

@@ -1,108 +1,234 @@
 import React, { Component } from 'react'
-import {
-  View,
-  Button,
-  Text,
-  ScrollView
-} from 'react-native'
+import { ScrollView, View, TouchableOpacity, TouchableHighlight, Dimensions } from 'react-native'
 import { LocalDate, ChronoUnit } from 'js-joda'
-import styles from '../styles/index'
+import Icon from 'react-native-vector-icons/Entypo'
+import { secondaryColor, cycleDayColor, periodColor } from '../styles'
+import { home as labels, bleedingPrediction as predictLabels, shared } from './labels'
+import CycleCircle from '../assets/home-circle'
+import Drop from '../assets/home-drop'
 import cycleModule from '../lib/cycle'
-import { getOrCreateCycleDay, getBleedingDaysSortedByDate, fillWithMucusDummyData, fillWithCervixDummyData } from '../db'
-import {bleedingPrediction as labels} from './labels'
+import { getOrCreateCycleDay, getCycleDaysSortedByDate } from '../db'
+import { getFertilityStatusForDay } from '../lib/sympto-adapter'
+import styles from '../styles'
+import AppText, { AppTextLight } from './app-text'
 
 export default class Home extends Component {
   constructor(props) {
     super(props)
     this.getCycleDayNumber = cycleModule().getCycleDayNumber
+    this.getBleedingPrediction = cycleModule().getPredictedMenses
     this.todayDateString = LocalDate.now().toString()
-    const cycleDayNumber = this.getCycleDayNumber(this.todayDateString)
+    const prediction = this.getBleedingPrediction()
+    const fertilityStatus = getFertilityStatusForDay(this.todayDateString)
 
     this.state = {
-      welcomeText: determineWelcomeText(cycleDayNumber),
-      predictionText: determinePredictionText()
+      cycleDayNumber: this.getCycleDayNumber(this.todayDateString),
+      predictionText: determinePredictionText(prediction),
+      bleedingPredictionRange: getBleedingPredictionRange(prediction),
+      ...fertilityStatus
     }
 
-    this.bleedingDays = getBleedingDaysSortedByDate()
-    this.bleedingDays.addListener(this.setStateWithCurrentText)
+    this.cycleDays = getCycleDaysSortedByDate()
+    this.cycleDays.addListener(this.updateState)
   }
 
-  setStateWithCurrentText = () => {
-    const cycleDayNumber = this.getCycleDayNumber(this.todayDateString)
+  updateState = () => {
+    const prediction = this.getBleedingPrediction()
+    const fertilityStatus = getFertilityStatusForDay(this.todayDateString)
     this.setState({
-      welcomeText: determineWelcomeText(cycleDayNumber),
-      predictionText: determinePredictionText()
+      cycleDayNumber: this.getCycleDayNumber(this.todayDateString),
+      predictionText: determinePredictionText(prediction),
+      bleedingPredictionRange: getBleedingPredictionRange(prediction),
+      ...fertilityStatus
     })
   }
 
   componentWillUnmount() {
-    this.bleedingDays.removeListener(this.setStateWithCurrentText)
+    this.cycleDays.removeListener(this.updateState)
   }
 
-  passTodayToDayView() {
+  passTodayTo(componentName) {
     const todayDateString = LocalDate.now().toString()
     const cycleDay = getOrCreateCycleDay(todayDateString)
     const navigate = this.props.navigate
-    navigate('CycleDay', { cycleDay })
+    navigate(componentName, { cycleDay })
   }
 
   render() {
+    const cycleDayMoreText = this.state.cycleDayNumber ?
+      labels.cycleDayKnown(this.state.cycleDayNumber)
+      :
+      labels.cycleDayNotEnoughInfo
+
+    const {height, width} = Dimensions.get('window')
     return (
-      <ScrollView>
-        <Text style={styles.welcome}>{this.state.welcomeText}</Text>
-        <Text style={styles.welcome}>{this.state.predictionText}</Text>
-        <View style={styles.homeButtons}>
-          <View style={styles.homeButton}>
-            <Button
-              onPress={() => this.passTodayToDayView()}
-              title="Edit symptoms for today">
-            </Button>
+      <View flex={1}>
+        <ScrollView>
+          <View
+            style={styles.homeView}
+          >
+            <TouchableOpacity
+              onPress={() => this.passTodayTo('CycleDay')}
+              style={styles.homeIconElement}
+            >
+              <View position='absolute'>
+                <CycleCircle/>
+              </View>
+              <View style={[styles.homeIconTextWrapper, styles.wrapperCycle]}>
+                <AppTextLight style={styles.iconText}>
+                  {this.state.cycleDayNumber || labels.unknown}
+                </AppTextLight>
+              </View>
+
+              { this.state.showMore &&
+                  <AppText style={styles.paragraph}>{cycleDayMoreText}</AppText>
+              }
+              <View style={[
+                styles.homeButton,
+                { backgroundColor: cycleDayColor }
+              ]}>
+                <AppText style={styles.homeButtonText}>
+                  {labels.editToday}
+                </AppText>
+              </View>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              onPress={() => this.passTodayTo('BleedingEditView')}
+              style={styles.homeIconElement}
+            >
+              <View position='absolute'>
+                <Drop/>
+              </View>
+              <View style={[styles.homeIconTextWrapper, styles.wrapperDrop]}>
+                <AppTextLight style={styles.iconText}>
+                  {this.state.bleedingPredictionRange}
+                </AppTextLight>
+              </View>
+
+              {this.state.showMore &&
+                <AppText style={styles.paragraph}>
+                  {this.state.predictionText}
+                </AppText>
+              }
+              <View style={[
+                styles.homeButton,
+                { backgroundColor: periodColor }
+              ]}>
+                <AppText style={styles.homeButtonText}>
+                  {labels.trackPeriod}
+                </AppText>
+              </View>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              onPress={() => this.props.navigate('Chart')}
+              style={styles.homeIconElement}
+            >
+              <View style={styles.homeCircle}>
+                <AppTextLight style={styles.iconText}>
+                  {this.state.phase ?
+                    this.state.phase.toString()
+                    :
+                    labels.unknown
+                  }
+                </AppTextLight>
+              </View>
+              {this.state.phase &&
+              <AppTextLight>
+                {`${labels.phase(this.state.phase)} (${this.state.status})`}
+              </AppTextLight>
+              }
+              {this.state.showMore &&
+                <AppText styles={styles.paragraph}>
+                  {this.state.statusText}
+                </AppText>
+              }
+              <View style={[
+                styles.homeButton,
+                { backgroundColor: secondaryColor }
+              ]}>
+                <AppText style={styles.homeButtonText}>
+                  {labels.checkFertility}
+                </AppText>
+              </View>
+            </TouchableOpacity>
           </View>
-          <View style={styles.homeButton}>
-            <Button
-              onPress={() => fillWithMucusDummyData()}
-              title="fill with example data for mucus&temp">
-            </Button>
-          </View>
-          <View style={styles.homeButton}>
-            <Button
-              onPress={() => fillWithCervixDummyData()}
-              title="fill with example data for cervix&temp">
-            </Button>
-          </View>
-        </View>
-      </ScrollView>
+
+        </ScrollView>
+
+        {!this.state.showMore &&
+          <TouchableHighlight
+            onPress={() => this.setState({showMore: true})}
+            style={[styles.showMore, {
+              top: height / 2 - styles.header.height - 30,
+              left: width - 40
+            }]}
+          >
+            <View style={{alignItems: 'center'}}>
+              <AppTextLight>{shared.more}</AppTextLight>
+              <Icon name='chevron-thin-down' />
+            </View>
+          </TouchableHighlight>
+        }
+
+        {this.state.showMore &&
+          <TouchableHighlight
+            onPress={() => this.setState({showMore: false})}
+            style={[styles.showLess, {
+              top: height / 2 - styles.header.height - 30,
+              left: 10
+            }]}
+          >
+            <View style={{alignItems: 'center'}}>
+              <AppTextLight>{shared.less}</AppTextLight>
+              <Icon name='chevron-thin-down' />
+            </View>
+          </TouchableHighlight>
+        }
+      </View>
     )
   }
 }
 
-function determineWelcomeText(cycleDayNumber) {
-  const welcomeTextWithCycleDay = `Welcome! Today is day ${cycleDayNumber} of your current cycle`
-  const welcomeText = `Welcome! We don't have enough information to know what your current cycle day is`
-  return cycleDayNumber ? welcomeTextWithCycleDay : welcomeText
-}
-
-function determinePredictionText() {
-  const bleedingPrediction = cycleModule().getPredictedMenses()
-  if (!bleedingPrediction.length) return labels.noPrediction
+function determinePredictionText(bleedingPrediction) {
+  if (!bleedingPrediction.length) return predictLabels.noPrediction
   const todayDate = LocalDate.now()
   const bleedingStart = LocalDate.parse(bleedingPrediction[0][0])
-  const bleedingEnd = LocalDate.parse(bleedingPrediction[0][ bleedingPrediction[0].length - 1 ])
+  const bleedingEnd = LocalDate.parse(
+    bleedingPrediction[0][ bleedingPrediction[0].length - 1 ]
+  )
   if (todayDate.isBefore(bleedingStart)) {
-    return labels.predictionInFuture(
+    return predictLabels.predictionInFuture(
       todayDate.until(bleedingStart, ChronoUnit.DAYS),
       todayDate.until(bleedingEnd, ChronoUnit.DAYS)
     )
   }
   if (todayDate.isAfter(bleedingEnd)) {
-    return labels.predictionInPast(bleedingStart.toString(), bleedingEnd.toString())
+    return predictLabels.predictionInPast(
+      bleedingStart.toString(), bleedingEnd.toString()
+    )
   }
   const daysToEnd = todayDate.until(bleedingEnd, ChronoUnit.DAYS)
   if (daysToEnd === 0) {
-    return labels.predictionStartedNoDaysLeft
+    return predictLabels.predictionStartedNoDaysLeft
   } else if (daysToEnd === 1) {
-    return labels.predictionStarted1DayLeft
+    return predictLabels.predictionStarted1DayLeft
   } else {
-    return labels.predictionStartedXDaysLeft(daysToEnd)
+    return predictLabels.predictionStartedXDaysLeft(daysToEnd)
   }
 }
+
+function getBleedingPredictionRange(prediction) {
+  if (!prediction.length) return labels.unknown
+  const todayDate = LocalDate.now()
+  const bleedingStart = LocalDate.parse(prediction[0][0])
+  const bleedingEnd = LocalDate.parse(prediction[0][ prediction[0].length - 1 ])
+  if (todayDate.isBefore(bleedingStart)) {
+    return `${todayDate.until(bleedingStart, ChronoUnit.DAYS)}-${todayDate.until(bleedingEnd, ChronoUnit.DAYS)}`
+  }
+  if (todayDate.isAfter(bleedingEnd)) {
+    return labels.unknown
+  }
+  return '0'
+}

components/labels.js

@@ -11,7 +11,9 @@ export const shared = {
   unlock: 'Unlock',
   date: 'Date',
   cycleDayWithLinebreak: 'Cycle\nday',
-  loading: 'Loading ...'
+  loading: 'Loading ...',
+  more: 'more',
+  less: 'less'
 }
 
 export const settings = {
@@ -137,4 +139,36 @@ export const passwordPrompt = {
   areYouSureTitle: 'Are you sure?',
   areYouSure: 'Are you absolutely sure you want to permanently delete all your data?',
   reallyDeleteData: 'Yes, I am sure'
-}
+}
+
+export const home = {
+  editToday: 'add data for today',
+  cycleDayNotEnoughInfo: "We don't have enough information to know what your current cycle day is.",
+  unknown: '?',
+  cycleDayKnown: d => `Your last period started ${getDaysDescriptor(d)}.`,
+  trackPeriod: 'track your period',
+  checkFertility: 'check your fertility',
+  phase: n => `${['1st', '2nd', '3rd'][n - 1]} cycle phase`
+}
+
+const getDaysDescriptor = cycleDayNumber => {
+  if (cycleDayNumber === 1) return 'today'
+  if (cycleDayNumber === 2) return 'yesterday'
+  return `${cycleDayNumber - 1} days ago`
+}
+
+export const fertilityStatus = {
+  fertile: 'fertile',
+  infertile: 'infertile',
+  fertileUntilEvening: 'Fertile phase ends in the evening',
+  unknown: 'We cannot show any cycle information because no period data has been added.',
+  preOvuText: "With NFP rules, you may assume 5 days of infertility at the beginning of your cycle, provided you don't observe any fertile mucus or cervix values.",
+  periOvuText: "We have not been able to detect both a temperature shift and mucus or cervix shift.",
+  postOvuText: tempRule => {
+    return (
+      'We have detected a temperature shift (' + ['regular', '1st exception', '2nd exception'][tempRule] +
+      ' temperature rule), as well as a mucus shift according to NFP rules. You may assume infertility, but always remember to ' +
+      'double-check for yourself. Make sure the data makes sense to you.'
+    )
+  }
+}

components/password-prompt.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { View, TextInput, TouchableOpacity, Alert, Image } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
 import { saveEncryptionFlag } from '../local-storage'
-import { AppText } from './app-text'
+import AppText from './app-text'
 import styles from '../styles'
 import { passwordPrompt as labels, shared } from './labels'
 import { requestHash, deleteDbAndOpenNew, openDb } from '../db'

components/settings/index.js

@@ -6,7 +6,7 @@ import {
 } from 'react-native'
 import styles from '../../styles/index'
 import { settings as labels } from '../labels'
-import { AppText } from '../app-text'
+import AppText from '../app-text'
 import TempReminderPicker from './temp-reminder-picker'
 import PeriodReminderPicker from './period-reminder'
 import TempSlider from './temp-slider'

components/settings/password/create.js

@@ -4,7 +4,7 @@ import {
   TouchableOpacity,
 } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
-import { AppText } from '../../app-text'
+import AppText from '../../app-text'
 import styles from '../../../styles'
 import { settings as labels } from '../../labels'
 import { requestHash, changeEncryptionAndRestartApp } from '../../../db'

components/settings/password/delete.js

@@ -4,7 +4,7 @@ import {
   TouchableOpacity
 } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
-import { AppText } from '../../app-text'
+import AppText from '../../app-text'
 import styles from '../../../styles'
 import { settings as labels } from '../../labels'
 import { requestHash, changeEncryptionAndRestartApp } from '../../../db'

components/settings/password/index.js

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import CreatePassword from './create'
 import ChangePassword from './update'
 import DeletePassword from './delete'
-import { AppText } from '../../app-text'
+import AppText from '../../app-text'
 import {
   hasEncryptionObservable
 } from '../../../local-storage'

components/settings/password/update.js

@@ -4,7 +4,7 @@ import {
   View,
   TouchableOpacity} from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
-import { AppText } from '../../app-text'
+import AppText from '../../app-text'
 import styles from '../../../styles'
 import { settings as labels, shared } from '../../labels'
 import { requestHash, changeEncryptionAndRestartApp } from '../../../db'

components/settings/period-reminder.js

@@ -3,7 +3,7 @@ import {
   View,
   Switch
 } from 'react-native'
-import { AppText } from '../app-text'
+import AppText from '../app-text'
 import {
   periodReminderObservable,
   savePeriodReminder

components/settings/temp-reminder-picker.js

@@ -5,7 +5,7 @@ import {
   Switch
 } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
-import { AppText } from '../app-text'
+import AppText from '../app-text'
 import {
   tempReminderObservable,
   saveTempReminder

components/settings/temp-slider.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { View } from 'react-native'
 import Slider from '@ptomasroos/react-native-multi-slider'
-import { AppText } from '../app-text'
+import AppText from '../app-text'
 import {
   scaleObservable,
   saveTempScale,

components/stats.js

@@ -8,7 +8,7 @@ import styles from '../styles/index'
 import cycleModule from '../lib/cycle'
 import {getCycleLengthStats as getCycleInfo} from '../lib/cycle-length'
 import {stats as labels} from './labels'
-import { AppText } from './app-text'
+import AppText from './app-text'
 
 export default class Stats extends Component {
   render() {