Move metadata directory to root of project. So fdroid can find it.

2019-09-23 16:09:00 +02:00
128 changed files with 4807 additions and 13228 deletions
@@ -19,21 +19,25 @@
  "plugins": [
    "react"
  ],
-  "settings": {
-    "react": {
-      "version": require('./package.json').dependencies.react,
-    },
-  },
  "rules": {
+    "quotemark": false,
+    "ordered-imports": false,
+    "no-var-requires": false,
    "indent": [
      "error",
      2
    ],
-    "no-console": [
-      "error",
-      { allow: ["warn", "error"] }
-    ],
+    "no-console": 0,
+    "eofline": false,
+    "no-unused-variable": true,
+    "no-unused-expression": true,
+    "only-arrow-functions": false,
    "space-before-function-paren": 0,
+    "trailing-comma": [
+      true,
+      "never"
+    ],
+    "object-literal-sort-keys": false,
    "semi": [
      "warn",
      "never"
@@ -44,7 +48,7 @@
    "no-var": "error",
    "prefer-const": "error",
    "no-trailing-spaces": "error",
-    "react/prop-types": 2,
+    "react/prop-types": 0,
    "max-len": [
      1,
      {
@@ -52,7 +56,6 @@
        "ignoreComments": true,
        "ignoreTemplateLiterals": true
      }
-    ],
-    "no-multi-spaces": 2,
+    ]
  }
-}
+}
@@ -21,7 +21,6 @@ DerivedData
 *.ipa
 *.xcuserstate
 project.xcworkspace
-ios/Index/DataStore

 # Android/IntelliJ
 #
@@ -56,16 +55,13 @@ buck-out/
 # Bundle artifact
 *.jsbundle

-# RN android release
+# RN android release 
 android/app/bin/
 android/app/release/
 android/app/src/main/assets/index.android.bundle
 android/.project
 android/app/.project

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

 All notable changes to this project will be documented in this file.

-## v0.20-05-2.beta
-
-### Adds
-* Feature allowing app chart not to show temperature part, when temperature is not tracked and corresponding refactoring
-* Detox support for e2e testing and addition of the e2e tests 
-* Introduction of Redux global state (date and navigation are stored locally now)
-* Introduction of clear.sh script to the project automising clearing project caches and packages reinstallation
-
-### Changes
-* Update of chart shades for bleeding
-* Eslint rule cleanup and addition of new rules (checks for PropTypes definition for React components, multi spaces)
-* sympto library upgrade to version 2.2.0
-* Preparation for support of drip on iOS devices
-* Updates representation of the incomplete mucus and cervix values on chart
-* React Native update to 0.59.10
-* Refactoring of header, cycle day overview, temperature edit view pages
-* Setting minimum SDK version to 23 to allow using drip on earlier versions of Android
-
-### Fixes
-* Fixes adding notes to the future dates
-* Fixes app exiting with error when hitting back button on device
-* Fixes Sex symptom showing on y axis of chart even though the contraception method was deleted 
-* Fix of the clear.sh file name in package.json
-* Fix of navigation from chart to the cycle day overview
-* Bug fix for maximum value of mucus not showing on chart
-* Fixes delete button bug on symptom edit page
-* Fix of home screen centering
-
-### Security
-* Update of node.js to fix security issue
-
 ## v0.1905.29-beta

-### Changes
-* Auto save functionality for all symptoms
-* Add donation section to about
-* Clearer labels on cycle day overview
-* Rename mucus to cervical mucus
-* Set show more on homescreen to default and get rid of more/less switch
-* Add loading screen to data import
-* Removes logo and adds header on the main login screen
-* Nicer formatting for past bleeding prediction
-* Removes permissions not required for debug or production
-* Temperature screen styling update
-
-### Fixed
-* Styling
-* Line width in chart
-* Prediction range in drop on homescreen
+- Auto save functionality for all symptoms
+- Add donation section to about
+- Styling fixes
+- Clearer labels on cycle day overview
+- Rename mucus to cervical mucus
+- Set show more on homescreen to default and get rid of more/less switch
+- Add loading screen to data import
+- Fix line width in chart
+- Removes logo and adds header on the main login screen
+- Nicer formatting for past bleeding prediction
+- Fixes prediction range in drop on homescreen
+- Removes permissions not required for debug or production
+- Temperature screen styling update

 ## v0.0.3 - 2019-04-17

@@ -14,12 +14,12 @@ So good to see you here, hello :wave\_tone1: :wave\_tone2: :wave\_tone3: :wave\_

 ## TL;DR

-You just want to say hello? Send us a [nice email](mailto:drip@mailbox.org?Subject=Nice%20incoming%20mail) :postbox: or tweet :bird: at us [@bl00dyhealth](https://twitter.com/bl00dyhealth).
+You just want to say hello? Send us a [nice email](mailto:bl00dyhealth@mailbox.org?Subject=Nice%20incoming%20mail) :postbox: or tweet :bird: at us [@bl00dyhealth](https://twitter.com/bl00dyhealth).

 ## What should I know before I get started?

 We have prepared something for **you**: check out our [README](https://gitlab.com/bloodyhealth/drip/blob/master/README.md) for more information on how to set up and install everything you'll need.
-[Ping us](mailto:drip@mailbox.org) if you could need some help :helmet\_with\_cross: !
+[Ping us](mailto:bl00dyhealth@mailbox.org) if you could need some help :helmet\_with\_cross: !

 Let us know if you want to suggest improvements for the README and open a merge request (which is just like Github's pull request)

@@ -3,54 +3,35 @@
 A menstrual cycle tracking app that's open-source and leaves your data on your phone. Use it to track your menstrual cycle and/or for fertility awareness!
 Find more information on [our website](https://bloodyhealth.gitlab.io/).

-[<img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
-     alt="Get it on F-Droid"
-     height="80">](https://f-droid.org/packages/com.drip/)
-[<img src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png"
-     alt="Get it on Google Play"
-     height="80">](https://play.google.com/store/apps/details?id=com.drip)
-
 The app is built in React Native and currently developed for Android.

 Here --> you will find our [contributing guide](https://gitlab.com/bloodyhealth/drip/blob/master/CONTRIBUTING.md).

 ## Development setup

-#### 1. Android Studio
-    
-Install [Android Studio](https://developer.android.com/studio/) - you'll need it to install some dependencies.
-
-#### 2. Node version
-
-Make sure you are running Node 10 (newer versions won’t work). It's easiest to switch Node versions using `nvm`, here’s how to do it:
+1.  Install [Android Studio](https://developer.android.com/studio/) - you'll need it to install some dependencies.

+1.  Make sure you are running Node 10 (newer versions won’t work). It's easiest to switch Node versions using `nvm`, here’s how to do it:

+    ```
    $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
    $ nvm install v10
+    ```

+1.  Clone this repository:

-#### 3. Get this repository
-
-Clone it with SSH
-    
+    ```
    $ git clone git@gitlab.com:bloodyhealth/drip.git
-
-or clone it with HTTPS
-    
-    $ git clone https://gitlab.com/bloodyhealth/drip.git
-    
-and run
-    
    $ cd drip
+    ```
+    and run
+    ```
    $ npm install
+    ```

-#### 4. More requirements from Android Studio
+1.  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.

-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.
-
-#### 5. Run the app
-
-Either start a [virtual device in Android Studio](https://developer.android.com/studio/run/emulator) or [set your physical device like your Android phone up](https://developer.android.com/training/basics/firstapp/running-app) to run the app.
+1.  Either start a [virtual device in Android Studio](https://developer.android.com/studio/run/emulator) or [set your physical device like your Android phone up](https://developer.android.com/training/basics/firstapp/running-app) to run the app.

 1.  Open a terminal and run
    ```
@@ -76,9 +57,9 @@ Make sure that you have Java 1.8 by running `java -version`.

 If you don't have Java installed, or your Java version is different, the app may not work. You can try just using Android Studio's Java by prepending it to your `$PATH` in your shell profile:

-    ```
-    $ export PATH="/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin:${PATH}"
-    ```
+```
+$ export PATH="/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin:${PATH}"
+```

 Now, `which java` should output `/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java`, and the correct Java version should be used.

@@ -95,40 +76,10 @@ If you get error messages about `adb` not being found on your path:
    ```

 ## Tests
-
-### Unit tests
 You can run the tests with:
-    ```
-    $ npm test
-    ```
-
-### End to end tests
-1. Check what testing device is specified in [package.json](https://gitlab.com/bloodyhealth/drip/blob/master/package.json) under:
-    ```
-    {"detox":
-     {"configurations":
-      {"name": "NEXUS_DEVICE_OR_WHATEVER_SPECIFIED_DEVICE"}
-      }
-     }
-    }
-    ```
-2. Check if the current device is already installed on your machine. Go to `cd ~/Android/sdk/emulator/` or wherever you have Android installed on your machine. Here you can run `./emulator -list-avds` and compare the devices with the one you found in step 1.
-3. Open Android Studio and go to -> Tools -> AVD manager -> `+Create virtual device` and select the device checked in the previous step
-4. Use the emulator on your machine to run it without heavy Android Studio, e.g. in `~/Android/Sdk/emulator` OR chose to run the emulator within Android Studio
-4.1 Here run: `$ ./emulator -avd NEXUS_DEVICE_OR_WHATEVER_SPECIFIED_DEVICE`
-4.2 You might need to specify the following environment variables in your zsh or bash file according to where you have it installed. You can find exact path in Android Studio (Android Studio Preferences → Appearance and Behavior → System Settings → Android SDK). After adding environment variables, you might need to restart your terminal or source the modified bash profile (i.e. "source ~/.bash_profile"). 
-    ```
-    export ANDROID_HOME="/home/myname/Android/Sdk"
-    export ANDROID_SDK_ROOT="/home/myname/Android/Sdk"
-    export ANDROID_AVD_HOME="/home/myname/.android/avd"
-    ```
-5. For the first time you need to get the app on the phone or if you run into this error:
-    `'app-debug-androidTest.apk' could not be found`
--> open a new 2nd tab and run (in your drip folder): `cd android and ./gradlew assembleAndroidTest`
-Otherwise just open a new 2nd tab to run (in your drip folder) `npm run android`
-6. Open a new 3rd tab to run `./node_modules/.bin/detox test -c android.emu.debug`
-
-Hopefully you see the magic happening clicking through the app and happy test results on your console :sun_with_face: !
+```
+$ npm test
+```

 ## Debugging
 In order to see logging output from the app, run `npm run log` in a separate terminal. You can output specific code you want to see, with:
@@ -98,11 +98,6 @@ android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    buildToolsVersion rootProject.ext.buildToolsVersion

-    compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
-    }
-
    defaultConfig {
        applicationId "com.drip"
        minSdkVersion rootProject.ext.minSdkVersion
@@ -110,10 +105,8 @@ android {
        versionCode 3
        versionName "0.1905.29-beta"
        ndk {
-            abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+            abiFilters "armeabi-v7a"
        }
-        testBuildType System.getProperty('testBuildType', 'debug')  // This will later be used to control the test apk build type
-        testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
    }
    signingConfigs {
        release {
@@ -130,7 +123,7 @@ android {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
-            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+            include "armeabi-v7a", "arm64-v8a"
        }
    }
    buildTypes {
@@ -145,7 +138,7 @@ android {
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
-            def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a":3, "x86_64":4]
+            def versionCodes = ["armeabi-v7a":1, "arm64-v8a":2]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
@@ -164,11 +157,9 @@ dependencies {
    implementation project(':react-native-fs')
    implementation project(':react-native-document-picker')
    implementation project(':nodejs-mobile-react-native')
-    implementation fileTree(dir: "libs", include: ["*.jar"])
-    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
-    implementation "com.facebook.react:react-native:+"  // From node_modules
-    androidTestImplementation('com.wix:detox:+') { transitive = true }
-    androidTestImplementation 'junit:junit:4.12'
+    compile fileTree(dir: "libs", include: ["*.jar"])
+    compile "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
+    compile "com.facebook.react:react-native:+"  // From node_modules
 }

 // Run this once to be able to run the application with BUCK
@@ -1,24 +0,0 @@
-package com.drip;
-
-import com.wix.detox.Detox;
-
-import org.junit.Rule;
-import org.junit.Test;
-import org.junit.runner.RunWith;
-
-import androidx.test.ext.junit.runners.AndroidJUnit4;
-import androidx.test.filters.LargeTest;
-import androidx.test.rule.ActivityTestRule;
-
-@RunWith(AndroidJUnit4.class)
-@LargeTest
-public class DetoxTest {
-
-    @Rule
-    public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class, false, false);
-
-    @Test
-    public void runDetoxTests() {
-        Detox.runTests(mActivityRule);
-    }
-}
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
-</manifest>
@@ -10,6 +10,6 @@ public class MainActivity extends ReactActivity {
     */
    @Override
    protected String getMainComponentName() {
-        return "drip";
+        return "home";
    }
 }
@@ -5,13 +5,11 @@ buildscript {
        jcenter()
        google()
    }
-    ext.kotlinVersion = '1.3.10'
    dependencies {
-        classpath 'com.android.tools.build:gradle:3.4.0'
+        classpath 'com.android.tools.build:gradle:3.1.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
-        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
    }
 }

@@ -27,29 +25,25 @@ allprojects {
            url 'https://maven.google.com/'
            name 'Google'
        }
-        google()
-        maven {
-            // All of Detox' artifacts are provided via the npm module
-            url "$rootDir/../node_modules/detox/Detox-android"
-        }
    }
 }

 ext {
-    buildToolsVersion = "28.0.3"
-    minSdkVersion = 23
-    compileSdkVersion = 28
-    targetSdkVersion = 28
-    supportLibVersion = "28.0.0"
+    buildToolsVersion = "27.0.3"
+    minSdkVersion = 16
+    compileSdkVersion = 27
+    targetSdkVersion = 27
+    supportLibVersion = "27.1.1"
 }

-subprojects {
-    afterEvaluate {project ->
-        if (project.hasProperty("android")) {
-            android {
-                compileSdkVersion 28
-                buildToolsVersion '28.0.3'
-            }
-        }
+subprojects {project ->
+  // https://stackoverflow.com/questions/52613089/getting-verifyreleaseresources-error-after-upgrading-react-native
+  afterEvaluate {
+    if (project.hasProperty("android")) {
+      android {
+        compileSdkVersion 27
+        buildToolsVersion "27.0.3"
+      }
    }
+  }
 }
@@ -15,4 +15,6 @@
 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
-# org.gradle.parallel=true
+# org.gradle.parallel=true
+
+android.useDeprecatedNdk=true
@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip
@@ -1,21 +1,5 @@
 #!/usr/bin/env bash

-#
-# Copyright 2015 the original author or authors.
-#
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#      http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-#
-
 ##############################################################################
 ##
 ##  Gradle start up script for UN*X
@@ -23,7 +7,7 @@
 ##############################################################################

 # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+DEFAULT_JVM_OPTS=""

 APP_NAME="Gradle"
 APP_BASE_NAME=`basename "$0"`
@@ -1,19 +1,3 @@
-@rem
-@rem Copyright 2015 the original author or authors.
-@rem
-@rem Licensed under the Apache License, Version 2.0 (the "License");
-@rem you may not use this file except in compliance with the License.
-@rem You may obtain a copy of the License at
-@rem
-@rem      http://www.apache.org/licenses/LICENSE-2.0
-@rem
-@rem Unless required by applicable law or agreed to in writing, software
-@rem distributed under the License is distributed on an "AS IS" BASIS,
-@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-@rem See the License for the specific language governing permissions and
-@rem limitations under the License.
-@rem
-
@if "%DEBUG%" == "" @echo off
@rem ##########################################################################
@rem
@@ -25,7 +9,7 @@
 if "%OS%"=="Windows_NT" setlocal

@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+set DEFAULT_JVM_OPTS=

 set DIRNAME=%~dp0
 if "%DIRNAME%" == "" set DIRNAME=.
@@ -8,11 +8,11 @@ import { shared } from '../i18n/en/labels'
 const AppLoadingView = () => {
  return (
    <View flex={1}>
-      <View style={{flex:1, justifyContent: 'center'}}>
+      <View  style={{flex:1, justifyContent: 'center'}}>
        <AppText style={{alignSelf: 'center'}}>{shared.loading}</AppText>
      </View>
    </View>
  )
 }

-export default AppLoadingView
+export default AppLoadingView
@@ -18,11 +18,7 @@ export default function AppTextInput({ style, ...props }) {
 }

 AppTextInput.propTypes = {
-  autoFocus: PropTypes.bool,
-  onChangeText: PropTypes.func,
-  placeholder: PropTypes.string,
-  style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-  value: PropTypes.string,
+  secureTextEntry: PropTypes.bool
 }

 AppTextInput.defaultProps = {
@@ -1,26 +1,27 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { Text } from 'react-native'
 import styles from "../styles"
 import Link from './link'

-export default function AppText({ children, onPress, numberOfLines, style}) {
+export default function AppText(props) {
  // we parse for links in case the text contains any
  return (
    <Link>
-      <Text style={[styles.appText, style]}
-        onPress={onPress}
-        numberOfLines={numberOfLines}
+      <Text
+        style={[styles.appText, props.style]}
+        onPress={props.onPress}
+        numberOfLines={props.numberOfLines}
      >
-        {children}
+        {props.children}
      </Text>
    </Link>
  )
 }

-AppText.propTypes = {
-  children: PropTypes.node,
-  onPress: PropTypes.func,
-  numberOfLines: PropTypes.number,
-  style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-}
+export function SymptomSectionHeader(props) {
+  return (
+    <AppText style={styles.symptomViewHeading}>
+      {props.children}
+    </AppText>
+  )
+}
@@ -1,90 +1,44 @@
 import React, { Component } from 'react'
+import { View } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
-
-import { getLicenseFlag, saveEncryptionFlag } from '../local-storage'
-import { openDb } from '../db'
-
 import App from './app'
 import PasswordPrompt from './password-prompt'
 import License from './license'
-import AppLoadingView from './app-loading'
-
-import store from "../store"
-import { Provider } from 'react-redux'
+import { getLicenseFlag } from '../local-storage'

 export default class AppWrapper extends Component {
  constructor() {
    super()
    this.state = {
-      isCheckingLicenseAgreement: true,
-      shouldShowLicenseAgreement: false,
-      shouldShowPasswordPrompt: false,
-      shouldShowApp: false,
+      retrievingLicenseSetting: true
    }
    nodejs.start('main.js')
    this.checkLicenseAgreement()
-    this.checkDbPasswordSet()
  }

  async checkLicenseAgreement() {
-    const isLicenseFlagSet = await getLicenseFlag()
-    if (!isLicenseFlagSet) {
-      this.enableShowLicenseAgreement()
-    } else {
-      this.setState({ isCheckingLicenseAgreement: false })
-    }
-  }
-
-  async checkDbPasswordSet() {
-    const canConnectToDb = await openDb()
-    if (canConnectToDb) {
-      this.enableShowApp()
-      await saveEncryptionFlag(false)
-      return false
-    }
-    this.setState({ shouldShowPasswordPrompt: true })
-    await saveEncryptionFlag(true)
-  }
-
-  enableShowLicenseAgreement = () => {
-    this.setState({
-      shouldShowLicenseAgreement: true,
-      isCheckingLicenseAgreement: false
-    })
-  }
-
-  disableShowLicenseAgreement = () => {
-    this.setState({ shouldShowLicenseAgreement: false })
-  }
-
-  enableShowApp = () => {
-    this.setState({
-      shouldShowApp: true,
-      shouldShowPasswordPrompt: false
-    })
+    const agreed = await getLicenseFlag()
+    this.setState({retrievingLicenseSetting: false})
+    if (!agreed) this.setState({showLicense: true})
  }

  render() {
-    const {
-      isCheckingLicenseAgreement,
-      shouldShowLicenseAgreement,
-      shouldShowPasswordPrompt,
-      shouldShowApp,
-    } = this.state
+    const whiteScreen = <View style={{ flex: 1 }}></View>
+    const licenseScreen = <License setLicense={() => {
+      this.setState({showLicense: false})
+    }}/>
+    const passwordPrompt = <PasswordPrompt showApp={() => {
+      this.setState({showApp: true})
+    }}/>

-    let initialView = null
-
-    if (isCheckingLicenseAgreement) {
-      initialView = <AppLoadingView />
-    } else if (shouldShowLicenseAgreement) {
-      initialView = <License setLicense={this.disableShowLicenseAgreement}/>
-    } else if (shouldShowPasswordPrompt) {
-      initialView = <PasswordPrompt enableShowApp={this.enableShowApp} />
-    } else if (shouldShowApp) {
-      initialView = <App />
+    if (this.state.retrievingLicenseSetting) {
+      return whiteScreen
+    } else if (this.state.showLicense) {
+      return licenseScreen
+    } else if (!this.state.showApp) {
+      return passwordPrompt
+    } else {
+      return <App/>
    }
-
-    return <Provider store={store}>{initialView}</Provider>
-
  }
 }
@@ -1,114 +1,130 @@
 import React, { Component } from 'react'
 import { View, BackHandler } from 'react-native'
-import PropTypes from 'prop-types'
-
-import { connect } from 'react-redux'
-
-import { getDate } from '../slices/date'
-import { getNavigation, navigate, goBack } from '../slices/navigation'
-
 import Header from './header'
 import Menu from './menu'
-import { viewsList } from './views'
-import { isSymptomView, isSettingsView } from './pages'
-
-import { headerTitles } from '../i18n/en/labels'
+import Home from './home'
+import Calendar from './calendar'
+import CycleDay from './cycle-day/cycle-day-overview'
+import symptomViews from './cycle-day/symptoms'
+import Chart from './chart/chart'
+import SettingsMenu from './settings/settings-menu'
+import settingsViews from './settings'
+import Stats from './stats'
+import {headerTitles, menuTitles} from '../i18n/en/labels'
 import setupNotifications from '../lib/notifications'
-import { getCycleDay, closeDb } from '../db'

-class App extends Component {
+// design wants everyhting lowercased, but we don't
+// have CSS pseudo properties
+const headerTitlesLowerCase = Object.keys(headerTitles).reduce((acc, curr) => {
+  acc[curr] = headerTitles[curr].toLowerCase()
+  return acc
+}, {})

-  static propTypes = {
-    date: PropTypes.string,
-    navigation: PropTypes.object.isRequired,
-    navigate: PropTypes.func,
-    goBack: PropTypes.func,
-  }
+const HOME_PAGE = 'Home'
+const CYCLE_DAY_PAGE = 'CycleDay'
+const SETTINGS_MENU_PAGE = 'SettingsMenu'

+export default class App extends Component {
  constructor(props) {
    super(props)
-
-    this.backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      this.goBack
-    )
-
-    setupNotifications(this.props.navigate)
-  }
-
-  goBack = () => {
-    const { currentPage } = this.props.navigation
-
-    if (currentPage === 'Home') {
-      closeDb()
-      BackHandler.exitApp()
-    } else {
-      this.props.goBack()
+    this.state = {
+      currentPage: HOME_PAGE
    }
-
-    return true
+    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonPress)
+    setupNotifications(this.navigate)
  }

  componentWillUnmount() {
    this.backHandler.remove()
  }

+  navigate = (pageName, props) => {
+    const { currentPage } = this.state
+    // for the back button to work properly, we want to
+    // remember two origins: which menu item we came from
+    // and from where we navigated to the symptom view (day
+    // view or home page)
+    if (this.isMenuItem()) {
+      this.menuOrigin = currentPage
+    }
+    if (!this.isSymptomView()) {
+      this.originForSymptomView = currentPage
+    }
+    this.setState({ currentPage: pageName, currentProps: props })
+  }
+
+  handleBackButtonPress = () => {
+    const { currentPage, currentProps } = this.state
+    if (currentPage === HOME_PAGE) return false
+    if (this.isSymptomView()) {
+      this.navigate(
+        this.originForSymptomView, { date: currentProps.date }
+      )
+    } else if (this.isSettingsView()) {
+      this.navigate(SETTINGS_MENU_PAGE)
+    } else if (currentPage === CYCLE_DAY_PAGE) {
+      this.navigate(this.menuOrigin)
+    } else {
+      this.navigate(HOME_PAGE)
+    }
+    return true
+  }
+
+  isMenuItem() {
+    return Object.keys(menuTitles).includes(this.state.currentPage)
+  }
+
+  isSymptomView() {
+    return Object.keys(symptomViews).includes(this.state.currentPage)
+  }
+
+  isSettingsView() {
+    return Object.keys(settingsViews).includes(this.state.currentPage)
+  }
+
+  isDefaultView() {
+    const { currentPage } = this.state
+    return this.isMenuItem(currentPage) || currentPage === SETTINGS_MENU_PAGE
+  }
+
  render() {
-    const { date, navigation, goBack } = this.props
-    const { currentPage } = navigation
-
-    if (!currentPage) {
-      return false
-    }
-
-    const Page = viewsList[currentPage]
-    const title = headerTitles[currentPage]
-
-    const isSymptomEditView = isSymptomView(currentPage)
-    const isSettingsSubView = isSettingsView(currentPage)
-    const isCycleDayView = currentPage === 'CycleDay'
-
-    const headerProps = {
-      title,
-      handleBack: isSettingsSubView ? goBack : null,
-    }
-
-    const pageProps = {
-      cycleDay: date && getCycleDay(date),
-      date,
+    const { currentPage, currentProps } = this.state
+    const pages = {
+      Home,
+      Calendar,
+      CycleDay,
+      Chart,
+      SettingsMenu,
+      ...settingsViews,
+      Stats,
+      ...symptomViews
    }
+    const Page = pages[currentPage]
+    const title = headerTitlesLowerCase[currentPage]

    return (
-      <View style={{ flex: 1 }}>
-        {
-          !isSymptomEditView &&
-          !isCycleDayView &&
-          <Header { ...headerProps } />
+      <View style={{flex: 1}}>
+        {this.isDefaultView() &&
+          <Header title={title} />
+        }
+        {(this.isSettingsView()) &&
+          <Header
+            title={title}
+            showBackButton={true}
+            goBack={this.handleBackButtonPress}
+          />
        }

-        <Page { ...pageProps } />
+        <Page
+          navigate={this.navigate}
+          {...currentProps}
+          handleBackButtonPress={this.handleBackButtonPress}
+        />

-        { !isSymptomEditView && <Menu /> }
+        {!this.isSymptomView() &&
+          <Menu navigate={this.navigate} currentPage={currentPage} />
+        }
      </View>
    )
  }
 }
-
-const mapStateToProps = (state) => {
-  return({
-    date: getDate(state),
-    navigation: getNavigation(state)
-  })
-}
-
-const mapDispatchToProps = (dispatch) => {
-  return({
-    navigate: (page) => dispatch(navigate(page)),
-    goBack: () => dispatch(goBack()),
-  })
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(App)
@@ -1,31 +1,20 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { TouchableOpacity } from 'react-native'
 import AppText from './app-text'
 import styles from '../styles'

-export default function Button({
-  backgroundColor,
-  children,
-  onPress,
-  style,
-  testID
-}) {
+export default function Button(props) {
  return (
    <TouchableOpacity
-      onPress={onPress}
-      style={[styles.button, style, { backgroundColor }]}
-      testID={testID}
-    >
-      <AppText style={styles.homeButtonText}>{children}</AppText>
+      onPress={props.onPress}
+      style={[
+        styles.button,
+        props.style,
+        {backgroundColor: props.backgroundColor}
+      ]}>
+      <AppText style={styles.homeButtonText}>
+        {props.children}
+      </AppText>
    </TouchableOpacity>
  )
-}
-
-Button.propTypes = {
-  backgroundColor: PropTypes.string,
-  children: PropTypes.node,
-  onPress: PropTypes.func,
-  style: PropTypes.object,
-  testID: PropTypes.string
-}
+}
@@ -1,11 +1,5 @@
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import { CalendarList } from 'react-native-calendars'
-import { connect } from 'react-redux'
-
-import { setDate } from '../slices/date'
-import { navigate } from '../slices/navigation'
-
 import { LocalDate } from 'js-joda'
 import { getBleedingDaysSortedByDate } from '../db'
 import cycleModule from '../lib/cycle'
@@ -13,12 +7,7 @@ import { shadesOfRed, calendarTheme } from '../styles/index'
 import styles from '../styles/index'
 import nothingChanged from '../db/db-unchanged'

-class CalendarView extends Component {
-  static propTypes = {
-    setDate: PropTypes.func.isRequired,
-    navigate: PropTypes.func.isRequired
-  }
-
+export default class CalendarView extends Component {
  constructor(props) {
    super(props)
    this.bleedingDays = getBleedingDaysSortedByDate()
@@ -47,10 +36,9 @@ class CalendarView extends Component {
  }

  passDateToDayView = (result) => {
-    this.props.setDate(result.dateString)
-    this.props.navigate('CycleDay')
+    const navigate = this.props.navigate
+    navigate('CycleDay', { date: result.dateString })
  }
-
  render() {
    return (
      <CalendarList
@@ -72,19 +60,6 @@ class CalendarView extends Component {
  }
 }

-const mapDispatchToProps = (dispatch) => {
-  return({
-    setDate: (date) => dispatch(setDate(date)),
-    navigate: (page) => dispatch(navigate(page)),
-  })
-}
-
-export default connect(
-  null,
-  mapDispatchToProps,
-)(CalendarView)
-
-
 function toCalFormat(bleedingDaysSortedByDate) {
  const todayDateString = LocalDate.now().toString()
  return bleedingDaysSortedByDate.reduce((acc, day) => {
@@ -1,32 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { View } from 'react-native'
-
-import AppText from '../app-text'
-import DripHomeIcon from '../../assets/drip-home-icons'
-
-import styles from './styles'
-import { cycleDayColor } from '../../styles'
-
-import { shared as labels } from '../../i18n/en/labels'
-
-const ChartLegend = ({ xAxisHeight }) => {
-  return (
-    <View style={[styles.yAxis, styles.chartLegend, {height: xAxisHeight}]}>
-      <DripHomeIcon
-        name="circle"
-        size={styles.yAxis.width - 7}
-        color={cycleDayColor}
-      />
-      <AppText style={styles.yAxisLabels.dateLabel}>
-        {labels.date.toLowerCase()}
-      </AppText>
-    </View>
-  )
-}
-
-ChartLegend.propTypes = {
-  xAxisHeight: PropTypes.number.isRequired
-}
-
-export default ChartLegend
@@ -1,28 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { Shape } from 'react-native/Libraries/ART/ReactNativeART'
-
-import styles from './styles'
-
-const ChartLine = ({ path, isNfpLine = false }) => {
-  const strokeStyle =
-    isNfpLine ? styles.nfpLine.stroke : styles.column.stroke.color
-  const strokeWidth =
-    isNfpLine ? styles.nfpLine.strokeWidth : styles.column.stroke.width
-
-  return (
-    <Shape
-      stroke={strokeStyle}
-      strokeWidth={strokeWidth}
-      d={path}
-    />
-  )
-}
-
-ChartLine.propTypes = {
-  path: PropTypes.object,
-  isNfpLine: PropTypes.bool,
-}
-
-export default ChartLine
@@ -1,55 +1,38 @@
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import { View, FlatList, ActivityIndicator } from 'react-native'
-
-import NoData from './no-data'
-import AppLoadingView from '../app-loading'
-import YAxis from './y-axis'
+import { LocalDate } from 'js-joda'
+import { makeYAxisLabels, makeHorizontalGrid } from './y-axis'
 import nfpLines from './nfp-lines'
 import DayColumn from './day-column'
-import HorizontalGrid from './horizontal-grid'
-import AppText from '../app-text'
-
-import { connect } from 'react-redux'
-import { navigate } from '../../slices/navigation'
-
-import { getCycleDaysSortedByDate } from '../../db'
-import nothingChanged from '../../db/db-unchanged'
-import { scaleObservable } from '../../local-storage'
-import { makeColumnInfo } from '../helpers/chart'
-
-import config from '../../config'
-import { shared } from '../../i18n/en/labels'
+import { getCycleDaysSortedByDate, getAmountOfCycleDays } from '../../db'
 import styles from './styles'
+import { cycleDayColor } from '../../styles'
+import { scaleObservable } from '../../local-storage'
+import config from '../../config'
+import AppText from '../app-text'
+import AppLoadingView from '../app-loading'
+import { shared as labels } from '../../i18n/en/labels'
+import DripIcon from '../../assets/drip-icons'
+import DripHomeIcon from '../../assets/drip-home-icons'
+import nothingChanged from '../../db/db-unchanged'

-class CycleChart extends Component {
-  static propTypes = {
-    navigate: PropTypes.func,
-    end: PropTypes.bool
-  }
+const symptomIcons = {
+  bleeding: <DripIcon size={16} name='drip-icon-bleeding' color={styles.iconShades.bleeding[3]}/>,
+  mucus: <DripIcon size={16} name='drip-icon-mucus' color={styles.iconShades.mucus[4]}/>,
+  cervix: <DripIcon size={16} name='drip-icon-cervix' color={styles.iconShades.cervix[3]}/>,
+  desire: <DripIcon size={16} name='drip-icon-desire' color={styles.iconShades.desire[2]}/>,
+  sex: <DripIcon size={16} name='drip-icon-sex' color={styles.iconShades.sex[2]}/>,
+  pain: <DripIcon size={16} name='drip-icon-pain' color={styles.iconShades.pain[0]}/>,
+  mood: <DripIcon size={16} name='drip-icon-mood' color={styles.iconShades.mood[0]}/>,
+  note: <DripIcon size={16} name='drip-icon-note' color={styles.iconShades.note[0]}/>
+}

+export default class CycleChart extends Component {
  constructor(props) {
    super(props)
-
    this.state = {}
    this.cycleDaysSortedByDate = getCycleDaysSortedByDate()
    this.getFhmAndLtlInfo = nfpLines()
-    this.shouldShowTemperatureColumn = false
-
-    this.prepareSymptomData()
-  }
-
-  prepareSymptomData = () => {
-    this.symptomRowSymptoms = config.symptoms.filter((symptomName) => {
-      return this.cycleDaysSortedByDate.some(cycleDay => {
-        return cycleDay[symptomName]
-      })
-    })
-    this.chartSymptoms = [...this.symptomRowSymptoms]
-    if (this.cycleDaysSortedByDate.some(day => day.temperature)) {
-      this.chartSymptoms.push('temperature')
-      this.shouldShowTemperatureColumn = true
-    }
  }

  renderColumn = ({ item, index }) => {
@@ -60,42 +43,55 @@ class CycleChart extends Component {
        navigate={this.props.navigate}
        symptomHeight={this.symptomHeight}
        columnHeight={this.columnHeight}
+        chartHeight={this.state.chartHeight}
        symptomRowSymptoms={this.symptomRowSymptoms}
        chartSymptoms={this.chartSymptoms}
-        shouldShowTemperatureColumn={this.shouldShowTemperatureColumn}
        getFhmAndLtlInfo={this.getFhmAndLtlInfo}
-        xAxisHeight={this.xAxisHeight}
      />
    )
  }

-  reCalculateChartInfo = (nativeEvent) => {
-    const { height, width } = nativeEvent.layout
-    const xAxisCoefficient = this.shouldShowTemperatureColumn ?
-      config.xAxisHeightPercentage : config.xAxisHeightPercentageLarge
-    const symptomCoefficient = this.shouldShowTemperatureColumn ?
-      config.symptomHeightPercentage : config.symptomHeightPercentageLarge
-
-    this.xAxisHeight = height * xAxisCoefficient
-    const remainingHeight = height - this.xAxisHeight
-    this.symptomHeight = remainingHeight * symptomCoefficient
-    this.symptomRowHeight = this.symptomRowSymptoms.length *
-      this.symptomHeight
-    this.columnHeight = remainingHeight - this.symptomRowHeight
-    const chartHeight = this.shouldShowTemperatureColumn ?
-      height : (this.symptomRowHeight + this.xAxisHeight)
-
-    const numberOfColumnsToRender = Math.round(width / config.columnWidth)
-    const columns = makeColumnInfo()
-
-    this.setState({ columns, chartHeight, numberOfColumnsToRender })
-  }
-
  onLayout = ({ nativeEvent }) => {
    if (this.state.chartHeight) return
+    const height = nativeEvent.layout.height
+    const reCalculateChartInfo = () => {
+      // how many symptoms need to be displayed on the chart's upper symptom row?
+      this.symptomRowSymptoms = [
+        'bleeding',
+        'mucus',
+        'cervix',
+        'sex',
+        'desire',
+        'pain',
+        'mood',
+        'note'
+      ].filter((symptomName) => {
+        return this.cycleDaysSortedByDate.some(cycleDay => {
+          return cycleDay[symptomName]
+        })
+      })

-    this.reCalculateChartInfo(nativeEvent)
-    this.updateListeners(this.reCalculateChartInfo)
+      this.xAxisHeight = height * config.xAxisHeightPercentage
+      const remainingHeight = height - this.xAxisHeight
+      this.symptomHeight = config.symptomHeightPercentage * remainingHeight
+      this.symptomRowHeight = this.symptomRowSymptoms.length *
+        this.symptomHeight
+      this.columnHeight = remainingHeight - this.symptomRowHeight
+
+      this.chartSymptoms = [...this.symptomRowSymptoms]
+      if (this.cycleDaysSortedByDate.some(day => day.temperature)) {
+        this.chartSymptoms.push('temperature')
+      }
+
+      const columnData = this.makeColumnInfo()
+      this.setState({
+        columns: columnData,
+        chartHeight: height
+      })
+    }
+
+    reCalculateChartInfo()
+    this.updateListeners(reCalculateChartInfo)
  }

  updateListeners(dataUpdateHandler) {
@@ -119,85 +115,106 @@ class CycleChart extends Component {
    this.removeObvListener()
  }

+  makeColumnInfo() {
+    let amountOfCycleDays = getAmountOfCycleDays()
+    // if there's not much data yet, we want to show at least 30 days on the chart
+    if (amountOfCycleDays < 30) {
+      amountOfCycleDays = 30
+    } else {
+      // we don't want the chart to end abruptly before the first data day
+      amountOfCycleDays += 5
+    }
+    const localDates = getTodayAndPreviousDays(amountOfCycleDays)
+    return localDates.map(localDate => localDate.toString())
+  }
+
  render() {
-    const { chartHeight, chartLoaded, numberOfColumnsToRender } = this.state
-    const shouldShowChart = this.chartSymptoms.length > 0 ? true : false
-
    return (
-      <View onLayout={this.onLayout} style={styles.container}>
-        {!shouldShowChart && <NoData navigate={this.props.navigate}/>}
-        {shouldShowChart && !chartHeight && !chartLoaded && <AppLoadingView />}
-        <View style={styles.chartContainer}>
-          {shouldShowChart && (
-            <View style={styles.chartArea}>
+      <View
+        onLayout={this.onLayout}
+        style={{ flexDirection: 'row', flex: 1 }}
+      >
+        {!this.state.chartLoaded && <AppLoadingView />}

-              {chartHeight && chartLoaded && (
-                <React.Fragment>
-                  <YAxis
-                    height={this.columnHeight}
-                    symptomsToDisplay={this.symptomRowSymptoms}
-                    symptomsSectionHeight={this.symptomRowHeight}
-                    shouldShowTemperatureColumn=
-                      {this.shouldShowTemperatureColumn}
-                    xAxisHeight={this.xAxisHeight}
-                  />
-                  {this.shouldShowTemperatureColumn && (<HorizontalGrid
-                    height={this.columnHeight}
-                    startPosition={this.symptomRowHeight}
-                  />)}
-                </React.Fragment>
-              )}
+        {this.state.chartHeight && this.state.chartLoaded &&
+          <View>
+            <View style={[styles.yAxis, {height: this.symptomRowHeight}]}>
+              {this.symptomRowSymptoms.map(symptomName => {
+                return <View
+                  style={{ alignItems: 'center', justifyContent: 'center' }}
+                  key={symptomName}
+                  width={styles.yAxis.width}
+                  height={this.symptomRowHeight /
+                    this.symptomRowSymptoms.length}
+                >
+                  {symptomIcons[symptomName]}
+                </View>
+              })}
+            </View>
+            <View style={[styles.yAxis, {height: this.columnHeight}]}>
+              {makeYAxisLabels(this.columnHeight)}
+            </View>
+            <View style={[styles.yAxis, { alignItems: 'center', justifyContent: 'center' }]}>
+              <DripHomeIcon
+                name="circle"
+                size={styles.yAxis.width - 7}
+                color={cycleDayColor}
+              />
+              <AppText style={[styles.yAxisLabels.dateLabel]}>
+                {labels.date.toLowerCase()}
+              </AppText>
+            </View>
+          </View>}

-              {chartHeight &&
-               <FlatList
-                 horizontal={true}
-                 inverted={true}
-                 showsHorizontalScrollIndicator={false}
-                 data={this.state.columns}
-                 renderItem={this.renderColumn}
-                 keyExtractor={item => item}
-                 initialNumToRender={numberOfColumnsToRender}
-                 windowSize={30}
-                 onLayout={() => this.setState({chartLoaded: true})}
-                 onEndReached={() => this.setState({end: true})}
-                 ListFooterComponent={<LoadingMoreView end={this.state.end}/>}
-                 updateCellsBatchingPeriod={800}
-                 contentContainerStyle={{height: chartHeight}}
-               />
-              }
-            </View>
-          )}
-        </View>
-        {shouldShowChart && chartLoaded && !this.shouldShowTemperatureColumn
-          && (
-            <View style={styles.centerItem}>
-              <AppText style={{textAlign: 'center'}}>{shared.noTemperatureWarning}</AppText>
-            </View>
-          )}
+
+        {this.state.chartHeight && this.state.chartLoaded &&
+          makeHorizontalGrid(this.columnHeight, this.symptomRowHeight)
+        }
+
+        {this.state.chartHeight &&
+          <FlatList
+            horizontal={true}
+            inverted={true}
+            showsHorizontalScrollIndicator={false}
+            data={this.state.columns}
+            renderItem={this.renderColumn}
+            keyExtractor={item => item}
+            initialNumToRender={15}
+            windowSize={30}
+            onLayout={() => this.setState({chartLoaded: true})}
+            onEndReached={() => this.setState({end: true})}
+            ListFooterComponent={<LoadingMoreView end={this.state.end}/>}
+            updateCellsBatchingPeriod={800}
+          />
+        }
      </View>
    )
  }
 }

-function LoadingMoreView({ end }) {
+function LoadingMoreView(props) {
  return (
    <View style={styles.loadingMore}>
-      {!end && <ActivityIndicator size={'large'} color={'white'}/>}
+      {!props.end &&
+        <ActivityIndicator size={'large'} color={'white'}/>
+      }
    </View>
  )
 }

-LoadingMoreView.propTypes = {
-  end: PropTypes.bool
-}
+function getTodayAndPreviousDays(n) {
+  const today = LocalDate.now()
+  const targetDate = today.minusDays(n)

-const mapDispatchToProps = (dispatch) => {
-  return({
-    navigate: (page) => dispatch(navigate(page)),
-  })
-}
+  function getDaysInRange(currDate, range) {
+    if (currDate.isBefore(targetDate)) {
+      return range
+    } else {
+      range.push(currDate)
+      const next = currDate.minusDays(1)
+      return getDaysInRange(next, range)
+    }
+  }

-export default connect(
-  null,
-  mapDispatchToProps,
-)(CycleChart)
+  return getDaysInRange(today, [])
+}
@@ -1,39 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { Text, View } from 'react-native'
-
-import moment from 'moment'
-import { LocalDate } from 'js-joda'
-
-import styles from './styles'
-import cycleModule from '../../lib/cycle'
-
-const CycleDayLabel = ({ height, date }) => {
-  const { label } = styles.column
-  const dayDate = LocalDate.parse(date)
-  const cycleDayNumber = cycleModule().getCycleDayNumber(date)
-
-  const isFirstDayOfMonth = dayDate.dayOfMonth() === 1
-  const dateFormatting = isFirstDayOfMonth ? 'MMM' : 'Do'
-  const shortDate = moment(date, "YYYY-MM-DD").format(dateFormatting)
-  const boldDateLabel = isFirstDayOfMonth ? {fontWeight: 'bold'} : {}
-
-  return (
-    <View style={[styles.chartLegend, { height }]}>
-      <Text style={label.number}>
-        {cycleDayNumber ? cycleDayNumber : ' '}
-      </Text>
-      <Text style={[label.date, boldDateLabel]}>
-        {shortDate}
-      </Text>
-    </View>
-  )
-}
-
-CycleDayLabel.propTypes = {
-  height: PropTypes.number,
-  date: PropTypes.string,
-}
-
-export default CycleDayLabel
@@ -1,137 +1,305 @@
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { TouchableOpacity } from 'react-native'
-import { connect } from 'react-redux'
-
-import { setDate } from '../../slices/date'
-import { navigate } from '../../slices/navigation'
-
-import { getCycleDay } from '../../db'
-
-import SymptomCell from './symptom-cell'
-import TemperatureColumn from './temperature-column'
-import CycleDayLabel from './cycle-day-label'
-
 import {
-  symptomColorMethods,
-  getTemperatureProps,
-  isSymptomDataComplete
-} from '../helpers/chart'
+  Text, View, TouchableOpacity
+} from 'react-native'
+import { Surface, Group as G, Path, Shape } from 'react-native/Libraries/ART/ReactNativeART'
+import { LocalDate } from 'js-joda'
+import moment from 'moment'
+import styles from './styles'
+import config from '../../config'
+import cycleModule from '../../lib/cycle'
+import { getCycleDay } from '../../db'
+import DotAndLine from './dot-and-line'
+import { normalizeToScale } from './y-axis'

-class DayColumn extends Component {
-  static propTypes = {
-    dateString: PropTypes.string.isRequired,
-    chartSymptoms: PropTypes.array,
-    columnHeight: PropTypes.number.isRequired,
-    getFhmAndLtlInfo: PropTypes.func.isRequired,
-    navigate: PropTypes.func.isRequired,
-    setDate: PropTypes.func.isRequired,
-    shouldShowTemperatureColumn: PropTypes.bool,
-    symptomHeight: PropTypes.number.isRequired,
-    symptomRowSymptoms: PropTypes.array,
-    xAxisHeight: PropTypes.number,
-  }
+const label = styles.column.label

+export default class DayColumn extends Component {
  constructor(props) {
    super()
-
-    const { dateString, chartSymptoms, columnHeight } = props
-    const cycleDayData = getCycleDay(dateString)
+    const dateString = props.dateString
+    const columnHeight = props.columnHeight
+    this.getCycleDayNumber = cycleModule().getCycleDayNumber
+    const cycleDay = getCycleDay(dateString)
    this.data = {}
-
-    if (cycleDayData) {
-      this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom, ) => {
-        const symptomData = cycleDayData[symptom]
-
-        if (symptomData && symptom === 'temperature') {
-          symptomDataToDisplay[symptom] =
-           getTemperatureProps(symptomData, columnHeight, dateString)
-        } else {
-          if (symptomData && ! symptomData.exclude) {
-            // if symptomColorMethods entry doesn't exist for given symptom,
-            // use 'default'
-            const getSymptomColorIndex =
-              symptomColorMethods[symptom] || symptomColorMethods['default']
-
-            symptomDataToDisplay[symptom] = getSymptomColorIndex(symptomData)
+    if (cycleDay) {
+      this.data = props.chartSymptoms.reduce((acc, symptom) => {
+        if (['bleeding', 'temperature', 'mucus', 'desire', 'note'].includes(symptom)) {
+          acc[symptom] = cycleDay[symptom] && cycleDay[symptom].value
+          if (symptom === 'temperature' && acc.temperature) {
+            acc.y = normalizeToScale(acc.temperature, columnHeight)
+            const neighbor = getInfoForNeighborColumns(dateString, columnHeight)
+            for (const key in neighbor) {
+              acc[key] = neighbor[key]
+            }
          }
+        } else if (symptom === 'cervix') {
+          acc.cervix = cycleDay.cervix &&
+            (cycleDay.cervix.opening + cycleDay.cervix.firmness)
+        } else if (symptom === 'sex') {
+          // solo = 1 + partner = 2
+          acc.sex = cycleDay.sex &&
+            (cycleDay.sex.solo + 2 * cycleDay.sex.partner)
+        } else if (symptom === 'pain') {
+          // is any pain documented?
+          acc.pain = cycleDay.pain &&
+            Object.values({...cycleDay.pain}).some(x => x === true)
+        } else if (symptom === 'mood') {
+          // is mood documented?
+          acc.mood = cycleDay.mood &&
+            Object.values({...cycleDay.mood}).some(x => x === true)
        }
-
-        return symptomDataToDisplay
+        acc[`${symptom}Exclude`] = cycleDay[symptom] && cycleDay[symptom].exclude
+        return acc
      }, this.data)
    }

    this.fhmAndLtl = props.getFhmAndLtlInfo(
      props.dateString,
-      this.data.temperature ? this.data.temperature.value : null,
+      this.data.temperature,
      props.columnHeight
    )
  }

-  onDaySelect = (date) => {
-    this.props.setDate(date)
-    this.props.navigate('CycleDay')
-  }
-
  shouldComponentUpdate() {
    return false
  }

  render() {
-    const { columnHeight,
-      dateString,
-      shouldShowTemperatureColumn,
-      symptomHeight,
-      symptomRowSymptoms,
-      xAxisHeight
-    } = this.props
+    const columnElements = []
+    const dateString = this.props.dateString
+    const symptomHeight = this.props.symptomHeight
+
+    if(this.fhmAndLtl.drawLtlAt) {
+      const ltlLine = (<Shape
+        stroke={styles.nfpLine.stroke}
+        strokeWidth={styles.nfpLine.strokeWidth}
+        d={new Path()
+          .moveTo(0, this.fhmAndLtl.drawLtlAt)
+          .lineTo(config.columnWidth, this.fhmAndLtl.drawLtlAt)
+        }
+        key='ltl'
+      />)
+      columnElements.push(ltlLine)
+    }
+
+    if (this.fhmAndLtl.drawFhmLine) {
+      const x = styles.nfpLine.strokeWidth / 2
+      const fhmLine = (<Shape
+        fill="red"
+        stroke={styles.nfpLine.stroke}
+        strokeWidth={styles.nfpLine.strokeWidth}
+        d={new Path()
+          .moveTo(x, x)
+          .lineTo(x, this.props.columnHeight)
+        }
+        key='fhm'
+      />)
+      columnElements.push(fhmLine)
+    }
+
+
+    if (this.data.y) {
+      columnElements.push(
+        <DotAndLine
+          y={this.data.y}
+          exclude={this.data.temperatureExclude}
+          rightY={this.data.rightY}
+          rightTemperatureExclude={this.data.rightTemperatureExclude}
+          leftY={this.data.leftY}
+          leftTemperatureExclude={this.data.leftTemperatureExclude}
+          key='dotandline'
+        />
+      )
+    }
+
+    const cycleDayNumber = this.getCycleDayNumber(dateString)
+    const dayDate = LocalDate.parse(dateString)
+    const shortDate = dayDate.dayOfMonth() === 1 ?
+      moment(dateString, "YYYY-MM-DD").format('MMM')
+      :
+      moment(dateString, "YYYY-MM-DD").format('Do')
+    const boldDateLabel = dayDate.dayOfMonth() === 1 ? {fontWeight: 'bold'} : {}
+    const cycleDayLabel = (
+      <Text style = {label.number}>
+        {cycleDayNumber ? cycleDayNumber : ' '}
+      </Text>)
+    const dateLabel = (
+      <Text style = {[label.date, boldDateLabel]}>
+        {shortDate}
+      </Text>
+    )
+
+    const column = (
+      <G>
+        <Shape
+          stroke={styles.column.stroke.color}
+          strokeWidth={styles.column.stroke.width}
+          d={new Path().lineTo(0, this.props.chartHeight)}
+        />
+        { columnElements }
+      </G>
+    )
+
+    const symptomIconViews = {
+      bleeding: (
+        <SymptomIconView
+          value={this.data.bleeding}
+          symptomHeight={symptomHeight}
+          key='bleeding'
+        >
+          <View
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.bleeding[this.data.bleeding]}
+          />
+        </SymptomIconView>
+      ),
+      mucus: (
+        <SymptomIconView
+          value={this.data.mucus}
+          symptomHeight={symptomHeight}
+          key='mucus'
+        >
+          <View
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.mucus[this.data.mucus]}
+          />
+        </SymptomIconView>
+      ),
+      cervix: (
+        <SymptomIconView
+          value={this.data.cervix}
+          symptomHeight={symptomHeight}
+          key='cervix'
+        >
+          <View
+            {...styles.symptomIcon}
+            // cervix is sum of openess and firmness - fertile only when closed and hard (=0)
+            backgroundColor={this.data.cervix > 0 ?
+              styles.iconShades.cervix[2] :
+              styles.iconShades.cervix[0]
+            }
+          />
+        </SymptomIconView>
+      ),
+      sex: (
+        <SymptomIconView
+          value={this.data.sex}
+          symptomHeight={symptomHeight}
+          key='sex'
+        >
+          <View
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.sex[this.data.sex - 1]}
+          />
+        </SymptomIconView>
+      ),
+      desire: (
+        <SymptomIconView
+          value={this.data.desire}
+          symptomHeight={symptomHeight}
+          key='desire'
+        >
+          <View
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.desire[this.data.desire]}
+          />
+        </SymptomIconView>
+      ),
+      pain: (
+        <SymptomIconView
+          value={this.data.pain}
+          symptomHeight={symptomHeight}
+          key='pain'
+        >
+          <View
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.pain}
+          />
+        </SymptomIconView>
+      ),
+      mood: (
+        <SymptomIconView
+          value={this.data.mood}
+          symptomHeight={symptomHeight}
+          key='mood'
+        >
+          <View
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.mood}
+          />
+        </SymptomIconView>
+      ),
+      note: (
+        <SymptomIconView
+          value={this.data.note}
+          symptomHeight={symptomHeight}
+          key='note'
+        >
+          <View
+            {...styles.symptomIcon}
+            backgroundColor={styles.iconShades.note}
+          />
+        </SymptomIconView>
+      )
+    }

    return (
      <TouchableOpacity
-        onPress={() => this.onDaySelect(dateString)}
+        onPress={() => this.props.navigate('CycleDay', { date: dateString })}
        activeOpacity={1}
      >
+        <View>
+          {this.props.symptomRowSymptoms.map(symptomName => {
+            return symptomIconViews[symptomName]
+          })}
+        </View>

-        { symptomRowSymptoms.map(symptom => {
-          const hasSymptomData = this.data.hasOwnProperty(symptom)
-          return (
-            <SymptomCell
-              key={symptom}
-              symptom={symptom}
-              symptomValue={hasSymptomData && this.data[symptom]}
-              isSymptomDataComplete={
-                hasSymptomData && isSymptomDataComplete(symptom, dateString)
-              }
-              height={symptomHeight}
-            />)
-        }
-        )}
-
-        {shouldShowTemperatureColumn && <TemperatureColumn
-          horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
-          isVerticalLine={this.fhmAndLtl.drawFhmLine}
-          data={this.data && this.data.temperature}
-          columnHeight={columnHeight}
-        />}
-
-        <CycleDayLabel
-          height={xAxisHeight}
-          date={dateString}
-        />
+        <Surface width={config.columnWidth} height={this.props.columnHeight}>
+          {column}
+        </Surface>

+        <View style={{height: this.props.xAxisHeight}}>
+          {cycleDayLabel}
+          {dateLabel}
+        </View>
      </TouchableOpacity>
    )
  }
 }

-const mapDispatchToProps = (dispatch) => {
-  return({
-    setDate: (date) => dispatch(setDate(date)),
-    navigate: (page) => dispatch(navigate(page)),
-  })
+
+function SymptomIconView(props) {
+  const style = [styles.symptomRow, {height: props.symptomHeight}]
+  return (
+    <View style={style}>
+      {(typeof props.value === 'number' || props.value === true || typeof props.value === 'string') &&
+        props.children
+      }
+    </View>
+  )
 }

-export default connect(
-  null,
-  mapDispatchToProps,
-)(DayColumn)
+function getInfoForNeighborColumns(dateString, columnHeight) {
+  const ret = {
+    rightY: null,
+    rightTemperatureExclude: null,
+    leftY: null,
+    leftTemperatureExclude: null
+  }
+  const target = LocalDate.parse(dateString)
+  const dayBefore = target.minusDays(1).toString()
+  const dayAfter = target.plusDays(1).toString()
+  const cycleDayBefore = getCycleDay(dayBefore)
+  const cycleDayAfter = getCycleDay(dayAfter)
+  if (cycleDayAfter && cycleDayAfter.temperature) {
+    ret.rightY = normalizeToScale(cycleDayAfter.temperature.value, columnHeight)
+    ret.rightTemperatureExclude = cycleDayAfter.temperature.exclude
+  }
+  if (cycleDayBefore && cycleDayBefore.temperature) {
+    ret.leftY = normalizeToScale(cycleDayBefore.temperature.value, columnHeight)
+    ret.leftTemperatureExclude = cycleDayBefore.temperature.exclude
+  }
+
+  return ret
+}
@@ -1,20 +1,10 @@
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import { Path, Shape } from 'react-native/Libraries/ART/ReactNativeART'

 import styles from './styles'
 import config from '../../config'

 export default class DotAndLine extends Component {
-  static propTypes = {
-    exclude: PropTypes.bool,
-    leftY: PropTypes.number,
-    leftTemperatureExclude: PropTypes.bool,
-    rightY: PropTypes.number,
-    rightTemperatureExclude: PropTypes.bool,
-    y: PropTypes.number.isRequired
-  }
-
  shouldComponentUpdate(newProps) {
    return Object.keys(newProps).some(key => newProps[key] != this.props[key])
  }
@@ -1,26 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { View } from 'react-native'
-
-import { getTickPositions } from '../helpers/chart'
-
-import styles from './styles'
-
-const HorizontalGrid = ({ height, startPosition }) => {
-  return getTickPositions(height).map(tick => {
-    return (
-      <View
-        top={startPosition + tick}
-        {...styles.horizontalGrid}
-        key={tick}
-      />
-    )
-  })
-}
-
-HorizontalGrid.propTypes = {
-  height: PropTypes.number,
-  startPosition: PropTypes.number,
-}
-
-export default HorizontalGrid
@@ -1,5 +1,5 @@
 import { getCycleStatusForDay } from '../../lib/sympto-adapter'
-import { normalizeToScale } from '../helpers/chart'
+import { normalizeToScale } from './y-axis'

 export default function () {
  const cycle = {
@@ -1,31 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { View } from 'react-native'
-
-import AppText from '../app-text'
-import SettingsButton from '../settings/shared/settings-button'
-
-import { shared } from '../../i18n/en/labels'
-import styles from './styles'
-
-const NoData = ({ navigate }) => {
-  return (
-    <View flex={1}>
-      <View style={styles.centerItem}>
-        <AppText>{shared.noDataWarning}</AppText>
-        <SettingsButton
-          onPress={() => {navigate('CycleDay')}}
-          style={{marginHorizontal: 40}}
-        >
-          {shared.noDataButtonText}
-        </SettingsButton>
-      </View>
-    </View>
-  )
-}
-
-NoData.propTypes = {
-  navigate: PropTypes.func,
-}
-
-export default NoData
@@ -11,29 +11,7 @@ const gridLineWidthVertical = 0.6
 const gridLineWidthHorizontal = 0.3
 const numberLabelFontSize = 13

-const redColor = '#c3000d'
-const violetColor = '#6a7b98'
-const shadesOfViolet = ['#e3e7ed', '#c8cfdc', '#acb8cb', '#91a0ba', '#7689a9', violetColor] // light to dark
-const yellowColor = '#dbb40c'
-const shadesOfYellow = ['#f0e19d', '#e9d26d', '#e2c33c', yellowColor] // light to dark
-const magentaColor = '#6f2565'
-const shadesOfMagenta = ['#a87ca2', '#8b5083', magentaColor] // light to dark
-const pinkColor = '#9e346c'
-const shadesOfPink = ['#c485a6', '#b15c89', pinkColor] // light to dark
-const lightGreenColor = '#bccd67'
-const orangeColor = '#bc6642'
-const mintColor = '#6ca299'
-
 const styles = {
-  container: { flex: 1 },
-  chartContainer: { flexDirection: 'column' },
-  chartArea: { flexDirection: 'row' },
-  centerItem: {
-    flex:1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: 25,
-  },
  curve: {
    stroke: colorTemperature,
    strokeWidth: lineWidth,
@@ -70,44 +48,39 @@ const styles = {
      width: gridLineWidthVertical,
    }
  },
-  symptomDot: {
+  symptomIcon: {
    width: 12,
    height: 12,
    borderRadius: 50,
  },
-  iconColors: {
-    'bleeding': {
-      color: redColor,
-      shades: shadesOfRed,
-    },
-    'mucus': {
-      color: violetColor,
-      shades: shadesOfViolet,
-    },
-    'cervix': {
-      color: yellowColor,
-      shades: shadesOfYellow,
-    },
-    'sex': {
-      color: magentaColor,
-      shades: shadesOfMagenta,
-    },
-    'desire': {
-      color: pinkColor,
-      shades: shadesOfPink,
-    },
-    'pain': {
-      color: lightGreenColor,
-      shades: [lightGreenColor],
-    },
-    'mood': {
-      color: orangeColor,
-      shades: [orangeColor],
-    },
-    'note': {
-      color: mintColor,
-      shades: [mintColor],
-    },
+  iconShades: {
+    'bleeding': shadesOfRed,
+    'mucus': [
+      '#e3e7ed',
+      '#c8cfdc',
+      '#acb8cb',
+      '#91a0ba',
+      '#7689a9'
+    ],
+    'cervix': [
+      '#f0e19d',
+      '#e9d26d',
+      '#e2c33c',
+      '#dbb40c',
+    ],
+    'sex': [
+      '#a87ca2',
+      '#8b5083',
+      '#6f2565',
+    ],
+    'desire': [
+      '#c485a6',
+      '#b15c89',
+      '#9e346c',
+    ],
+    'pain': ['#bccd67'],
+    'mood': ['#bc6642'],
+    'note': ['#6ca299']
  },
  yAxis: {
    width: 27,
@@ -136,18 +109,6 @@ const styles = {
      fontWeight: '100',
    }
  },
-  symptomIcon: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  chartLegend: {
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-  },
-  boldTick: {
-    fontWeight: 'bold',
-    fontSize: 11,
-  },
  horizontalGrid: {
    position:'absolute',
    borderStyle: 'solid',
@@ -1,53 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { View } from 'react-native'
-
-import styles from './styles'
-import config from '../../config'
-
-const SymptomCell = ({
-  height,
-  symptom,
-  symptomValue,
-  isSymptomDataComplete
-}) => {
-
-  const shouldDrawDot = symptomValue !== false
-  const styleParent = [styles.symptomRow, { height, width: config.columnWidth }]
-  let styleChild
-
-  if (shouldDrawDot) {
-    const styleSymptom = styles.iconColors[symptom]
-    const symptomColor = styleSymptom.shades[symptomValue]
-
-    const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix')
-
-    const backgroundColor = (isMucusOrCervix && !isSymptomDataComplete) ?
-      'white' : symptomColor
-    const borderWidth = (isMucusOrCervix && !isSymptomDataComplete) ? 2 : 0
-    const borderColor = symptomColor
-    styleChild = [styles.symptomDot, {
-      backgroundColor,
-      borderColor,
-      borderWidth
-    }]
-  }
-
-  return (
-    <View style={styleParent} key={symptom}>
-      {shouldDrawDot && <View style={styleChild} />}
-    </View>
-  )
-}
-
-SymptomCell.propTypes = {
-  height: PropTypes.number,
-  symptom: PropTypes.string,
-  symptomValue: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.number,
-  ]),
-  isSymptomDataComplete: PropTypes.bool,
-}
-
-export default SymptomCell
@@ -1,26 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { View } from 'react-native'
-
-import DripIcon from '../../assets/drip-icons'
-
-import styles from './styles'
-
-const SymptomIcon = ({ symptom, height }) => {
-  return (
-    <View style={styles.symptomIcon} width={styles.yAxis.width} height={height}>
-      <DripIcon
-        size={16}
-        name={`drip-icon-${symptom}`}
-        color={styles.iconColors[symptom].color}
-      />
-    </View>
-  )
-}
-
-SymptomIcon.propTypes = {
-  height: PropTypes.number,
-  symptom: PropTypes.string,
-}
-
-export default SymptomIcon
@@ -1,64 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { Surface , Path } from 'react-native/Libraries/ART/ReactNativeART'
-
-import ChartLine from './chart-line'
-import DotAndLine from './dot-and-line'
-
-import styles from './styles'
-import config from '../../config'
-
-const TemperatureColumn = ({
-  horizontalLinePosition,
-  isVerticalLine,
-  data,
-  columnHeight
-}) => {
-
-  const x = styles.nfpLine.strokeWidth / 2
-
-  return (
-    <Surface width={config.columnWidth} height={columnHeight}>
-
-      <ChartLine
-        path={new Path().lineTo(0, columnHeight)}
-      />
-
-      {horizontalLinePosition && <ChartLine
-        path={new Path()
-          .moveTo(0, horizontalLinePosition)
-          .lineTo(config.columnWidth, horizontalLinePosition)
-        }
-        isNfpLine={true}
-        key='ltl'
-      />}
-
-      {isVerticalLine && <ChartLine
-        path={new Path().moveTo(x, x).lineTo(x, columnHeight)}
-        isNfpLine={true}
-        key='fhm'
-      />}
-
-      {data && data.y && <DotAndLine
-        y={data.y}
-        exclude={data.temperatureExclude}
-        rightY={data.rightY}
-        rightTemperatureExclude={data.rightTemperatureExclude}
-        leftY={data.leftY}
-        leftTemperatureExclude={data.leftTemperatureExclude}
-        key='dotandline'
-      />}
-
-    </Surface>
-  )
-}
-
-TemperatureColumn.propTypes = {
-  horizontalLinePosition: PropTypes.number,
-  isVerticalLine: PropTypes.bool,
-  data: PropTypes.object,
-  columnHeight: PropTypes.number,
-}
-
-export default TemperatureColumn
@@ -1,34 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { View } from 'react-native'
-
-import Tick from './tick'
-
-import { getTickList } from '../helpers/chart'
-
-import styles from './styles'
-
-const TickList = ({ height }) => {
-  return (
-    <View style={[styles.yAxis, { height }]}>{
-      getTickList(height)
-        .map(({ label, position, isBold, shouldShowLabel}) => {
-          return (
-            <Tick
-              key={label}
-              yPosition={position}
-              isBold={isBold}
-              shouldShowLabel={shouldShowLabel}
-              label={label}
-            />
-          )
-        })
-    }</View>
-  )
-}
-
-TickList.propTypes = {
-  height: PropTypes.number,
-}
-
-export default TickList
@@ -1,29 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import AppText from '../app-text'
-
-import styles from './styles'
-
-const Tick = ({ yPosition, isBold, shouldShowLabel, label }) => {
-  // this eyeballing is sadly necessary because RN does not
-  // support percentage values for transforms, which we'd need
-  // to reliably place the label vertically centered to the grid
-  const topPosition = yPosition - 8
-  const style = [
-    styles.yAxisLabels.tempScale,
-    {top: topPosition},
-    isBold && styles.boldTick
-  ]
-
-  return <AppText style={style}>{shouldShowLabel && label}</AppText>
-}
-
-Tick.propTypes = {
-  yPosition: PropTypes.number,
-  isBold: PropTypes.bool,
-  shouldShowLabel: PropTypes.bool,
-  label: PropTypes.string,
-}
-
-export default Tick
@@ -1,46 +1,75 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { View } from 'react-native'
-
-import SymptomIcon from './symptom-icon'
-import TickList from './tick-list'
-import ChartLegend from './chart-legend'
-
+import config from '../../config'
 import styles from './styles'
+import { scaleObservable, unitObservable } from '../../local-storage'
+import AppText from '../app-text'

-const YAxis = ({
-  height,
-  symptomsToDisplay,
-  symptomsSectionHeight,
-  shouldShowTemperatureColumn,
-  xAxisHeight
-}) => {
-  const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length
+export function makeYAxisLabels(columnHeight) {
+  const units = unitObservable.value
+  const scaleMax = scaleObservable.value.max
+  const style = styles.yAxisLabels.tempScale

-  return (
-    <View>
-      <View style={[styles.yAxis, {height: symptomsSectionHeight}]}>
-        {symptomsToDisplay.map(symptom => (
-          <SymptomIcon
-            key={symptom}
-            symptom={symptom}
-            height={symptomIconHeight}
-          />
-        )
-        )}
-      </View>
-      {shouldShowTemperatureColumn && <TickList height={height} />}
-      <ChartLegend xAxisHeight={xAxisHeight} />
-    </View>
-  )
+  return getTickPositions(columnHeight).map((y, i) => {
+    const tick = scaleMax - i * units
+    const tickLabel = tick * 10 % 10 ? tick.toString() : tick.toString() + '.0'
+    let showTick
+    let tickBold
+    if (units === 0.1) {
+      showTick =  (tick * 10 % 2) ? false : true
+      tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold', fontSize: 11}
+    } else {
+      showTick =  (tick * 10 % 5) ? false : true
+      tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold', fontSize: 11}
+    }
+    // this eyeballing is sadly necessary because RN does not
+    // support percentage values for transforms, which we'd need
+    // to reliably place the label vertically centered to the grid
+    return (
+      <AppText
+        style={[style, {top: y - 8}, tickBold]}
+        key={i}>
+        {showTick && tickLabel}
+      </AppText>
+    )
+  })
 }

-YAxis.propTypes = {
-  height: PropTypes.number,
-  symptomsToDisplay: PropTypes.array,
-  symptomsSectionHeight: PropTypes.number,
-  shouldShowTemperatureColumn: PropTypes.bool,
-  xAxisHeight: PropTypes.number.isRequired
+export function makeHorizontalGrid(columnHeight, symptomRowHeight) {
+  return getTickPositions(columnHeight).map(tick => {
+    return (
+      <View
+        top={tick + symptomRowHeight}
+        {...styles.horizontalGrid}
+        key={tick}
+      />
+    )
+  })
 }

-export default YAxis
+function getTickPositions(columnHeight) {
+  const units = unitObservable.value
+  const scaleMin = scaleObservable.value.min
+  const scaleMax = scaleObservable.value.max
+  const numberOfTicks = (scaleMax - scaleMin) * (1 / units) + 1
+  const tickDistance = 1 / (numberOfTicks - 1)
+  const tickPositions = []
+  for (let i = 0; i < numberOfTicks; i++) {
+    const position = getAbsoluteValue(tickDistance * i, columnHeight)
+    tickPositions.push(position)
+  }
+  return tickPositions
+}
+
+export function normalizeToScale(temp, columnHeight) {
+  const scale = scaleObservable.value
+  const valueRelativeToScale = (scale.max - temp) / (scale.max - scale.min)
+  return getAbsoluteValue(valueRelativeToScale, columnHeight)
+}
+
+function getAbsoluteValue(relative, columnHeight) {
+  // we add some height to have some breathing room
+  const verticalPadding = columnHeight * config.temperatureScale.verticalPadding
+  const scaleHeight = columnHeight - 2 * verticalPadding
+  return scaleHeight * relative + verticalPadding
+}
@@ -1,20 +0,0 @@
-import React, { Component } from 'react'
-import { View, Dimensions } from 'react-native'
-import styles from '../../styles'
-
-export default class FillerBoxes extends Component {
-  render() {
-    const n = Dimensions.get('window').width / styles.symptomBox.width
-    const fillerBoxes = []
-    for (let i = 0; i < Math.ceil(n); i++) {
-      fillerBoxes.push(
-        <View
-          width={styles.symptomBox.width}
-          height={0}
-          key={i.toString()}
-        />
-      )
-    }
-    return fillerBoxes
-  }
-}
@@ -1,174 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { View, TouchableOpacity } from 'react-native'
-
-import AppText from '../app-text'
-import DripIcon from '../../assets/drip-icons'
-
-import styles from '../../styles'
-
-import { headerTitles as symptomTitles } from '../../i18n/en/labels'
-import * as labels from '../../i18n/en/cycle-day'
-const bleedingLabels = labels.bleeding.labels
-const intensityLabels = labels.intensity
-const sexLabels = labels.sex.categories
-const contraceptiveLabels = labels.contraceptives.categories
-const painLabels = labels.pain.categories
-const moodLabels = labels.mood.categories
-
-function isNumber(val) {
-  return typeof val === 'number'
-}
-
-const l = {
-  bleeding: ({ value, exclude }) => {
-    if (isNumber(value)) {
-      const bleedingLabel = bleedingLabels[value]
-      return exclude ? `(${bleedingLabel})` : bleedingLabel
-    }
-  },
-  temperature: ({ value, time, exclude }) => {
-    if (isNumber(value)) {
-      let temperatureLabel = `${value} °C`
-      if (time) {
-        temperatureLabel += ` - ${time}`
-      }
-      if (exclude) {
-        temperatureLabel = `(${temperatureLabel})`
-      }
-      return temperatureLabel
-    }
-  },
-  mucus: mucus => {
-    const filledCategories = ['feeling', 'texture'].filter(c => isNumber(mucus[c]))
-    let label = filledCategories.map(category => {
-      return labels.mucus.subcategories[category] + ': ' + labels.mucus[category].categories[mucus[category]]
-    }).join(', ')
-
-    if (isNumber(mucus.value)) label += `\n => ${labels.mucusNFP[mucus.value]}`
-    if (mucus.exclude) label = `(${label})`
-
-    return label
-  },
-  cervix: cervix => {
-    const filledCategories = ['opening', 'firmness', 'position'].filter(c => isNumber(cervix[c]))
-    let label = filledCategories.map(category => {
-      return labels.cervix.subcategories[category] + ': ' + labels.cervix[category].categories[cervix[category]]
-    }).join(', ')
-
-    if (cervix.exclude) label = `(${label})`
-
-    return label
-  },
-  note: note => note.value,
-  desire: ({ value }) => {
-    if (isNumber(value)) {
-      return intensityLabels[value]
-    }
-  },
-  sex: sex => {
-    const sexLabel = []
-    if (sex && Object.values({...sex}).some(val => val)){
-      Object.keys(sex).forEach(key => {
-        if(sex[key] && key !== 'other' && key !== 'note') {
-          sexLabel.push(
-            sexLabels[key] ||
-            contraceptiveLabels[key]
-          )
-        }
-        if(key === 'other' && sex.other) {
-          let label = contraceptiveLabels[key]
-          if(sex.note) {
-            label = `${label} (${sex.note})`
-          }
-          sexLabel.push(label)
-        }
-      })
-      return sexLabel.join(', ')
-    }
-  },
-  pain: pain => {
-    const painLabel = []
-    if (pain && Object.values({...pain}).some(val => val)){
-      Object.keys(pain).forEach(key => {
-        if(pain[key] && key !== 'other' && key !== 'note') {
-          painLabel.push(painLabels[key])
-        }
-        if(key === 'other' && pain.other) {
-          let label = painLabels[key]
-          if(pain.note) {
-            label = `${label} (${pain.note})`
-          }
-          painLabel.push(label)
-        }
-      })
-      return painLabel.join(', ')
-    }
-  },
-  mood: mood => {
-    const moodLabel = []
-    if (mood && Object.values({...mood}).some(val => val)){
-      Object.keys(mood).forEach(key => {
-        if(mood[key] && key !== 'other' && key !== 'note') {
-          moodLabel.push(moodLabels[key])
-        }
-        if(key === 'other' && mood.other) {
-          let label = moodLabels[key]
-          if(mood.note) {
-            label = `${label} (${mood.note})`
-          }
-          moodLabel.push(label)
-        }
-      })
-      return moodLabel.join(', ')
-    }
-  }
-}
-
-const getLabel = (symptom, symptomData) => {
-  return symptomData && l[symptom](symptomData)
-}
-
-export default function SymptomBox(
-  { disabled, onPress, symptom, symptomData }) {
-
-  const data = getLabel(symptom, symptomData)
-  const iconName = `drip-icon-${symptom}`
-
-  const disabledStyle = disabled ? styles.symptomInFuture : null
-  const containerStyle = [
-    styles.symptomBox,
-    data && styles.symptomBoxActive,
-    disabledStyle
-  ]
-  const titleStyle = [
-    data && styles.symptomTextActive,
-    disabledStyle,
-    {fontSize: 15}
-  ]
-  const dataBoxStyle = [styles.symptomDataBox, disabledStyle]
-  const iconColor = data ? 'white' : 'black'
-
-  return (
-    <TouchableOpacity onPress={onPress} disabled={disabled} testID={iconName}>
-      <View style={containerStyle}>
-        <DripIcon name={iconName} size={50} color={iconColor} />
-        <AppText style={titleStyle} numberOfLines={1}>
-          {symptomTitles[symptom].toLowerCase()}
-        </AppText>
-      </View>
-      <View style={dataBoxStyle}>
-        <AppText style={styles.symptomDataText} numberOfLines={3}>
-          {data}
-        </AppText>
-      </View>
-    </TouchableOpacity>
-  )
-}
-
-SymptomBox.propTypes = {
-  disabled: PropTypes.bool.isRequired,
-  onPress: PropTypes.func.isRequired,
-  symptom: PropTypes.string.isRequired,
-  symptomData: PropTypes.object
-}
@@ -1,110 +1,258 @@
 import React, { Component } from 'react'
-import { ScrollView, View } from 'react-native'
-import PropTypes from 'prop-types'
-
-import { connect } from 'react-redux'
-import { getDate, setDate } from '../../slices/date'
-import { navigate } from '../../slices/navigation'
-
+import {
+  ScrollView,
+  View,
+  TouchableOpacity,
+  Dimensions
+} from 'react-native'
 import { LocalDate } from 'js-joda'
 import Header from '../header'
-import FillerBoxes from './FillerBoxes'
-import SymptomBox from './SymptomBox'
-
-import cycleModule from '../../lib/cycle'
-import formatDate from '../helpers/format-date'
 import { getCycleDay } from '../../db'
+import cycleModule from '../../lib/cycle'
 import styles from '../../styles'
+import * as labels from '../../i18n/en/cycle-day'
+import { headerTitles as symptomTitles } from '../../i18n/en/labels'
+import AppText from '../app-text'
+import DripIcon from '../../assets/drip-icons'

-class CycleDayOverView extends Component {
-
-  static propTypes = {
-    navigate: PropTypes.func,
-    setDate: PropTypes.func,
-    // The following are not being used,
-    // we could see if it's possible to not pass them from the <App />
-    cycleDay: PropTypes.object,
-    date: PropTypes.string,
-  }
+const bleedingLabels = labels.bleeding.labels
+const intensityLabels = labels.intensity
+const sexLabels = labels.sex.categories
+const contraceptiveLabels = labels.contraceptives.categories
+const painLabels = labels.pain.categories
+const moodLabels = labels.mood.categories

+export default class CycleDayOverView extends Component {
  constructor(props) {
    super(props)
    this.state = {
-      cycleDay: getCycleDay(props.date)
+      date: this.props.date,
+      cycleDay: getCycleDay(this.props.date)
    }
  }

-  updateCycleDay = (date) => {
-    this.props.setDate(date)
+  goToCycleDay = (target) => {
+    const localDate = LocalDate.parse(this.state.date)
+    const targetDate = target === 'before' ?
+      localDate.minusDays(1).toString() :
+      localDate.plusDays(1).toString()
    this.setState({
-      cycleDay: getCycleDay(date)
+      date: targetDate,
+      cycleDay: getCycleDay(targetDate)
    })
  }

-  goToPrevDay = () => {
-    const { date } = this.props
-    const prevDate = LocalDate.parse(date).minusDays(1).toString()
-    this.updateCycleDay(prevDate)
+  navigate(symptom) {
+    this.props.navigate(symptom, this.state)
  }

-  goToNextDay = () => {
-    const { date } = this.props
-    const nextDate = LocalDate.parse(date).plusDays(1).toString()
-    this.updateCycleDay(nextDate)
+  getLabel(symptomName) {
+    const cycleDay = this.state.cycleDay
+    if (!cycleDay || !cycleDay[symptomName]) return
+
+    const l = {
+      bleeding: bleeding => {
+        if (isNumber(bleeding.value)) {
+          let bleedingLabel = bleedingLabels[bleeding.value]
+          if (bleeding.exclude) bleedingLabel = "( " + bleedingLabel + " )"
+          return bleedingLabel
+        }
+      },
+      temperature: temperature => {
+        if (isNumber(temperature.value)) {
+          let temperatureLabel = `${temperature.value} °C - ${temperature.time}`
+          if (temperature.exclude) {
+            temperatureLabel = "( " + temperatureLabel + " )"
+          }
+          return temperatureLabel
+        }
+      },
+      mucus: mucus => {
+        const filledCategories = ['feeling', 'texture'].filter(c => isNumber(mucus[c]))
+        let label = filledCategories.map(category => {
+          return labels.mucus.subcategories[category] + ': ' + labels.mucus[category].categories[mucus[category]]
+        }).join(', ')
+
+        if (isNumber(mucus.value)) label += `\n => ${labels.mucusNFP[mucus.value]}`
+        if (mucus.exclude) label = `(${label})`
+
+        return label
+      },
+      cervix: cervix => {
+        const filledCategories = ['opening', 'firmness', 'position'].filter(c => isNumber(cervix[c]))
+        let label = filledCategories.map(category => {
+          return labels.cervix.subcategories[category] + ': ' + labels.cervix[category].categories[cervix[category]]
+        }).join(', ')
+
+        if (cervix.exclude) label = `(${label})`
+
+        return label
+      },
+      note: note => {
+        return note.value
+      },
+      desire: desire => {
+        if (isNumber(desire.value)) {
+          const desireLabel = `${intensityLabels[desire.value]}`
+          return desireLabel
+        }
+      },
+      sex: sex => {
+        let sexLabel = []
+        if (sex && Object.values({...sex}).some(val => val)){
+          Object.keys(sex).forEach(key => {
+            if(sex[key] && key !== 'other' && key !== 'note') {
+              sexLabel.push(
+                sexLabels[key] ||
+                contraceptiveLabels[key]
+              )
+            }
+            if(key === 'other' && sex.other) {
+              let label = contraceptiveLabels[key]
+              if(sex.note) {
+                label = `${label} (${sex.note})`
+              }
+              sexLabel.push(label)
+            }
+          })
+          sexLabel = sexLabel.join(', ')
+          return sexLabel
+        }
+      },
+      pain: pain => {
+        let painLabel = []
+        if (pain && Object.values({...pain}).some(val => val)){
+          Object.keys(pain).forEach(key => {
+            if(pain[key] && key !== 'other' && key !== 'note') {
+              painLabel.push(painLabels[key])
+            }
+            if(key === 'other' && pain.other) {
+              let label = painLabels[key]
+              if(pain.note) {
+                label = `${label} (${pain.note})`
+              }
+              painLabel.push(label)
+            }
+          })
+          painLabel = painLabel.join(', ')
+          return painLabel
+        }
+      },
+      mood: mood => {
+        let moodLabel = []
+        if (mood && Object.values({...mood}).some(val => val)){
+          Object.keys(mood).forEach(key => {
+            if(mood[key] && key !== 'other' && key !== 'note') {
+              moodLabel.push(moodLabels[key])
+            }
+            if(key === 'other' && mood.other) {
+              let label = moodLabels[key]
+              if(mood.note) {
+                label = `${label} (${mood.note})`
+              }
+              moodLabel.push(label)
+            }
+          })
+          moodLabel = moodLabel.join(', ')
+          return moodLabel
+        }
+      }
+    }
+
+    const symptomValue = cycleDay[symptomName]
+    return l[symptomName](symptomValue)
  }

  render() {
-    const { cycleDay } = this.state
-    const { date } = this.props
-
-    const dateInFuture = LocalDate.now().isBefore(LocalDate.parse(date))
-
-    const symptomBoxesList = [
-      'bleeding',
-      'temperature',
-      'mucus',
-      'cervix',
-      'desire',
-      'sex',
-      'pain',
-      'mood',
-      'note',
-    ]
-
-    const { getCycleDayNumber } = cycleModule()
-    const cycleDayNumber = getCycleDayNumber(date)
-    const headerSubtitle = cycleDayNumber && `Cycle day ${cycleDayNumber}`
+    const getCycleDayNumber = cycleModule().getCycleDayNumber
+    const cycleDayNumber = getCycleDayNumber(this.state.date)
+    const dateInFuture = LocalDate
+      .now()
+      .isBefore(LocalDate.parse(this.state.date))

    return (
      <View style={{ flex: 1 }}>
        <Header
-          handleBack={this.goToPrevDay}
-          handleNext={this.goToNextDay}
-          title={formatDate(date)}
-          subtitle={headerSubtitle}
+          isCycleDayOverView={true}
+          cycleDayNumber={cycleDayNumber}
+          date={this.state.date}
+          goToCycleDay={this.goToCycleDay}
        />
        <ScrollView>
          <View style={styles.symptomBoxesView}>
-            {
-              symptomBoxesList.map(symptom => {
-                const symptomEditView =
-                  `${symptom[0].toUpperCase() + symptom.substring(1)}EditView`
-                const symptomData =
-                  cycleDay && cycleDay[symptom] ? cycleDay[symptom] : null
-                return(
-                  <SymptomBox
-                    key={symptom}
-                    symptom={symptom}
-                    symptomData={symptomData}
-                    onPress={() => this.props.navigate(symptomEditView)}
-                    disabled={dateInFuture && symptom !== 'note'}
-                  />)
-              })
-            }
-            {
-              // this is just to make the last row adhere to the grid
-              // (and) because there are no pseudo properties in RN
-            }
+            <SymptomBox
+              title={symptomTitles.bleeding}
+              onPress={() => this.navigate('BleedingEditView')}
+              data={this.getLabel('bleeding')}
+              disabled={dateInFuture}
+              iconName='drip-icon-bleeding'
+            >
+            </SymptomBox>
+            <SymptomBox
+              title={symptomTitles.temperature}
+              onPress={() => this.navigate('TemperatureEditView')}
+              data={this.getLabel('temperature')}
+              disabled={dateInFuture}
+              iconName='drip-icon-temperature'
+            >
+            </SymptomBox>
+            <SymptomBox
+              title={symptomTitles.mucus}
+              onPress={() => this.navigate('MucusEditView')}
+              data={this.getLabel('mucus')}
+              disabled={dateInFuture}
+              iconName='drip-icon-mucus'
+            >
+            </SymptomBox>
+            <SymptomBox
+              title={symptomTitles.cervix}
+              onPress={() => this.navigate('CervixEditView')}
+              data={this.getLabel('cervix')}
+              disabled={dateInFuture}
+              iconName='drip-icon-cervix'
+            >
+            </SymptomBox>
+            <SymptomBox
+              title={symptomTitles.desire}
+              onPress={() => this.navigate('DesireEditView')}
+              data={this.getLabel('desire')}
+              disabled={dateInFuture}
+              iconName='drip-icon-desire'
+            >
+            </SymptomBox>
+            <SymptomBox
+              title={symptomTitles.sex}
+              onPress={() => this.navigate('SexEditView')}
+              data={this.getLabel('sex')}
+              disabled={dateInFuture}
+              iconName='drip-icon-sex'
+            >
+            </SymptomBox>
+            <SymptomBox
+              title={symptomTitles.pain}
+              onPress={() => this.navigate('PainEditView')}
+              data={this.getLabel('pain')}
+              disabled={dateInFuture}
+              iconName='drip-icon-pain'
+            >
+            </SymptomBox>
+            <SymptomBox
+              title={symptomTitles.mood}
+              onPress={() => this.navigate('MoodEditView')}
+              data={this.getLabel('mood')}
+              disabled={dateInFuture}
+              iconName='drip-icon-mood'
+            >
+            </SymptomBox>
+            <SymptomBox
+              title={symptomTitles.note}
+              onPress={() => this.navigate('NoteEditView')}
+              data={this.getLabel('note')}
+              iconName='drip-icon-note'
+            >
+            </SymptomBox>
+            {/*  this is just to make the last row adhere to the grid
+        (and) because there are no pseudo properties in RN */}
            <FillerBoxes />
          </View>
        </ScrollView>
@@ -113,20 +261,58 @@ class CycleDayOverView extends Component {
  }
 }

-const mapStateToProps = (state) => {
-  return({
-    date: getDate(state),
-  })
+
+
+
+class SymptomBox extends Component {
+  render() {
+    const hasData = this.props.data
+    const boxActive = hasData ? styles.symptomBoxActive : {}
+    const textActive = hasData ? styles.symptomTextActive : {}
+    const disabledStyle = this.props.disabled ? styles.symptomInFuture : {}
+
+    return (
+      <TouchableOpacity
+        onPress={this.props.onPress}
+        disabled={this.props.disabled}
+      >
+        <View style={[styles.symptomBox, boxActive, disabledStyle]}>
+          <DripIcon name={this.props.iconName} size={50} color={hasData ? 'white' : 'black'}/>
+          <AppText
+            style={[textActive, disabledStyle, {fontSize: 15}]}
+            numberOfLines={1}
+          >
+            {this.props.title.toLowerCase()}
+          </AppText>
+        </View>
+        <View style={[styles.symptomDataBox, disabledStyle]}>
+          <AppText
+            style={styles.symptomDataText}
+            numberOfLines={3}
+          >{this.props.data}</AppText>
+        </View>
+      </TouchableOpacity>
+    )
+  }
 }

-const mapDispatchToProps = (dispatch) => {
-  return({
-    setDate: (date) => dispatch(setDate(date)),
-    navigate: (page) => dispatch(navigate(page)),
-  })
+class FillerBoxes extends Component {
+  render() {
+    const n = Dimensions.get('window').width / styles.symptomBox.width
+    const fillerBoxes = []
+    for (let i = 0; i < Math.ceil(n); i++) {
+      fillerBoxes.push(
+        <View
+          width={styles.symptomBox.width}
+          height={0}
+          key={i.toString()}
+        />
+      )
+    }
+    return fillerBoxes
+  }
 }

-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(CycleDayOverView)
+function isNumber(val) {
+  return typeof val === 'number'
+}
@@ -1,38 +1,34 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { View, TouchableOpacity } from 'react-native'
-
+import React, { Component } from 'react'
+import {
+  View,
+  TouchableOpacity,
+} from 'react-native'
+import styles from '../../styles'
 import AppText from '../app-text'

-import styles from '../../styles'
-
-export default function SelectBoxGroup({ labels, onSelect, optionsState }) {
-  return (
-    <View style={styles.selectBoxSection}>
-      {Object.keys(labels).map(key => {
-        const style = [styles.selectBox]
-        const textStyle = []
-        if (optionsState[key]) {
-          style.push(styles.selectBoxActive)
-          textStyle.push(styles.selectBoxTextActive)
-        }
-        return (
-          <TouchableOpacity
-            onPress={() => onSelect(key)}
-            key={key}
-          >
-            <View style={style}>
-              <AppText style={textStyle}>{labels[key]}</AppText>
-            </View>
-          </TouchableOpacity>
-        )
-      })}
-    </View>
-  )
-}
-
-SelectBoxGroup.propTypes = {
-  labels: PropTypes.object.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  optionsState: PropTypes.object.isRequired
-}
+export default class SelectBoxGroup extends Component {
+  render() {
+    return (
+      <View style={styles.selectBoxSection}>
+        {Object.keys(this.props.labels).map(key => {
+          const style = [styles.selectBox]
+          const textStyle = []
+          if (this.props.optionsState[key]) {
+            style.push(styles.selectBoxActive)
+            textStyle.push(styles.selectBoxTextActive)
+          }
+          return (
+            <TouchableOpacity
+              onPress={() => this.props.onSelect(key)}
+              key={key}
+            >
+              <View style={style}>
+                <AppText style={textStyle}>{this.props.labels[key]}</AppText>
+              </View>
+            </TouchableOpacity>
+          )
+        })}
+      </View>
+    )
+  }
+}
@@ -1,50 +1,46 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { View, TouchableOpacity } from 'react-native'
-
+import React, { Component } from 'react'
+import {
+  View,
+  TouchableOpacity,
+} from 'react-native'
+import styles from '../../styles'
 import AppText from '../app-text'

-import styles from '../../styles'
-
-export default function SelectTabGroup({ active, buttons, onSelect }) {
-  return (
-    <View style={styles.selectTabGroup}>
-      {
-        buttons.map(({ label, value }, i) => {
-          let firstOrLastStyle
-          if (i === buttons.length - 1) {
-            firstOrLastStyle = styles.selectTabLast
-          } else if (i === 0) {
-            firstOrLastStyle = styles.selectTabFirst
-          }
-          let activeStyle
-          const isActive = value === active
-          if (isActive) activeStyle = styles.selectTabActive
-          return (
-            <TouchableOpacity
-              onPress={() => onSelect(isActive ? null : value)}
-              key={i}
-              activeOpacity={1}
-            >
-              <View>
-                <View style={[
-                  styles.selectTab,
-                  firstOrLastStyle,
-                  activeStyle
-                ]}>
-                  <AppText style={activeStyle}>{label}</AppText>
+export default class SelectTabGroup extends Component {
+  render() {
+    return (
+      <View style={styles.selectTabGroup}>
+        {
+          this.props.buttons.map(({ label, value }, i) => {
+            let firstOrLastStyle
+            if (i === this.props.buttons.length - 1) {
+              firstOrLastStyle = styles.selectTabLast
+            } else if (i === 0) {
+              firstOrLastStyle = styles.selectTabFirst
+            }
+            let activeStyle
+            const isActive = value === this.props.active
+            if (isActive) activeStyle = styles.selectTabActive
+            return (
+              <TouchableOpacity
+                onPress={() => isActive ? this.props.onSelect(null) : this.props.onSelect(value)}
+                key={i}
+                activeOpacity={1}
+              >
+                <View>
+                  <View style={[
+                    styles.selectTab,
+                    firstOrLastStyle,
+                    activeStyle
+                  ]}>
+                    <AppText style={activeStyle}>{label}</AppText>
+                  </View>
                </View>
-              </View>
-            </TouchableOpacity>
-          )
-        })
-      }
-    </View>
-  )
-}
-
-SelectTabGroup.propTypes = {
-  active: PropTypes.number,
-  buttons: PropTypes.array.isRequired,
-  onSelect: PropTypes.func.isRequired
+              </TouchableOpacity>
+            )
+          })
+        }
+      </View>
+    )
+  }
 }
@@ -1,68 +1,55 @@
-import React, { Component } from 'react'
-import { Switch } from 'react-native'
-import PropTypes from 'prop-types'
-
+import React from 'react'
+import {
+  Switch,
+  ScrollView
+} from 'react-native'
+import styles from '../../../styles'
 import { bleeding } from '../../../i18n/en/cycle-day'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'

-import { getLabelsList } from '../../helpers/labels'
-import { saveSymptom } from '../../../db'
-
-class Bleeding extends Component {
-
-  static propTypes = {
-    cycleDay: PropTypes.object,
-    date: PropTypes.string.isRequired,
-  }
-
+export default class Bleeding extends SymptomView {
  constructor(props) {
    super(props)
-    const symptom = 'bleeding'
-    const { cycleDay } = props
-
-    const defaultSymptomData = {
-      value: null,
-      exclude: false
+    const cycleDay = props.cycleDay
+    this.bleeding = cycleDay && cycleDay.bleeding
+    this.state = {
+      currentValue: this.bleeding && this.bleeding.value,
+      exclude: this.bleeding ? this.bleeding.exclude : false
    }
-
-    const symptomData =
-      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
-
-    this.state = { ...symptomData }
-
-    this.bleedingRadioProps = getLabelsList(bleeding.labels)
-
-    this.symptom = symptom
  }

+  symptomName = 'bleeding'
+
  autoSave = () => {
-    const { date } = this.props
-    const valuesToSave = { ...this.state }
-    const hasValueToSave = typeof this.state.value === 'number'
-    saveSymptom(this.symptom, date, hasValueToSave ? valuesToSave : null)
+    if (typeof this.state.currentValue != 'number') {
+      this.deleteSymptomEntry()
+      return
+    }
+    this.saveSymptomEntry({
+      value: this.state.currentValue,
+      exclude: this.state.exclude
+    })
  }

-  componentDidUpdate() {
-    this.autoSave()
-  }
-
-  render() {
+  renderContent() {
+    const bleedingRadioProps = [
+      { label: bleeding.labels[0], value: 0 },
+      { label: bleeding.labels[1], value: 1 },
+      { label: bleeding.labels[2], value: 2 },
+      { label: bleeding.labels[3], value: 3 },
+    ]
    return (
-      <SymptomView
-        symptom={this.symptom}
-        values={this.state}
-        date={this.props.date}
-      >
+      <ScrollView style={styles.page}>
        <SymptomSection
          header={bleeding.heaviness.header}
          explainer={bleeding.heaviness.explainer}
        >
          <SelectTabGroup
-            buttons={this.bleedingRadioProps}
-            active={this.state.value}
-            onSelect={val => this.setState({ value: val })}
+            buttons={bleedingRadioProps}
+            active={this.state.currentValue}
+            onSelect={val => this.setState({ currentValue: val })}
          />
        </SymptomSection>
        <SymptomSection
@@ -77,9 +64,7 @@ class Bleeding extends Component {
            value={this.state.exclude}
          />
        </SymptomSection>
-      </SymptomView>
+      </ScrollView>
    )
  }
-}
-
-export default Bleeding
+}
@@ -1,74 +1,64 @@
-import React, { Component } from 'react'
-import { Switch } from 'react-native'
-import PropTypes from 'prop-types'
-
+import React from 'react'
+import {
+  Switch,
+  ScrollView
+} from 'react-native'
+import styles from '../../../styles'
 import { cervix as labels } from '../../../i18n/en/cycle-day'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'

-import { getLabelsList } from '../../helpers/labels'
-import { saveSymptom } from '../../../db'
-
-class Cervix extends Component {
-
-  static propTypes = {
-    cycleDay: PropTypes.object,
-    date: PropTypes.string.isRequired,
-  }
-
+export default class Cervix extends SymptomView {
  constructor(props) {
    super(props)
-    const symptom = 'cervix'
-    const { cycleDay } = props
-
-    const defaultSymptomData = {}
-
-    const symptomData =
-      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
-
-    this.state = { ...symptomData }
-
-    this.cervixOpeningRadioProps = getLabelsList(labels.opening.categories)
-    this.cervixFirmnessRadioProps = getLabelsList(labels.firmness.categories)
-    this.cervixPositionRadioProps = getLabelsList(labels.position.categories)
-
-    this.symptom = symptom
+    const cycleDay = props.cycleDay
+    this.cervix = cycleDay && cycleDay.cervix
+    this.state = this.cervix ? this.cervix : {}
  }

+  symptomName = 'cervix'
+
  autoSave = () => {
-    const { date } = this.props
-    const { opening, firmness, position, exclude } = this.state
-    const valuesToSave = {
-      opening,
-      firmness,
-      position,
-      exclude: Boolean(exclude)
+    const nothingEntered = ['opening', 'firmness', 'position'].every(val => typeof this.state[val] != 'number')
+    if (nothingEntered) {
+      this.deleteSymptomEntry()
+      return
    }
-    const nothingEntered = ['opening', 'firmness', 'position'].every(
-      val => typeof this.state[val] !== 'number')
-    saveSymptom(this.symptom, date, nothingEntered ? null : valuesToSave)
+
+    this.saveSymptomEntry({
+      opening: this.state.opening,
+      firmness: this.state.firmness,
+      position: this.state.position,
+      exclude: Boolean(this.state.exclude)
+    })
  }

-  componentDidUpdate() {
-    this.autoSave()
-  }
-
-  render() {
+  renderContent() {
+    const cervixOpeningRadioProps = [
+      { label: labels.opening.categories[0], value: 0 },
+      { label: labels.opening.categories[1], value: 1 },
+      { label: labels.opening.categories[2], value: 2 }
+    ]
+    const cervixFirmnessRadioProps = [
+      { label: labels.firmness.categories[0], value: 0 },
+      { label: labels.firmness.categories[1], value: 1 }
+    ]
+    const cervixPositionRadioProps = [
+      { label: labels.position.categories[0], value: 0 },
+      { label: labels.position.categories[1], value: 1 },
+      { label: labels.position.categories[2], value: 2 }
+    ]
    // TODO saving this info for notice when leaving incomplete data
    // const mandatoryNotCompleted = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'
    return (
-      <SymptomView
-        symptom={this.symptom}
-        values={this.state}
-        date={this.props.date}
-      >
+      <ScrollView style={styles.page}>
        <SymptomSection
          header="Opening"
          explainer={labels.opening.explainer}
        >
          <SelectTabGroup
-            buttons={this.cervixOpeningRadioProps}
+            buttons={cervixOpeningRadioProps}
            active={this.state.opening}
            onSelect={val => this.setState({ opening: val })}
          />
@@ -78,7 +68,7 @@ class Cervix extends Component {
          explainer={labels.firmness.explainer}
        >
          <SelectTabGroup
-            buttons={this.cervixFirmnessRadioProps}
+            buttons={cervixFirmnessRadioProps}
            active={this.state.firmness}
            onSelect={val => this.setState({ firmness: val })}
          />
@@ -88,7 +78,7 @@ class Cervix extends Component {
          explainer={labels.position.explainer}
        >
          <SelectTabGroup
-            buttons={this.cervixPositionRadioProps}
+            buttons={cervixPositionRadioProps}
            active={this.state.position}
            onSelect={val => this.setState({ position: val })}
          />
@@ -105,9 +95,7 @@ class Cervix extends Component {
            value={this.state.exclude}
          />
        </SymptomSection>
-      </SymptomView>
+      </ScrollView>
    )
  }
 }
-
-export default Cervix
@@ -1,69 +1,51 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
+import React from 'react'
+import {
+  ScrollView
+} from 'react-native'
+import styles from '../../../styles'
 import { intensity, desire } from '../../../i18n/en/cycle-day'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'

-import { getLabelsList } from '../../helpers/labels'
-import { saveSymptom } from '../../../db'
-
-class Desire extends Component {
-
-  static propTypes = {
-    cycleDay: PropTypes.object,
-    date: PropTypes.string.isRequired,
-  }
-
+export default class Desire extends SymptomView {
  constructor(props) {
    super(props)
-    const symptom = 'desire'
-    const { cycleDay } = props
-
-    const defaultSymptomData = { value: null }
-
-    const symptomData =
-      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
-
-    this.state = { ...symptomData }
-
-    this.symptom = symptom
-
-    this.desireRadioProps = getLabelsList(intensity)
+    const cycleDay = props.cycleDay
+    this.desire = cycleDay && cycleDay.desire
+    const desireValue = this.desire && this.desire.value
+    this.state = { currentValue: desireValue }
  }

+  symptomName = 'desire'
+
  autoSave = () => {
-    const { date } = this.props
-    const valuesToSave = { ...this.state }
-    const hasValueToSave = typeof this.state.value === 'number'
-    saveSymptom(this.symptom, date, hasValueToSave ? valuesToSave : null)
+    if (typeof this.state.currentValue != 'number') {
+      this.deleteSymptomEntry()
+      return
+    }
+    this.saveSymptomEntry({ value: this.state.currentValue })
  }

-  componentDidUpdate() {
-    this.autoSave()
-  }
-
-  render() {
+  renderContent() {
+    const desireRadioProps = [
+      { label: intensity[0], value: 0 },
+      { label: intensity[1], value: 1 },
+      { label: intensity[2], value: 2 }
+    ]
    return (
-      <SymptomView
-        symptom={this.symptom}
-        values={this.state}
-        date={this.props.date}
-      >
+      <ScrollView style={styles.page}>
        <SymptomSection
          header={desire.header}
          explainer={desire.explainer}
        >
          <SelectTabGroup
-            buttons={this.desireRadioProps}
-            active={this.state.value}
-            onSelect={val => this.setState({ value: val })}
+            buttons={desireRadioProps}
+            active={this.state.currentValue}
+            onSelect={val => this.setState({ currentValue: val })}
          />
        </SymptomSection>
-      </SymptomView>
+      </ScrollView>
    )
  }
 }
-
-export default Desire
@@ -1,28 +1,22 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { ScrollView, View, TouchableOpacity } from 'react-native'
 import Icon from 'react-native-vector-icons/SimpleLineIcons'
 import AppText from '../../app-text'
 import labels from '../../../i18n/en/symptom-info.js'
 import styles, {iconStyles} from '../../../styles/index'

-export default function InfoSymptom({ close, symptom }) {
+export default function InfoSymptom(props) {
  return (
    <View style={styles.infoPopUpWrapper}>
      <View style={styles.dimmed}></View>
-      <View style={styles.infoPopUp} testID="symptomInfoPopup">
-        <TouchableOpacity onPress={close} style={styles.infoSymptomClose}>
+      <View style={styles.infoPopUp}>
+        <TouchableOpacity onPress={props.close} style={styles.infoSymptomClose}>
          <Icon name='close' {...iconStyles.infoPopUpClose}/>
        </TouchableOpacity>
        <ScrollView style={styles.infoSymptomText}>
-          <AppText>{labels[symptom].text}</AppText>
+          <AppText>{labels[props.symptom].text}</AppText>
        </ScrollView>
      </View>
    </View>
  )
 }
-
-InfoSymptom.propTypes = {
-  close: PropTypes.func.isRequired,
-  symptom: PropTypes.string.isRequired
-}
@@ -1,53 +1,40 @@
-import React, { Component } from 'react'
-import { TextInput } from 'react-native'
-import PropTypes from 'prop-types'
-
+import React from 'react'
+import {
+  ScrollView,
+  TextInput} from 'react-native'
 import { mood as labels } from '../../../i18n/en/cycle-day'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'
+import styles from '../../../styles'
 import SymptomView from './symptom-view'

-import { saveSymptom } from '../../../db'
-
-class Mood extends Component {
-
-  static propTypes = {
-    cycleDay: PropTypes.object,
-    date: PropTypes.string.isRequired,
-  }
-
+export default class Mood extends SymptomView {
  constructor(props) {
    super(props)
-    const symptom = 'mood'
-    const { cycleDay } = props
-
-    const defaultSymptomData = {}
-
-    const symptomData =
-      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
-
-    this.state = { ...symptomData }
-
-    // We make sure other is always true when there is a note,
-    // e.g. when import is messed up.
-    if (this.state.note) this.state.other = true
-
-    this.symptom = symptom
+    const cycleDay = props.cycleDay
+    if (cycleDay && cycleDay.mood) {
+      this.state = Object.assign({}, cycleDay.mood)
+    } else {
+      this.state = {}
+    }
+    if (this.state.note) {
+      this.state.other = true
+    }
  }

+  symptomName = "mood"
+
  autoSave = () => {
-    const { date } = this.props
-    const valuesToSave = Object.assign({}, this.state)
-    if (!valuesToSave.other) {
-      valuesToSave.note = null
-    }
    const nothingEntered = Object.values(this.state).every(val => !val)
-
-    saveSymptom(this.symptom, date, nothingEntered ? null : valuesToSave)
-  }
-
-  componentDidUpdate() {
-    this.autoSave()
+    if (nothingEntered) {
+      this.deleteSymptomEntry()
+      return
+    }
+    const copyOfState = Object.assign({}, this.state)
+    if (!copyOfState.other) {
+      copyOfState.note = null
+    }
+    this.saveSymptomEntry(copyOfState)
  }

  toggleState = (key) => {
@@ -58,13 +45,9 @@ class Mood extends Component {
    }
  }

-  render() {
+  renderContent() {
    return (
-      <SymptomView
-        symptom={this.symptom}
-        values={this.state}
-        date={this.props.date}
-      >
+      <ScrollView style={styles.page}>
        <SymptomSection
          explainer={labels.explainer}
        >
@@ -85,9 +68,7 @@ class Mood extends Component {
              />
          }
        </SymptomSection>
-      </SymptomView>
+      </ScrollView>
    )
  }
 }
-
-export default Mood
@@ -1,75 +1,64 @@
-import React, { Component } from 'react'
-import { Switch } from 'react-native'
-import PropTypes from 'prop-types'
-
+import React from 'react'
+import {
+  Switch,
+  ScrollView
+} from 'react-native'
+import styles from '../../../styles'
 import { mucus as labels } from '../../../i18n/en/cycle-day'
 import computeNfpValue from '../../../lib/nfp-mucus'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'

-import { getLabelsList } from '../../helpers/labels'
-import { saveSymptom } from '../../../db'
-
-class Mucus extends Component {
-
-  static propTypes = {
-    cycleDay: PropTypes.object,
-    date: PropTypes.string.isRequired,
-  }
-
+export default class Mucus extends SymptomView {
  constructor(props) {
    super(props)
-    const symptom = 'mucus'
-    const { cycleDay } = props
-
-    const defaultSymptomData = {}
-
-    const symptomData =
-      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
-
-    this.state = { ...symptomData }
-
-    this.mucusFeeling = getLabelsList(labels.feeling.categories)
-    this.mucusTexture = getLabelsList(labels.texture.categories)
-
-    this.symptom = symptom
+    const cycleDay = props.cycleDay
+    this.mucus = cycleDay && cycleDay.mucus
+    this.state = this.mucus ? this.mucus : {}
  }

-  shouldAutoSave = () => {
-    const { date } = this.props
-    const nothingEntered = ['feeling', 'texture'].every(
-      val => typeof this.state[val] !== 'number'
-    )
-    const { feeling, texture, exclude} = this.state
-    const valuesToSave = {
+  symptomName = 'mucus'
+
+  autoSave = () => {
+    const nothingEntered = ['feeling', 'texture'].every(val => typeof this.state[val] != 'number')
+    if (nothingEntered) {
+      this.deleteSymptomEntry()
+      return
+    }
+
+    const feeling = this.state.feeling
+    const texture = this.state.texture
+    this.saveSymptomEntry({
      feeling,
      texture,
      value: computeNfpValue(feeling, texture),
-      exclude: Boolean(exclude)
-    }
-    saveSymptom(this.symptom, date, nothingEntered ? null : valuesToSave)
+      exclude: Boolean(this.state.exclude)
+    })
  }

-  componentDidUpdate() {
-    this.shouldAutoSave()
-  }
-
-  render() {
+  renderContent() {
+    const mucusFeeling = [
+      { label: labels.feeling.categories[0], value: 0 },
+      { label: labels.feeling.categories[1], value: 1 },
+      { label: labels.feeling.categories[2], value: 2 },
+      { label: labels.feeling.categories[3], value: 3 }
+    ]
+    const mucusTexture = [
+      { label: labels.texture.categories[0], value: 0 },
+      { label: labels.texture.categories[1], value: 1 },
+      { label: labels.texture.categories[2], value: 2 }
+    ]
    // TODO leaving this info for notice when leaving incomplete data
    // const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'
    return (
-      <SymptomView
-        symptom={this.symptom}
-        values={this.state}
-        date={this.props.date}
-      >
+      <ScrollView style={styles.page}>
        <SymptomSection
          header='Feeling'
          explainer={labels.feeling.explainer}
        >
          <SelectTabGroup
-            buttons={this.mucusFeeling}
+            buttons={mucusFeeling}
            onSelect={val => this.setState({ feeling: val })}
            active={this.state.feeling}
          />
@@ -79,7 +68,7 @@ class Mucus extends Component {
          explainer={labels.texture.explainer}
        >
          <SelectTabGroup
-            buttons={this.mucusTexture}
+            buttons={mucusTexture}
            onSelect={val => this.setState({ texture: val })}
            active={this.state.texture}
          />
@@ -96,9 +85,7 @@ class Mucus extends Component {
            value={this.state.exclude}
          />
        </SymptomSection>
-      </SymptomView>
+      </ScrollView>
    )
  }
 }
-
-export default Mucus
@@ -1,65 +1,55 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { TextInput } from 'react-native'
+import React from 'react'
+import {
+  ScrollView,
+  TextInput,
+} from 'react-native'

+import styles from '../../../styles'
 import SymptomSection from './symptom-section'
 import { noteExplainer } from '../../../i18n/en/cycle-day'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
 import SymptomView from './symptom-view'

-import { saveSymptom } from '../../../db'
-
-class Note extends Component {
-  static propTypes = {
-    cycleDay: PropTypes.object,
-    date: PropTypes.string.isRequired
-  }
-
+export default class Note extends SymptomView {
  constructor(props) {
    super(props)
-    const symptom = 'note'
-    const { cycleDay } = props
+    const cycleDay = props.cycleDay
+    this.note = cycleDay && cycleDay.note

-    const defaultSymptomData = { value: '' }
-
-    const symptomData =
-      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
-
-    this.state = { ...symptomData }
-
-    this.symptom = symptom
+    this.state = {
+      currentValue: this.note && this.note.value || ''
+    }
  }

+  symptomName = 'note'
+
  autoSave = () => {
-    const { date } = this.props
-    const valuesToSave = { ...this.state }
-    saveSymptom(this.symptom, date, this.state.value ? valuesToSave : null)
+    if (!this.state.currentValue) {
+      this.deleteSymptomEntry()
+      return
+    }
+    this.saveSymptomEntry({
+      value: this.state.currentValue
+    })
  }

-  componentDidUpdate() {
-    this.autoSave()
-  }
-
-  render() {
+  renderContent() {
    return (
-      <SymptomView
-        symptom={this.symptom}
-        values={this.state}
-        date={this.props.date}
-      >
-        <SymptomSection explainer={noteExplainer} >
+      <ScrollView style={styles.page}>
+        <SymptomSection
+          explainer={noteExplainer}
+        >
          <TextInput
-            autoFocus={true}
+            autoFocus={!this.state.currentValue}
            multiline={true}
            placeholder={sharedLabels.enter}
-            onChangeText={(val) => { this.setState({ value: val })}}
-            value={this.state.value}
-            testID='noteInput'
+            onChangeText={(val) => {
+              this.setState({ currentValue: val })
+            }}
+            value={this.state.currentValue}
          />
        </SymptomSection>
-      </SymptomView>
+      </ScrollView>
    )
  }
 }
-
-export default Note
@@ -1,54 +1,43 @@
-import React, { Component } from 'react'
-import { TextInput } from 'react-native'
-import PropTypes from 'prop-types'
-
+import React from 'react'
+import {
+  ScrollView,
+  TextInput,
+} from 'react-native'
 import { pain as labels } from '../../../i18n/en/cycle-day'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'
+import styles from '../../../styles'
 import SymptomView from './symptom-view'

-import { saveSymptom } from '../../../db'
-
-class Pain extends Component {
-
-  static propTypes = {
-    cycleDay: PropTypes.object,
-    date: PropTypes.string.isRequired,
-  }
-
+export default class Pain extends SymptomView {
  constructor(props) {
    super(props)
-    const symptom = 'pain'
-    const { cycleDay } = props
-
-    const defaultSymptomData = {}
-
-    const symptomData =
-      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
-
-    this.state = { ...symptomData }
-
-    // We make sure other is always true when there is a note,
-    // e.g. when import is messed up.
-    if (this.state.note) this.state.other = true
-
-    this.symptom = symptom
+    const cycleDay = props.cycleDay
+    if (cycleDay && cycleDay.pain) {
+      this.state = Object.assign({}, cycleDay.pain)
+    } else {
+      this.state = {}
+    }
+    if (this.state.note) {
+      this.state.other = true
+    }
  }

+  symptomName = 'pain'
+
  autoSave = () => {
-    const { date } = this.props
-    const valuesToSave = Object.assign({}, this.state)
-    if (!valuesToSave.other) {
-      valuesToSave.note = null
-    }
    const nothingEntered = Object.values(this.state).every(val => !val)
+    if (nothingEntered) {
+      this.deleteSymptomEntry()
+      return
+    }

-    saveSymptom(this.symptom, date, nothingEntered ? null : valuesToSave)
-  }
-
-  componentDidUpdate() {
-    this.autoSave()
+    const copyOfState = Object.assign({}, this.state)
+    if (!copyOfState.other) {
+      copyOfState.note = null
+    }
+    this.saveSymptomEntry(copyOfState)
  }

  toggleState = (key) => {
@@ -59,13 +48,9 @@ class Pain extends Component {
    }
  }

-  render() {
+  renderContent() {
    return (
-      <SymptomView
-        symptom={this.symptom}
-        values={this.state}
-        date={this.props.date}
-      >
+      <ScrollView style={styles.page}>
        <SymptomSection
          explainer={labels.explainer}
        >
@@ -86,9 +71,6 @@ class Pain extends Component {
              />
          }
        </SymptomSection>
-      </SymptomView>
-    )
+      </ScrollView>)
  }
 }
-
-export default Pain
@@ -1,75 +1,56 @@
-import React, { Component } from 'react'
-import { TextInput } from 'react-native'
-import PropTypes from 'prop-types'
-
+import React from 'react'
+import {
+  TextInput,
+  ScrollView
+} from 'react-native'
+import styles from '../../../styles'
 import { sex as sexLabels, contraceptives as contraceptivesLabels } from '../../../i18n/en/cycle-day'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'

-import { saveSymptom } from '../../../db'
-
-class Sex extends Component {
-
-  static propTypes = {
-    cycleDay: PropTypes.object,
-    date: PropTypes.string.isRequired,
-  }
-
+export default class Sex extends SymptomView {
  constructor(props) {
    super(props)
-    const symptom = 'sex'
-    const { cycleDay } = props
-
-    const defaultSymptomData = {}
-
-    const symptomData =
-      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
-
-    this.state = { ...symptomData }
-
+    const cycleDay = props.cycleDay
+    if (cycleDay && cycleDay.sex) {
+      this.state = Object.assign({}, cycleDay.sex)
+    } else {
+      this.state = {}
+    }
    // We make sure other is always true when there is a note,
    // e.g. when import is messed up.
    if (this.state.note) this.state.other = true
-
-    this.symptom = symptom
  }

+  symptomName = "sex"
+
  autoSave = () => {
-    const { date } = this.props
-    const valuesToSave = Object.assign({}, this.state)
-    if (!valuesToSave.other) {
-      valuesToSave.note = null
-    }
    const nothingEntered = Object.values(this.state).every(val => !val)
+    if (nothingEntered) {
+      this.deleteSymptomEntry()
+      return
+    }

-    saveSymptom(this.symptom, date, nothingEntered ? null : valuesToSave)
-  }
-
-  componentDidUpdate() {
-    this.autoSave()
+    const copyOfState = Object.assign({}, this.state)
+    if (!copyOfState.other) {
+      copyOfState.note = null
+    }
+    this.saveSymptomEntry(copyOfState)
  }

  toggleState = (key) => {
    const curr = this.state[key]
    this.setState({[key]: !curr})
-    if (key === 'other'){
-      if (curr){
-        this.setState({note: ""})
-      } else {
-        this.setState({focusTextArea: true})
-      }
+    if (key === 'other' && !curr) {
+      this.setState({focusTextArea: true})
    }
  }

-  render() {
+  renderContent() {
    return (
-      <SymptomView
-        symptom={this.symptom}
-        values={this.state}
-        date={this.props.date}
-      >
+      <ScrollView style={styles.page}>
        <SymptomSection
          header={sexLabels.header}
          explainer={sexLabels.explainer}
@@ -102,9 +83,7 @@ class Sex extends Component {
              }}
            />
        }
-      </SymptomView>
+      </ScrollView>
    )
  }
 }
-
-export default Sex
@@ -1,41 +0,0 @@
-import React, { Component } from 'react'
-import { TouchableOpacity } from 'react-native'
-import PropTypes from 'prop-types'
-import Icon from 'react-native-vector-icons/Entypo'
-
-import InfoPopUp from './info-symptom'
-
-import styles, { iconStyles } from '../../../styles'
-
-export default class SymptomInfo extends Component {
-
-  static propTypes = {
-    symptom: PropTypes.string
-  }
-
-  constructor() {
-    super()
-    this.state = { showInfo: false }
-  }
-
-  showInfo = () => this.setState({ showInfo: true })
-
-  hideInfo = () => this.setState({ showInfo: false })
-
-  render() {
-    return (
-      <React.Fragment>
-        <TouchableOpacity
-          onPress={this.showInfo}
-          style={styles.infoButtonSymptomView}
-          testID="symptomInfoButton"
-        >
-          <Icon name="info-with-circle" style={iconStyles.info} />
-        </TouchableOpacity>
-        { this.state.showInfo &&
-            <InfoPopUp symptom={this.props.symptom} close={this.hideInfo} />
-        }
-      </React.Fragment>
-    )
-  }
-}
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { View } from 'react-native'
-import AppText from '../../app-text'
+import AppText, { SymptomSectionHeader } from '../../app-text'
 import styles from '../../../styles'

 export default class SymptomSection extends Component {
@@ -16,7 +16,7 @@ export default class SymptomSection extends Component {
    return (
      <View style={[placeHeadingInline, styles.symptomSection]}>
        { p.header &&
-          <AppText style={styles.symptomViewHeading}>{p.header}</AppText>
+          <SymptomSectionHeader flex={1}>{p.header}</SymptomSectionHeader>
        }
        <View
          flexDirection={p.inline ? 'row' : null}
@@ -1,117 +1,97 @@
 import React, { Component } from 'react'
-import { ScrollView, View, Alert } from 'react-native'
-import PropTypes from 'prop-types'
-
-import { connect } from 'react-redux'
-import { getDate } from '../../../slices/date'
-import { goBack } from '../../../slices/navigation'
-
+import {
+  View, Alert, TouchableOpacity
+} from 'react-native'
 import { saveSymptom } from '../../../db'
-import formatDate from '../../helpers/format-date'
-
-import Header from '../../header'
-import SymptomInfo from './symptom-info'
-
+import InfoPopUp from './info-symptom'
+import Header from '../../header/symptom-view'
 import { headerTitles } from '../../../i18n/en/labels'
 import { sharedDialogs } from '../../../i18n/en/cycle-day'
+import Icon from 'react-native-vector-icons/Entypo'
+import styles, { iconStyles } from '../../../styles'

-import styles from '../../../styles'
-
-const checkIfHasValues = data => {
-  const isMeaningfulValue = value => value || value === 0
-  return Object.values(data).some(isMeaningfulValue)
-}
-
-class SymptomView extends Component {
-
-  static propTypes = {
-    symptom: PropTypes.string.isRequired,
-    values: PropTypes.object,
-    date: PropTypes.string,
-    children: PropTypes.node,
-    goBack: PropTypes.func,
-  }
-
+export default class SymptomView extends Component {
  constructor(props) {
    super()
+    this.date = props.date
+    this.navigate = props.navigate
    this.state = {
-      shouldShowDelete: checkIfHasValues(props.values)
+      showInfo: false
    }
  }

  componentDidUpdate() {
-    const shouldShowDelete = checkIfHasValues(this.props.values)
-    if (shouldShowDelete !== this.state.shouldShowDelete) {
-      this.setState({ shouldShowDelete })
-    }
+    this.autoSave()
+  }
+
+  saveSymptomEntry(entry) {
+    saveSymptom(this.symptomName, this.date, entry)
  }

  deleteSymptomEntry() {
-    const { symptom, date } = this.props
-    saveSymptom(symptom, date, null)
+    saveSymptom(this.symptomName, this.date)
  }

-  onDeleteConfirmation = () => {
-    this.deleteSymptomEntry()
-    this.props.goBack()
-  }
-
-  showConfirmationAlert = () => {
-
-    const cancelButton = {
-      text: sharedDialogs.cancel,
-      style: 'cancel'
+  isDeleteIconActive() {
+    const symptomValueHasBeenFilledOut = key => {
+      // the state tracks whether the symptom info should be shown,
+      // we ignore that property
+      if (key === 'showInfo') return
+      // is there any meaningful value in the current state?
+      return this.state[key] || this.state[key] === 0
    }

-    const confirmationButton = {
-      text: sharedDialogs.reallyDeleteData,
-      onPress: this.onDeleteConfirmation
-    }
+    const symptomValues =  Object.keys(this.state)

-    return Alert.alert(
-      sharedDialogs.areYouSureTitle,
-      sharedDialogs.areYouSureToDelete,
-      [cancelButton, confirmationButton]
-    )
+    return symptomValues.some(symptomValueHasBeenFilledOut)
  }

  render() {
-    const { symptom, date, goBack } = this.props
-    const { shouldShowDelete } = this.state
-    const handleDelete = shouldShowDelete ? this.showConfirmationAlert : null
-
    return (
      <View style={{flex: 1}}>
        <Header
-          title={headerTitles[symptom]}
-          subtitle={formatDate(date)}
-          handleBack={goBack}
-          handleDelete={handleDelete}
+          title={headerTitles[this.symptomName].toLowerCase()}
+          date={this.date}
+          goBack={this.props.handleBackButtonPress}
+          deleteIconActive={this.isDeleteIconActive()}
+          deleteEntry={() => {
+            Alert.alert(
+              sharedDialogs.areYouSureTitle,
+              sharedDialogs.areYouSureToDelete,
+              [{
+                text: sharedDialogs.cancel,
+                style: 'cancel'
+              }, {
+                text: sharedDialogs.reallyDeleteData,
+                onPress: () => {
+                  this.deleteSymptomEntry()
+                  this.props.handleBackButtonPress()
+                }
+              }]
+            )
+          }}
        />
        <View flex={1}>
-          <ScrollView style={styles.page}>
-            {this.props.children}
-          </ScrollView>
-          <SymptomInfo symptom={symptom} />
+          { this.renderContent() }
+          <TouchableOpacity
+            onPress={() => {
+              this.setState({showInfo: true})
+            }}
+            style={styles.infoButtonSymptomView}
+          >
+            <Icon
+              name="info-with-circle"
+              style={iconStyles.info}
+            />
+          </TouchableOpacity>
+          { this.state.showInfo &&
+              <InfoPopUp
+                symptom={this.symptomName}
+                close={() => this.setState({showInfo: false})}
+              />
+          }
        </View>
      </View>
    )
  }
-}
-
-const mapStateToProps = (state) => {
-  return({
-    date: getDate(state),
-  })
-}
-
-const mapDispatchToProps = (dispatch) => {
-  return({
-    goBack: () => dispatch(goBack()),
-  })
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(SymptomView)
+}
@@ -1,108 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-import { View } from 'react-native'
-import AppText from '../../app-text'
-import AppTextInput from '../../app-text-input'
-
-import { temperature as labels } from '../../../i18n/en/cycle-day'
-
-import styles from '../../../styles'
-
-import { getPreviousTemperature } from '../../../db'
-import { scaleObservable } from '../../../local-storage'
-import config from '../../../config'
-
-export default class TemperatureInput extends Component {
-
-  static propTypes = {
-    temperature: PropTypes.string,
-    handleTemperatureChange: PropTypes.func,
-    date: PropTypes.string,
-  }
-
-  constructor(props) {
-    super(props)
-
-    let shouldShowSuggestion = false
-    let suggestedTemperature = null
-
-    if (!props.temperature) {
-      const prevTemp = getPreviousTemperature(props.date)
-      if (prevTemp) {
-        shouldShowSuggestion = true
-        suggestedTemperature = prevTemp.toString()
-      }
-    }
-
-    this.state = {
-      temperature: props.temperature,
-      shouldShowSuggestion,
-      suggestedTemperature
-    }
-  }
-
-  setTemperature = (temperature) => {
-    this.setState({
-      shouldShowSuggestion: false,
-      temperature
-    })
-    this.props.handleTemperatureChange(Number(temperature))
-  }
-
-  render () {
-    const {
-      shouldShowSuggestion,
-      suggestedTemperature,
-      temperature
-    } = this.state
-    const inputStyle = [
-      styles.temperatureTextInput,
-      shouldShowSuggestion ? styles.temperatureTextInputSuggestion : null
-    ]
-    return (
-      <React.Fragment>
-        <View style={styles.framedSegmentInlineChildren}>
-          <AppTextInput
-            style={inputStyle}
-            autoFocus={true}
-            value={shouldShowSuggestion ? suggestedTemperature : temperature}
-            onChangeText={this.setTemperature}
-            keyboardType='numeric'
-            maxLength={5}
-            testID='temperatureInput'
-          />
-          <AppText style={{ marginLeft: 5 }}>°C</AppText>
-        </View>
-        <OutOfRangeWarning temperature={this.props.temperature} />
-      </React.Fragment>
-    )
-  }
-}
-
-const OutOfRangeWarning = ({ temperature }) => {
-  if (temperature === '') {
-    return false
-  }
-
-  const value = Number(temperature)
-  const { min, max } = config.temperatureScale
-  const range = { min, max }
-  const scale = scaleObservable.value
-
-  let warningMsg
-
-  if (value < range.min || value > range.max) {
-    warningMsg = labels.outOfAbsoluteRangeWarning
-  } else if (value < scale.min || value > scale.max) {
-    warningMsg = labels.outOfRangeWarning
-  } else {
-    warningMsg = null
-  }
-
-  return <AppText style={styles.hint}>{warningMsg}</AppText>
-}
-
-OutOfRangeWarning.propTypes = {
-  temperature: PropTypes.string.isRequired
-}
@@ -1,49 +1,59 @@
-import React, { Component } from 'react'
-import { Switch } from 'react-native'
-import PropTypes from 'prop-types'
+import React from 'react'
+import {
+  View,
+  Switch,
+  Keyboard,
+  ScrollView
+} from 'react-native'
+import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
+import padWithZeros from '../../helpers/pad-time-with-zeros'

+import { getPreviousTemperature } from '../../../db'
+import styles from '../../../styles'
 import { LocalTime, ChronoUnit } from 'js-joda'
 import { temperature as labels } from '../../../i18n/en/cycle-day'
+import { scaleObservable } from '../../../local-storage'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
-
+import config from '../../../config'
 import AppTextInput from '../../app-text-input'
+import AppText from '../../app-text'
 import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'
-import TimeInput from './time-input'
-import TemperatureInput from './temperature-input'
-
-import { saveSymptom } from '../../../db'

 const minutes = ChronoUnit.MINUTES

-class Temperature extends Component {
-
-  static propTypes = {
-    cycleDay: PropTypes.object,
-    date: PropTypes.string.isRequired,
-  }
-
+export default class Temp extends SymptomView {
  constructor(props) {
    super(props)
-    const symptom = 'temperature'
-    const { cycleDay } = props
+    const cycleDay = props.cycleDay
+    this.temperature = cycleDay && cycleDay.temperature

-    const defaultSymptomData = {
-      time: LocalTime.now().truncatedTo(minutes).toString(),
-      temperature: null,
-      note: '',
-      exclude: false
+    const temp = this.temperature
+
+    this.state = {
+      exclude: temp ? temp.exclude : false,
+      time: temp ? temp.time : LocalTime.now().truncatedTo(minutes).toString(),
+      isTimePickerVisible: false,
+      note: temp ? temp.note : null
    }

-    const symptomData =
-      cycleDay && cycleDay[symptom] ? cycleDay[symptom] : defaultSymptomData
-
-    const { value, ...restSymptomData } = symptomData
-    this.state = { temperature: value, ...restSymptomData }
-
-    this.symptom = symptom
+    if (temp) {
+      this.state.temperature = temp.value.toString()
+      if (temp.value === Math.floor(temp.value)) {
+        this.state.temperature = `${this.state.temperature}.0`
+      }
+      this.state.outOfRangeWarning = makeOutOfRangeWarningMessage(this.state.temperature)
+    } else {
+      const prevTemp = getPreviousTemperature(props.date)
+      if (prevTemp) {
+        this.state.suggestedTemperature = prevTemp.toString()
+        this.state.isSuggestion = true
+      }
+    }
  }

+  symptomName = 'temperature'
+
  isDeleteIconActive() {
    return ['temperature', 'note', 'exclude'].some(key => {
    // the time is always and the suggested temp sometimes prefilled, so they're not relevant for setting
@@ -53,59 +63,88 @@ class Temperature extends Component {
  }

  autoSave = () => {
-    const { date } = this.props
-    const { temperature, exclude, time, note } = this.state
-
-    const valuesToSave = {
-      value: temperature,
-      exclude,
-      time,
-      note
+    if (typeof this.state.temperature != 'string' || this.state.temperature === '') {
+      this.deleteSymptomEntry()
+      return
    }

-    saveSymptom(this.symptom, date, temperature ? valuesToSave : null)
+    const dataToSave = {
+      value: Number(this.state.temperature),
+      exclude: this.state.exclude,
+      time: this.state.time,
+      note: this.state.note
+    }
+
+    this.saveSymptomEntry(dataToSave)
  }

-  setTime = (time) => {
-    this.setState({ time })
-  }

  setTemperature = (temperature) => {
-    this.setState({ temperature })
+    if (isNaN(Number(temperature))) return
+    this.setState({
+      temperature, isSuggestion: false,
+      outOfRangeWarning: makeOutOfRangeWarningMessage(temperature)
+    })
  }

  setNote = (note) => {
    this.setState({ note })
  }

-  componentDidUpdate() {
-    this.autoSave()
+  showTimePicker = () => {
+    Keyboard.dismiss()
+    this.setState({ isTimePickerVisible: true })
  }

-  render() {
-    const { temperature } = this.state
-
+  renderContent() {
+    const inputStyle = [styles.temperatureTextInput]
+    if (this.state.isSuggestion) {
+      inputStyle.push(styles.temperatureTextInputSuggestion)
+    }
    return (
-      <SymptomView
-        symptom={'temperature'}
-        values={this.state}
-        date={this.props.date}
-      >
+      <ScrollView style={styles.page}>
        <SymptomSection
          header={labels.temperature.header}
          explainer={labels.temperature.explainer}
        >
-          <TemperatureInput
-            temperature={temperature ? temperature.toFixed(2) : ''}
-            date={this.props.date}
-            handleTemperatureChange={this.setTemperature}
-          />
+          <View style={styles.framedSegmentInlineChildren}>
+            <AppTextInput
+              style={[inputStyle]}
+              autoFocus={true}
+              value={this.state.temperature || this.state.suggestedTemperature}
+              onChangeText={this.setTemperature}
+              keyboardType='numeric'
+              maxLength={5}
+            />
+            <AppText style={{ marginLeft: 5 }}>°C</AppText>
+          </View>
+          {this.state.outOfRangeWarning &&
+            <AppText style={styles.hint}>
+              {this.state.outOfRangeWarning}
+            </AppText>
+          }
        </SymptomSection>
-        <SymptomSection header={labels.time}>
-          <TimeInput
-            time={this.state.time}
-            handleTimeChange={this.setTime}
-          />
+        <SymptomSection
+          header={labels.time}
+        >
+          <View style={styles.framedSegmentInlineChildren}>
+            <AppTextInput
+              style={[styles.temperatureTextInput]}
+              onFocus={this.showTimePicker}
+              value={this.state.time}
+            />
+            <DateTimePicker
+              mode="time"
+              isVisible={this.state.isTimePickerVisible}
+              onConfirm={jsDate => {
+                this.setState({
+                  time: padWithZeros(jsDate),
+                  isTimePickerVisible: false
+                })
+              }}
+              onCancel={() => this.setState({ isTimePickerVisible: false })}
+            />
+          </View>
        </SymptomSection>
        <SymptomSection
          header={labels.note.header}
@@ -113,10 +152,10 @@ class Temperature extends Component {
        >
          <AppTextInput
            multiline={true}
+            autoFocus={this.state.focusTextArea}
            placeholder={sharedLabels.enter}
            value={this.state.note}
            onChangeText={this.setNote}
-            testID='noteInput'
          />
        </SymptomSection>
        <SymptomSection
@@ -131,9 +170,26 @@ class Temperature extends Component {
            value={this.state.exclude}
          />
        </SymptomSection>
-      </SymptomView>
+      </ScrollView>
    )
  }
 }

-export default Temperature
+function makeOutOfRangeWarningMessage(temperature) {
+  if (temperature === '') return
+  const value = Number(temperature)
+  const { min, max } = config.temperatureScale
+  const range = { min, max }
+  const scale = scaleObservable.value
+  let warningMsg
+
+  if (value < range.min || value > range.max) {
+    warningMsg = labels.outOfAbsoluteRangeWarning
+  } else if (value < scale.min || value > scale.max) {
+    warningMsg = labels.outOfRangeWarning
+  } else {
+    warningMsg = null
+  }
+
+  return warningMsg
+}
@@ -1,62 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { Keyboard } from 'react-native'
-
-import AppTextInput from '../../app-text-input'
-import styles from '../../../styles'
-
-import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
-import moment from 'moment'
-
-export default class TimeInput extends Component {
-
-  static propTypes = {
-    time: PropTypes.string,
-    handleTimeChange: PropTypes.func,
-  }
-
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      isTimePickerVisible: false,
-    }
-  }
-
-  showTimePicker = () => {
-    Keyboard.dismiss()
-    this.setState({ isTimePickerVisible: true })
-  }
-
-  hideTimePicker = () => {
-    this.setState({ isTimePickerVisible: false })
-  }
-
-  handleConfirm = (jsDate) => {
-    // DateTimePicker also when in mode="time" returns full date (with time)
-    const time = moment(jsDate).format('HH:mm')
-    this.props.handleTimeChange(time)
-    this.setState({
-      isTimePickerVisible: false
-    })
-  }
-
-  render () {
-    return (
-      <React.Fragment>
-        <AppTextInput
-          style={styles.temperatureTextInput}
-          onFocus={this.showTimePicker}
-          value={this.props.time}
-          testID='timeInput'
-        />
-        <DateTimePicker
-          mode="time"
-          isVisible={this.state.isTimePickerVisible}
-          onConfirm={this.handleConfirm}
-          onCancel={this.hideTimePicker}
-        />
-      </React.Fragment>
-    )
-  }
-}
@@ -5,24 +5,21 @@ import { View } from 'react-native'
 import AppText from './app-text'
 import styles from '../styles'

-const FramedSegment = ({ children, last, style, title }) => {
-  const viewStyle = [styles.framedSegment, style]
-  if (last) viewStyle.push(styles.framedSegmentLast)
+const FramedSegment = ({children, ...props}) => {
+  const style = [styles.framedSegment, props.style]
+  if (props.last) style.push(styles.framedSegmentLast)
  return (
-    <View style={[viewStyle]}>
-      {title && <AppText style={styles.framedSegmentTitle}>{title}</AppText>}
+    <View style={[style]}>
+      {
+        props.title
+        && <AppText style={styles.framedSegmentTitle}>{props.title}</AppText>
+      }
      {children}
    </View>
  )
 }

 FramedSegment.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ]),
-  last: PropTypes.bool,
-  style: PropTypes.object,
  title: PropTypes.string
 }

@@ -0,0 +1,24 @@
+import React from 'react'
+import {
+  Text,
+  View
+} from 'react-native'
+import styles from '../../styles'
+import NavigationArrow from './navigation-arrow'
+
+export default function BackButtonHeader(props) {
+  return (
+    <View style={[styles.header, styles.headerCycleDay, styles.headerSymptom]}>
+      <View
+        style={styles.accentCircle}
+        left={props.middle - styles.accentCircle.width / 2}
+      />
+      <NavigationArrow direction='left' {...props}/>
+      <View>
+        <Text style={styles.headerText}>
+          {props.title}
+        </Text>
+      </View>
+    </View>
+  )
+}
@@ -0,0 +1,28 @@
+import React from 'react'
+import {
+  View,
+  Text} from 'react-native'
+import styles from '../../styles'
+import NavigationArrow from './navigation-arrow'
+import formatDate from '../helpers/format-date'
+
+export default function CycleDayHeader({ date, ...props }) {
+  return (<View style={[styles.header, styles.headerCycleDay]}>
+    <View
+      style={styles.accentCircle}
+      left={props.middle - styles.accentCircle.width / 2}
+    />
+    <NavigationArrow direction='left' {...props}/>
+    <View>
+      <Text style={styles.dateHeader}>
+        {formatDate(date)}
+      </Text>
+      {props.cycleDayNumber &&
+        <Text style={styles.cycleDayNumber}>
+          {`Cycle day ${props.cycleDayNumber}`.toLowerCase()}
+        </Text>}
+    </View>
+    <NavigationArrow direction='right' {...props}/>
+  </View>
+  )
+}
@@ -0,0 +1,16 @@
+import React from 'react'
+import {
+  View,
+  Text} from 'react-native'
+import styles from '../../styles'
+
+export default function DefaultHeader(props) {
+  return (
+    <View style={styles.header}>
+      <View style={styles.accentCircle} />
+      <Text style={styles.headerText}>
+        {props.title}
+      </Text>
+    </View >
+  )
+}
@@ -1,27 +0,0 @@
-import React from 'react'
-import { TouchableOpacity } from 'react-native'
-import PropTypes from 'prop-types'
-
-import Icon from 'react-native-vector-icons/AntDesign'
-
-import styles, { iconStyles } from '../../styles'
-
-export default function DeleteIcon({ handleDelete }) {
-
-  return (
-    <TouchableOpacity
-      onPress={handleDelete}
-      style={styles.headerDeleteButton}
-      testID="deleteIcon"
-    >
-      <Icon
-        name="delete"
-        {...iconStyles.symptomHeaderIcons}
-      />
-    </TouchableOpacity>
-  )
-}
-
-DeleteIcon.propTypes = {
-  handleDelete: PropTypes.func,
-}
@@ -1,36 +1,19 @@
 import React from 'react'
-import { View } from 'react-native'
-import PropTypes from 'prop-types'
+import { Dimensions } from 'react-native'
+import CycleDayHeader from './cycle-day'
+import DefaultHeader from './default'
+import BackButtonHeader from './back-button'

-import Title from './title'
-import NavigationArrow from './navigation-arrow'
-import DeleteIcon from './delete-icon'
+export default function Header(p) {
+  const middle = Dimensions.get('window').width / 2
+  const props = Object.assign({}, p, {middle})

-import styles from '../../styles'
-
-export default function Header({
-  handleBack,
-  handleNext,
-  handleDelete,
-  title,
-  subtitle,
-}) {
-
-  return (
-    <View style={styles.header}>
-      <View style={styles.accentCircle} />
-      { handleBack && <NavigationArrow handleBack={handleBack} /> }
-      <Title title={title} subtitle={subtitle} />
-      { handleNext && <NavigationArrow handleNext={handleNext} /> }
-      { handleDelete && <DeleteIcon handleDelete={handleDelete} /> }
-    </View >
-  )
-}
-
-Header.propTypes = {
-  handleBack: PropTypes.func,
-  handleDelete: PropTypes.func,
-  handleNext: PropTypes.func,
-  subtitle: PropTypes.string,
-  title: PropTypes.string.isRequired
+  if (props.isCycleDayOverView) {
+    return (<CycleDayHeader {...props} />)
+  } else if (props.showBackButton) {
+    return (<BackButtonHeader {...props} />)
+  }
+  else {
+    return (<DefaultHeader {...props} />)
+  }
 }
@@ -1,30 +1,35 @@
 import React from 'react'
 import { TouchableOpacity } from 'react-native'
-import PropTypes from 'prop-types'
+import styles, { iconStyles } from '../../styles'
 import Icon from 'react-native-vector-icons/Entypo'

-import styles, { iconStyles } from '../../styles'
-
-export default function NavigationArrow({ handleBack, handleNext }) {
-  const navigationDirection = handleBack ? 'Left' : 'Right'
+export default function NavigationArrow(props) {
+  const iconName = {
+    left: 'chevron-thin-left',
+    right: 'chevron-thin-right'
+  }[props.direction]
+  const iconPosition = {
+    left: 'navigationArrowLeft',
+    right: 'navigationArrowRight'
+  }[props.direction]
+  let pressHandler
+  if (props.goBack) {
+    pressHandler = () => props.goBack()
+  } else {
+    pressHandler = () => {
+      const target = props.direction === 'left' ? 'before' : 'after'
+      props.goToCycleDay(target)
+    }
+  }
  return (
    <TouchableOpacity
-      style={[
-        styles.navigationArrow,
-        styles[`navigationArrow${navigationDirection}`]
-      ]}
-      onPress={ handleBack || handleNext }
-      testID={ handleBack ? 'backButton' : 'nextButton'}
+      style={[styles.navigationArrow, styles[iconPosition]]}
+      onPress={pressHandler}
    >
      <Icon
-        name={`chevron-thin-${navigationDirection.toLowerCase()}`}
+        name={iconName}
        {...iconStyles.navigationArrow}
      />
    </TouchableOpacity>
  )
-}
-
-NavigationArrow.propTypes = {
-  handleBack: PropTypes.func,
-  handleNext: PropTypes.func,
 }
@@ -0,0 +1,49 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Dimensions
+} from 'react-native'
+import styles, { iconStyles } from '../../styles'
+import Icon from 'react-native-vector-icons/AntDesign'
+import NavigationArrow from './navigation-arrow'
+import formatDate from '../helpers/format-date'
+
+export default function SymptomViewHeader(props) {
+  const middle = Dimensions.get('window').width / 2
+  return (
+    <View style={[styles.header, styles.headerCycleDay, styles.headerSymptom]}>
+      <View
+        style={styles.accentCircle}
+        left={middle - styles.accentCircle.width / 2}
+      />
+      <NavigationArrow
+        direction='left'
+        {...props}
+      />
+      <View>
+        <Text style={styles.dateHeader}>
+          {props.title}
+        </Text>
+        <Text style={styles.cycleDayNumber}>
+          {formatDate(props.date)}
+        </Text>
+      </View >
+      { props.deleteIconActive &&
+        <TouchableOpacity
+          onPress={props.deleteEntry}
+          style={[
+            styles.headerDeleteButton,
+          ]}
+        >
+          <Icon
+            name="delete"
+            {...iconStyles.symptomHeaderIcons}
+          />
+        </TouchableOpacity>
+      }
+
+    </View>
+  )
+}
@@ -1,36 +0,0 @@
-import React from 'react'
-import { View, Text} from 'react-native'
-import PropTypes from 'prop-types'
-
-import styles from '../../styles'
-
-export default function Title({ title, subtitle }) {
-
-  if (subtitle !== undefined) {
-    return (
-      <View>
-        <Text style={styles.dateHeader} testID='headerTitle'>
-          { // design wants everyhting lowercased, but we don't
-            // have CSS pseudo properties
-            title.toLowerCase()}
-        </Text>
-        { subtitle &&
-          <Text style={styles.cycleDayNumber} testID='headerSubtitle'>
-            {subtitle.toLowerCase()}
-          </Text>
-        }
-      </View>
-    )
-  }
-
-  return (
-    <Text testID='headerTitle' style={styles.headerText}>
-      {title.toLowerCase()}
-    </Text>
-  )
-}
-
-Title.propTypes = {
-  title: PropTypes.string,
-  subtitle: PropTypes.string,
-}
@@ -1,204 +0,0 @@
-import { LocalDate } from 'js-joda'
-
-import { scaleObservable, unitObservable } from '../../local-storage'
-import { getCycleDay, getAmountOfCycleDays } from '../../db'
-
-import config from '../../config'
-
-//YAxis helpers
-
-export function normalizeToScale(temp, columnHeight) {
-  const scale = scaleObservable.value
-  const valueRelativeToScale = (scale.max - temp) / (scale.max - scale.min)
-  return getAbsoluteValue(valueRelativeToScale, columnHeight)
-}
-
-function getAbsoluteValue(relative, columnHeight) {
-  // we add some height to have some breathing room
-  const verticalPadding = columnHeight * config.temperatureScale.verticalPadding
-  const scaleHeight = columnHeight - 2 * verticalPadding
-  return scaleHeight * relative + verticalPadding
-}
-
-export function getTickPositions(columnHeight) {
-  const units = unitObservable.value
-  const scaleMin = scaleObservable.value.min
-  const scaleMax = scaleObservable.value.max
-  const numberOfTicks = (scaleMax - scaleMin) * (1 / units) + 1
-  const tickDistance = 1 / (numberOfTicks - 1)
-  const tickPositions = []
-  for (let i = 0; i < numberOfTicks; i++) {
-    const position = getAbsoluteValue(tickDistance * i, columnHeight)
-    tickPositions.push(position)
-  }
-  return tickPositions
-}
-
-export function getTickList(columnHeight) {
-
-  const units = unitObservable.value
-  const scaleMax = scaleObservable.value.max
-
-  return getTickPositions(columnHeight).map((tickPosition, i) => {
-
-    const tick = scaleMax - i * units
-    let isBold, label, shouldShowLabel
-
-    if (Number.isInteger(tick)) {
-      isBold = true
-      label = tick.toString() + '.0'
-    } else {
-      isBold = false
-      label = tick.toString()
-    }
-
-    // when temp range <= 3, units === 0.1 we show temp values with step 0.2
-    // when temp range > 3, units === 0.5 we show temp values with step 0.5
-
-    if (units === 0.1) {
-      // show label with step 0.2
-      shouldShowLabel = !(tick * 10 % 2)
-    } else {
-      // show label with step 0.5
-      shouldShowLabel = !(tick * 10 % 5)
-    }
-
-    return {
-      position: tickPosition,
-      label,
-      isBold,
-      shouldShowLabel,
-    }
-  })
-}
-
-//DayColumn helpers
-
-export function isSymptomDataComplete(symptom, dateString) {
-  const cycleDayData = getCycleDay(dateString)
-  const symptomData = cycleDayData[symptom]
-
-  const dataCompletenessCheck = {
-    'cervix': () => {
-      const { opening, firmness } = symptomData
-      return (opening !== null) && (firmness !== null)
-    },
-    'mucus': () => {
-      const { feeling, texture } = symptomData
-      return (feeling !== null) && (texture !== null)
-    },
-    'default': () => {
-      return true
-    }
-  }
-  return (dataCompletenessCheck[symptom] || dataCompletenessCheck['default'])()
-}
-
-function getInfoForNeighborColumns(dateString, columnHeight) {
-  const ret = {
-    rightY: null,
-    rightTemperatureExclude: null,
-    leftY: null,
-    leftTemperatureExclude: null
-  }
-  const target = LocalDate.parse(dateString)
-  const dayBefore = target.minusDays(1).toString()
-  const dayAfter = target.plusDays(1).toString()
-  const cycleDayBefore = getCycleDay(dayBefore)
-  const cycleDayAfter = getCycleDay(dayAfter)
-
-  if (cycleDayAfter && cycleDayAfter.temperature) {
-    ret.rightY = normalizeToScale(cycleDayAfter.temperature.value, columnHeight)
-    ret.rightTemperatureExclude = cycleDayAfter.temperature.exclude
-  }
-  if (cycleDayBefore && cycleDayBefore.temperature) {
-    ret.leftY = normalizeToScale(cycleDayBefore.temperature.value, columnHeight)
-    ret.leftTemperatureExclude = cycleDayBefore.temperature.exclude
-  }
-
-  return ret
-}
-
-export function getTemperatureProps(symptomData, columnHeight, dateString) {
-  const extractedData = {}
-  const { value, exclude } = symptomData
-  const neighborTemperatureGraphPoints =
-    getInfoForNeighborColumns(dateString, columnHeight)
-
-  for (const key in neighborTemperatureGraphPoints) {
-    extractedData[key] = neighborTemperatureGraphPoints[key]
-  }
-  return Object.assign({
-    value,
-    y: normalizeToScale(value, columnHeight),
-    temperatureExclude: exclude,
-  }, extractedData)
-}
-
-export const symptomColorMethods = {
-  'mucus': (symptomData) => {
-    const { feeling, texture } = symptomData
-    const colorIndex = feeling + texture
-    return colorIndex
-  },
-  'cervix': (symptomData) => {
-    const { opening, firmness } = symptomData
-    const isDataComplete = opening !== null && firmness !== null
-    const isClosedAndHard =
-      isDataComplete &&
-      (opening === 0 && firmness === 0)
-    const colorIndex = isClosedAndHard ? 0 : 2
-    return colorIndex
-  },
-  'sex': (symptomData) => {
-    const { solo, partner } = symptomData
-    const colorIndex = (solo !== null && partner !== null) ?
-      (solo + 2 * partner - 1) : 0
-    return colorIndex
-  },
-  'bleeding': (symptomData) => {
-    const { value } = symptomData
-    const colorIndex = value
-    return colorIndex
-  },
-  'desire': (symptomData) => {
-    const { value } = symptomData
-    const colorIndex = value
-    return colorIndex
-  },
-  'default': () => { //pain, mood, note
-    return 0
-  }
-}
-
-// Chart helpers
-
-export function makeColumnInfo() {
-  let amountOfCycleDays = getAmountOfCycleDays()
-  // if there's not much data yet, we want to show at least 30 days on the chart
-  if (amountOfCycleDays < 30) {
-    amountOfCycleDays = 30
-  } else {
-    // we don't want the chart to end abruptly before the first data day
-    amountOfCycleDays += 5
-  }
-  const localDates = getTodayAndPreviousDays(amountOfCycleDays)
-  return localDates.map(localDate => localDate.toString())
-}
-
-function getTodayAndPreviousDays(n) {
-  const today = LocalDate.now()
-  const targetDate = today.minusDays(n)
-
-  function getDaysInRange(currDate, range) {
-    if (currDate.isBefore(targetDate)) {
-      return range
-    } else {
-      range.push(currDate)
-      const next = currDate.minusDays(1)
-      return getDaysInRange(next, range)
-    }
-  }
-
-  return getDaysInRange(today, [])
-}
@@ -4,9 +4,8 @@ import moment from 'moment'
 export default function (date) {
  const today = LocalDate.now()
  const dateToDisplay = LocalDate.parse(date)
-  return today.equals(dateToDisplay) ?
-    'today' :
-    moment(date).format('MMMM Do YYYY')
+  const formattedDate = today.equals(dateToDisplay) ? 'today' : moment(date).format('MMMM Do YYYY')
+  return formattedDate.toLowerCase()
 }

 export function formatDateForShortText (date) {
@@ -1,64 +0,0 @@
-import { ChronoUnit, LocalDate } from 'js-joda'
-
-import { formatDateForShortText } from './format-date'
-
-import {
-  home as labels,
-  bleedingPrediction as predictLabels,
-} from '../../i18n/en/labels'
-
-function getTimes(prediction) {
-  const todayDate = LocalDate.now()
-  const predictedBleedingStart = LocalDate.parse(prediction[0][0])
-  /* the range of predicted bleeding days can be either 3 or 5 */
-  const predictedBleedingEnd =
-    LocalDate.parse(prediction[0][ prediction[0].length - 1 ])
-  const daysToEnd = todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)
-  return { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd }
-}
-
-export function determinePredictionText(bleedingPrediction) {
-  if (!bleedingPrediction.length) return predictLabels.noPrediction
-  const {
-    todayDate,
-    predictedBleedingStart,
-    predictedBleedingEnd,
-    daysToEnd
-  } = getTimes(bleedingPrediction)
-  if (todayDate.isBefore(predictedBleedingStart)) {
-    return predictLabels.predictionInFuture(
-      todayDate.until(predictedBleedingStart, ChronoUnit.DAYS),
-      todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)
-    )
-  }
-  if (todayDate.isAfter(predictedBleedingEnd)) {
-    return predictLabels.predictionInPast(
-      formatDateForShortText(predictedBleedingStart),
-      formatDateForShortText(predictedBleedingEnd)
-    )
-  }
-  if (daysToEnd === 0) {
-    return predictLabels.predictionStartedNoDaysLeft
-  } else if (daysToEnd === 1) {
-    return predictLabels.predictionStarted1DayLeft
-  } else {
-    return predictLabels.predictionStartedXDaysLeft(daysToEnd)
-  }
-}
-
-export function getBleedingPredictionRange(prediction) {
-  if (!prediction.length) return labels.unknown
-  const {
-    todayDate,
-    predictedBleedingStart,
-    predictedBleedingEnd,
-    daysToEnd
-  } = getTimes(prediction)
-  if (todayDate.isBefore(predictedBleedingStart)) {
-    return `${todayDate.until(predictedBleedingStart, ChronoUnit.DAYS)}-${todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)}`
-  }
-  if (todayDate.isAfter(predictedBleedingEnd)) {
-    return labels.unknown
-  }
-  return (daysToEnd === 0 ? '0' : `0 - ${daysToEnd}`)
-}
@@ -1,2 +0,0 @@
-export const getLabelsList =
-  (categories) => categories.map((label, i) => ({ label, value: i }))
@@ -1,40 +0,0 @@
-import React from 'react'
-import { View } from 'react-native'
-import PropTypes from 'prop-types'
-
-import Button from './button'
-
-import styles from '../styles'
-
-const HomeElement = ({ children, onPress, buttonColor, buttonLabel }) => {
-  return (
-    <View
-      onPress={ onPress }
-      style={ styles.homeElement }
-    >
-      <View style={styles.homeIconAndText}>
-        {children[0]}
-        {children[1]}
-      </View>
-
-      <View style={{paddingLeft: 15}}>
-        {children.slice(2)}
-        <Button
-          style={styles.homeButton}
-          onPress={ onPress }
-          backgroundColor={ buttonColor }>
-          { buttonLabel }
-        </Button>
-      </View>
-    </View>
-  )
-}
-
-HomeElement.propTypes = {
-  buttonColor: PropTypes.string,
-  buttonLabel: PropTypes.string,
-  children: PropTypes.node,
-  onPress: PropTypes.func,
-}
-
-export default HomeElement
@@ -1,126 +1,136 @@
-import { LocalDate } from 'js-joda'
+import { ChronoUnit, LocalDate } from 'js-joda'
 import React, { Component } from 'react'
 import { ScrollView, View } from 'react-native'
-import { connect } from 'react-redux'
-import PropTypes from 'prop-types'
-
-import { navigate } from '../slices/navigation'
-import { getDate, setDate } from '../slices/date'

 import DripHomeIcon from '../assets/drip-home-icons'
-
-import AppText from './app-text'
-import IconText from './icon-text'
-import HomeElement from './home-element'
-
-import { home as labels } from '../i18n/en/labels'
+import { getCycleDay } from '../db'
+import {
+  bleedingPrediction as predictLabels,
+  home as labels
+} from '../i18n/en/labels'
 import links from '../i18n/en/links'
-
 import cycleModule from '../lib/cycle'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
-import {
-  determinePredictionText,
-  getBleedingPredictionRange
-} from './helpers/home'
-
 import styles, { cycleDayColor, periodColor, secondaryColor } from '../styles'
+import AppText from './app-text'
+import Button from './button'
+import { formatDateForShortText } from './helpers/format-date'

-class Home extends Component {
+const IconText = ({ children, wrapperStyles }) => {
+  return (
+    <View style={[styles.homeIconTextWrapper, wrapperStyles]}>
+      <AppText style={styles.iconText}>
+        { children }
+      </AppText>
+    </View>
+  )
+}

-  static propTypes = {
-    navigate: PropTypes.func,
-    setDate: PropTypes.func,
-    // The following are not being used,
-    // we could see if it's possible to not pass them from the <App />
-    cycleDay: PropTypes.object,
-    date: PropTypes.string,
-  }
+const HomeElement = ({ children, onPress, buttonColor, buttonLabel  }) => {
+  return (
+    <View
+      onPress={ onPress }
+      style={ styles.homeElement }
+    >
+      <View style={styles.homeIconAndText}>
+        {children[0]}
+        {children[1]}
+      </View>

+      <View style={{paddingLeft: 15}}>
+        {children.slice(2)}
+        <Button
+          style={styles.homeButton}
+          onPress={ onPress }
+          backgroundColor={ buttonColor }>
+          { buttonLabel }
+        </Button>
+      </View>
+    </View>
+  )
+}
+
+export default class Home extends Component {
  constructor(props) {
    super(props)
-
    const { getCycleDayNumber, getPredictedMenses } = cycleModule()
-
+    this.getCycleDayNumber = getCycleDayNumber
+    this.getBleedingPrediction = getPredictedMenses
    this.todayDateString = LocalDate.now().toString()
-    this.cycleDayNumber = getCycleDayNumber(this.todayDateString)
+    const prediction = this.getBleedingPrediction()
+    const fertilityStatus = getFertilityStatusForDay(this.todayDateString)

-    const prediction = getPredictedMenses()
-    this.predictionText = determinePredictionText(prediction)
-    this.bleedingPredictionRange = getBleedingPredictionRange(prediction)
-
-    this.fertilityStatus = getFertilityStatusForDay(this.todayDateString)
+    this.state = {
+      cycleDayNumber: this.getCycleDayNumber(this.todayDateString),
+      predictionText: determinePredictionText(prediction),
+      bleedingPredictionRange: getBleedingPredictionRange(prediction),
+      ...fertilityStatus
+    }
  }

-  navigateToCycleDayView = () => {
-    this.props.setDate(this.todayDateString)
-    this.props.navigate('CycleDay')
-  }
-
-  navigateToBleedingEditView = () => {
-    this.props.setDate(this.todayDateString)
-    this.props.navigate('BleedingEditView')
-  }
-
-  navigateToChart = () => {
-    this.props.navigate('Chart')
+  passTodayTo(componentName) {
+    const { navigate } = this.props
+    navigate(componentName, {
+      date: this.todayDateString,
+      cycleDay: getCycleDay(this.todayDateString)
+    })
  }

  render() {
-    const {
-      cycleDayNumber,
-      predictionText,
-      bleedingPredictionRange,
-    } = this
-
-    const { phase, status, statusText } = this.fertilityStatus
-
+    const { cycleDayNumber, phase, status } = this.state
+    const { navigate } = this.props
    const cycleDayMoreText = cycleDayNumber ?
      labels.cycleDayKnown(cycleDayNumber) :
      labels.cycleDayNotEnoughInfo

+    const { statusText } = this.state
+
    return (
      <View flex={1}>
        <ScrollView>
          <View style={styles.homeView}>
+
            <HomeElement
-              onPress={this.navigateToCycleDayView}
+              onPress={ () => this.passTodayTo('CycleDay') }
              buttonColor={ cycleDayColor }
              buttonLabel={ labels.editToday }
            >
              <View>
                <DripHomeIcon name="circle" size={80} color={cycleDayColor}/>
              </View>
-              <IconText>{cycleDayNumber || labels.unknown}</IconText>
+              <IconText wrapperStyles={styles.wrapperIcon}>
+                {cycleDayNumber || labels.unknown}
+              </IconText>

-              <AppText style={styles.homeDescriptionText}>
-                {cycleDayMoreText}
-              </AppText>
+              <AppText style={styles.homeDescriptionText}>{cycleDayMoreText}</AppText>
            </HomeElement>

            <HomeElement
-              onPress={this.navigateToBleedingEditView}
+              onPress={ () => this.passTodayTo('BleedingEditView') }
              buttonColor={ periodColor }
              buttonLabel={ labels.trackPeriod }
            >
              <DripHomeIcon name="drop" size={100} color={periodColor} />

-              <IconText wrapperStyles={{ top: '45%' }}>
-                {bleedingPredictionRange}
+              <IconText wrapperStyles={{top: '45%', ...styles.wrapperIcon}}>
+                {this.state.bleedingPredictionRange}
              </IconText>

              <AppText style={styles.homeDescriptionText}>
-                {predictionText}
+                {this.state.predictionText}
              </AppText>
            </HomeElement>

            <HomeElement
-              onPress={this.navigateToChart}
+              onPress={ () => navigate('Chart') }
              buttonColor={ secondaryColor }
              buttonLabel={ labels.checkFertility }
            >
              <View style={styles.homeCircle}/>

-              <IconText>{ phase ? phase.toString() : labels.unknown }</IconText>
+              <IconText wrapperStyles={styles.wrapperIcon}>
+                { phase ? phase.toString() : labels.unknown }
+              </IconText>

              { phase &&
                <AppText style={styles.homeDescriptionText}>
@@ -138,20 +148,47 @@ class Home extends Component {
  }
 }

-const mapStateToProps = (state) => {
-  return({
-    date: getDate(state),
-  })
+function getTimes(prediction) {
+  const todayDate = LocalDate.now()
+  const predictedBleedingStart = LocalDate.parse(prediction[0][0])
+  /* the range of predicted bleeding days can be either 3 or 5 */
+  const predictedBleedingEnd = LocalDate.parse(prediction[0][ prediction[0].length - 1 ])
+  const daysToEnd = todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)
+  return { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd }
 }

-const mapDispatchToProps = (dispatch) => {
-  return({
-    navigate: (page) => dispatch(navigate(page)),
-    setDate: (date) => dispatch(setDate(date)),
-  })
+function determinePredictionText(bleedingPrediction) {
+  if (!bleedingPrediction.length) return predictLabels.noPrediction
+  const { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd } = getTimes(bleedingPrediction)
+  if (todayDate.isBefore(predictedBleedingStart)) {
+    return predictLabels.predictionInFuture(
+      todayDate.until(predictedBleedingStart, ChronoUnit.DAYS),
+      todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)
+    )
+  }
+  if (todayDate.isAfter(predictedBleedingEnd)) {
+    return predictLabels.predictionInPast(
+      formatDateForShortText(predictedBleedingStart),
+      formatDateForShortText(predictedBleedingEnd)
+    )
+  }
+  if (daysToEnd === 0) {
+    return predictLabels.predictionStartedNoDaysLeft
+  } else if (daysToEnd === 1) {
+    return predictLabels.predictionStarted1DayLeft
+  } else {
+    return predictLabels.predictionStartedXDaysLeft(daysToEnd)
+  }
 }

-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(Home)
+function getBleedingPredictionRange(prediction) {
+  if (!prediction.length) return labels.unknown
+  const { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd } = getTimes(prediction)
+  if (todayDate.isBefore(predictedBleedingStart)) {
+    return `${todayDate.until(predictedBleedingStart, ChronoUnit.DAYS)}-${todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)}`
+  }
+  if (todayDate.isAfter(predictedBleedingEnd)) {
+    return labels.unknown
+  }
+  return (daysToEnd === 0 ? '0' : `0 - ${daysToEnd}`)
+}
@@ -1,24 +0,0 @@
-import React from 'react'
-import { View } from 'react-native'
-import PropTypes from 'prop-types'
-
-import AppText from './app-text'
-
-import styles from '../styles'
-
-const IconText = ({ children, wrapperStyles }) => {
-  return (
-    <View style={[ styles.homeIconTextWrapper, wrapperStyles ]}>
-      <AppText style={styles.iconText}>
-        { children }
-      </AppText>
-    </View>
-  )
-}
-
-IconText.propTypes = {
-  children: PropTypes.node,
-  wrapperStyles: PropTypes.object,
-}
-
-export default IconText
@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { ScrollView, View, BackHandler } from 'react-native'
 import AppText from './app-text'
 import { shared } from '../i18n/en/labels'
@@ -11,15 +10,14 @@ import { saveLicenseFlag } from '../local-storage'
 const labels = settingsLabels.license
 export default function License({setLicense}) {
  return (
-    <ScrollView testID='licensePage' style={styles.licensePage}>
+    <ScrollView style={styles.licensePage}>
      <AppText style={styles.framedSegmentTitle}>{labels.title}</AppText>
-      <AppText testID='test'>{labels.text}</AppText>
+      <AppText>{labels.text}</AppText>
      <View style={styles.licenseButtons}>
        <Button
          style={styles.licenseButton}
          backgroundColor={'grey'}
          onPress={() => BackHandler.exitApp()}
-          testID='licenseCancelButton'
        >
          {shared.cancel}
        </Button>
@@ -30,15 +28,10 @@ export default function License({setLicense}) {
            await saveLicenseFlag()
            setLicense()
          }}
-          testID='licenseOkButton'
        >
          {shared.ok}
        </Button>
      </View>
    </ScrollView>
  )
-}
-
-License.propTypes = {
-  setLicense: PropTypes.func.isRequired
-}
+}
@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import Hyperlink from 'react-native-hyperlink'
 import styles from '../styles'
 import links from '../i18n/en/links'
@@ -16,13 +15,6 @@ export default function Link(props) {
  )
 }

-Link.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ])
-}
-
 function replaceUrlWithText(url) {
  const link = Object.values(links).find(l => l.url === url)
  return (link && link.text) || url
@@ -0,0 +1,84 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  TouchableOpacity
+} from 'react-native'
+
+import settingsViews from './settings'
+
+import { menuTitles } from '../i18n/en/labels'
+
+import styles, { iconStyles, secondaryColor } from '../styles'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+
+const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => {
+  acc[curr] = menuTitles[curr].toLowerCase()
+  return acc
+}, {})
+
+const menuItems = [
+  {
+    labelKey: 'Home',
+    icon: 'home',
+    component: 'Home',
+  },
+  {
+    labelKey: 'Calendar',
+    icon: 'calendar-range',
+    component: 'Calendar',
+  },
+  {
+    labelKey: 'Chart',
+    icon: 'chart-line',
+    component: 'Chart',
+  },
+  {
+    labelKey: 'Stats',
+    icon: 'chart-pie',
+    component: 'Stats',
+  },
+  {
+    labelKey: 'Settings',
+    icon: 'settings',
+    component: 'SettingsMenu',
+    children: Object.keys(settingsViews),
+  }
+]
+
+const MenuItem = ({ icon, labelKey, active, onPress }) => {
+  const styleActive = active ? { color: secondaryColor } : null
+  return (
+    <TouchableOpacity
+      style={styles.menuItem}
+      onPress={onPress}
+    >
+      <Icon name={icon} {...iconStyles.menuIcon} {...styleActive} />
+      <Text style={[styles.menuText, styleActive]}>
+        {menuTitlesLowerCase[labelKey]}
+      </Text>
+    </TouchableOpacity>
+  )
+}
+
+const Menu = ({ currentPage, navigate }) => {
+  return (
+    <View style={styles.menu}>
+      { menuItems.map(({ icon, labelKey, component, children }) => {
+        const isActive = (component === currentPage) ||
+          (children && children.indexOf(currentPage) !== -1)
+        return (
+          <MenuItem
+            key={labelKey}
+            labelKey={labelKey}
+            icon={icon}
+            active={isActive}
+            onPress={() => navigate(component)}
+          />
+        )}
+      )}
+    </View >
+  )
+}
+
+export default Menu
@@ -1,55 +0,0 @@
-import React from 'react'
-import { View } from 'react-native'
-import PropTypes from 'prop-types'
-
-import MenuItem from './menu-item'
-
-import { connect } from 'react-redux'
-import { getNavigation, navigate } from '../../slices/navigation'
-
-import { pages } from '../pages'
-
-import styles from '../../styles'
-
-const Menu = ({ navigate, navigation }) => {
-  const menuItems = pages.filter(page => page.isInMenu)
-  return (
-    <View style={styles.menu}>
-      { menuItems.map(({ icon, label, component, children }) => {
-        const isActive = (component === navigation.currentPage) ||
-          (children && children.indexOf(navigation.currentPage) !== -1)
-        return (
-          <MenuItem
-            key={label}
-            label={label}
-            icon={icon}
-            active={isActive}
-            onPress={() => navigate(component)}
-          />
-        )}
-      )}
-    </View >
-  )
-}
-
-Menu.propTypes = {
-  navigation: PropTypes.object,
-  navigate: PropTypes.func,
-}
-
-const mapStateToProps = (state) => {
-  return({
-    navigation: getNavigation(state),
-  })
-}
-
-const mapDispatchToProps = (dispatch) => {
-  return({
-    navigate: (page) => dispatch(navigate(page)),
-  })
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(Menu)
@@ -1,36 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Text, TouchableOpacity } from 'react-native'
-
-import styles, { iconStyles, secondaryColor } from '../../styles'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-
-import { menuTitles } from '../../i18n/en/labels'
-
-const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => {
-  acc[curr] = menuTitles[curr].toLowerCase()
-  return acc
-}, {})
-
-export default function MenuItem({ active, icon, label, onPress }) {
-  const styleActive = active ? { color: secondaryColor } : null
-
-  return (
-    <TouchableOpacity style={styles.menuItem} onPress={onPress} >
-      <Icon name={icon} {...iconStyles.menuIcon} {...styleActive} />
-      <Text
-        testID={active ? 'activeMenuItem' : `menuItem${label}`}
-        style={[styles.menuText, styleActive]}
-      >
-        {menuTitlesLowerCase[label]}
-      </Text>
-    </TouchableOpacity>
-  )
-}
-
-MenuItem.propTypes = {
-  active: PropTypes.bool,
-  icon: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  onPress: PropTypes.func.isRequired
-}
@@ -1,89 +0,0 @@
-import symptomViews from './cycle-day/symptoms'
-import settingsViews from './settings'
-
-import settingsLabels from '../i18n/en/settings'
-const labels = settingsLabels.menuTitles
-
-const symptomsPages = Object.keys(symptomViews).map(symptomView => ({
-  component: symptomView,
-  parent: 'CycleDay',
-}))
-
-export const isSymptomView =
-  (page) => Object.keys(symptomViews).includes(page)
-
-export const isSettingsView =
-  (page) => Object.keys(settingsViews).includes(page)
-
-export const pages = [
-  {
-    component: 'Home',
-    icon: 'home',
-    isInMenu: true,
-    label: 'Home',
-  },
-  {
-    component: 'Calendar',
-    icon: 'calendar-range',
-    isInMenu: true,
-    label: 'Calendar',
-    parent: 'Home',
-  },
-  {
-    component: 'Chart',
-    icon: 'chart-line',
-    isInMenu: true,
-    label: 'Chart',
-    parent: 'Home',
-  },
-  {
-    component: 'Stats',
-    icon: 'chart-pie',
-    isInMenu: true,
-    label: 'Stats',
-    parent: 'Home',
-  },
-  {
-    children: Object.keys(settingsViews),
-    component: 'SettingsMenu',
-    icon: 'settings',
-    isInMenu: true,
-    label: 'Settings',
-    parent: 'Home',
-  },
-  {
-    component: 'Reminders',
-    label: labels.reminders,
-    parent: 'SettingsMenu',
-  },
-  {
-    component: 'NfpSettings',
-    label: labels.nfpSettings,
-    parent: 'SettingsMenu',
-  },
-  {
-    component: 'DataManagement',
-    label: labels.dataManagement,
-    parent: 'SettingsMenu',
-  },
-  {
-    component: 'Password',
-    label: labels.password,
-    parent: 'SettingsMenu',
-  },
-  {
-    component: 'About',
-    label: labels.about,
-    parent: 'SettingsMenu',
-  },
-  {
-    component: 'License',
-    label: labels.license,
-    parent: 'SettingsMenu',
-  },
-  {
-    component: 'CycleDay',
-    parent: 'Home',
-  },
-  ...symptomsPages
-]
@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import { View, TextInput, TouchableOpacity, Alert } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
 import { saveEncryptionFlag } from '../local-storage'
@@ -10,10 +9,6 @@ import { passwordPrompt as labels, shared, menuTitles } from '../i18n/en/labels'
 import { requestHash, deleteDbAndOpenNew, openDb } from '../db'

 export default class PasswordPrompt extends Component {
-  static propTypes = {
-    enableShowApp: PropTypes.func.isRequired
-  }
-
  constructor(props) {
    super(props)
    this.state = {
@@ -25,6 +20,19 @@ export default class PasswordPrompt extends Component {
      this.passHashToDb,
      this
    )
+
+    this.tryToOpenDb()
+  }
+
+  async tryToOpenDb() {
+    const connected = await openDb()
+    if (!connected) {
+      this.setState({ showPasswordPrompt: true })
+      await saveEncryptionFlag(true)
+      return
+    }
+    await saveEncryptionFlag(false)
+    this.props.showApp()
  }

  passHashToDb = async hash => {
@@ -40,7 +48,7 @@ export default class PasswordPrompt extends Component {
      )
      return
    }
-    this.props.enableShowApp()
+    this.props.showApp()
  }

  confirmDeletion = async () => {
@@ -64,7 +72,7 @@ export default class PasswordPrompt extends Component {
              onPress: async () => {
                await deleteDbAndOpenNew()
                await saveEncryptionFlag(false)
-                this.props.enableShowApp()
+                this.props.showApp()
              }
            }]
          )
@@ -81,32 +89,35 @@ export default class PasswordPrompt extends Component {
    return (
      <View flex={1}>
        <Header title={menuTitles.PasswordPrompt.toLowerCase()} />
-        <View style={styles.passwordPromptPage}>
-          <TextInput
-            onChangeText={val => this.setState({ password: val })}
-            style={styles.passwordPromptField}
-            secureTextEntry={true}
-            placeholder={labels.enterPassword}
-          />
-          <TouchableOpacity
-            style={styles.passwordPromptButton}
-            onPress={() => {
-              requestHash('check-pw', this.state.password)
-            }}
-            disabled={!this.state.password}
-          >
-            <AppText style={styles.passwordPromptButtonText}>
-              {labels.title}
-            </AppText>
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={this.confirmDeletion}
-          >
-            <AppText style={styles.passwordPromptForgotPasswordText}>
-              {labels.forgotPassword}
-            </AppText>
-          </TouchableOpacity>
-        </View>
+        {this.state.showPasswordPrompt &&
+          <View style={styles.passwordPromptPage}>
+
+            <TextInput
+              onChangeText={val => this.setState({ password: val })}
+              style={styles.passwordPromptField}
+              secureTextEntry={true}
+              placeholder={labels.enterPassword}
+            />
+            <TouchableOpacity
+              style={styles.passwordPromptButton}
+              onPress={() => {
+                requestHash('check-pw', this.state.password)
+              }}
+              disabled={!this.state.password}
+            >
+              <AppText style={styles.passwordPromptButtonText}>
+                {labels.title}
+              </AppText>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={this.confirmDeletion}
+            >
+              <AppText style={styles.passwordPromptForgotPasswordText}>
+                {labels.forgotPassword}
+              </AppText>
+            </TouchableOpacity>
+          </View>
+        }
      </View>
    )
  }
@@ -1,14 +1,10 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import { TouchableOpacity, ScrollView } from 'react-native'
-import { connect } from 'react-redux'
-
-import { navigate } from '../../slices/navigation'
-
+import {
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native'
 import styles from '../../styles/index'
-
 import settingsLabels from '../../i18n/en/settings'
-
 import AppText from '../app-text'

 const labels = settingsLabels.menuTitles
@@ -22,7 +18,7 @@ const menu = [
  {title: labels.license, component: 'License'}
 ]

-const SettingsMenu = ({ navigate }) => {
+export default function SettingsMenu(props) {
  return (
    <ScrollView>
      { menu.map(menuItem)}
@@ -34,25 +30,10 @@ const SettingsMenu = ({ navigate }) => {
      <TouchableOpacity
        style={styles.framedSegment}
        key={item.title}
-        onPress={() => navigate(item.component)}
+        onPress={() => props.navigate(item.component)}
      >
        <AppText>{item.title.toLowerCase()}</AppText>
      </TouchableOpacity>
    )
  }
-}
-
-SettingsMenu.propTypes = {
-  navigate: PropTypes.func.isRequired
-}
-
-const mapDispatchToProps = (dispatch) => {
-  return({
-    navigate: (page) => dispatch(navigate(page)),
-  })
-}
-
-export default connect(
-  null,
-  mapDispatchToProps
-)(SettingsMenu)
+}
@@ -28,11 +28,8 @@ const SettingsButton = ({ children, style, secondary, ...props }) => {
 }

 SettingsButton.propTypes = {
-  children: PropTypes.node,
-  disabled: PropTypes.bool,
  onPress: PropTypes.func.isRequired,
-  secondary: PropTypes.bool,
-  style: PropTypes.object
+  disabled: PropTypes.bool
 }

 export default SettingsButton
@@ -1,19 +0,0 @@
-import Home from './home'
-import Calendar from './calendar'
-import CycleDay from './cycle-day/cycle-day-overview'
-import symptomViews from './cycle-day/symptoms'
-import Chart from './chart/chart'
-import SettingsMenu from './settings/settings-menu'
-import settingsViews from './settings'
-import Stats from './stats'
-
-export const viewsList = {
-  Home,
-  Calendar,
-  CycleDay,
-  Chart,
-  SettingsMenu,
-  ...settingsViews,
-  Stats,
-  ...symptomViews
-}
@@ -1,9 +1,7 @@
 const config = {
  columnWidth: 25,
  xAxisHeightPercentage: 0.08,
-  xAxisHeightPercentageLarge: 0.12,
  symptomHeightPercentage: 0.05,
-  symptomHeightPercentageLarge: 0.1,
  temperatureScale: {
    defaultLow: 35,
    defaultHigh: 38,
@@ -11,17 +9,7 @@ const config = {
    max: 40,
    units: 0.1,
    verticalPadding: 0.03
-  },
-  symptoms: [
-    'bleeding',
-    'mucus',
-    'cervix',
-    'sex',
-    'desire',
-    'pain',
-    'mood',
-    'note'
-  ],
+  }
 }

 config.columnMiddle = config.columnWidth / 2
@@ -5,10 +5,9 @@ import fs from 'react-native-fs'
 import restart from 'react-native-restart'
 import schemas from './schemas'
 import cycleModule from '../lib/cycle'
-import maybeSetNewCycleStart from '../lib/set-new-cycle-start'

 let db
-let checkIsMensesStart
+let isMensesStart
 let getMensesDaysRightAfter

 export async function openDb (hash) {
@@ -51,15 +50,11 @@ export async function openDb (hash) {

  db = connection
  const cycle = cycleModule()
-  checkIsMensesStart = cycle.isMensesStart
+  isMensesStart = cycle.isMensesStart
  getMensesDaysRightAfter = cycle.getMensesDaysRightAfter
  return true
 }

-export function closeDb() {
-  db.close()
-}
-
 export function getBleedingDaysSortedByDate() {
  return db.objects('CycleDay').filtered('bleeding != null').sorted('date', true)
 }
@@ -78,21 +73,52 @@ export function saveSymptom(symptom, date, val) {
  if (!cycleDay) cycleDay = createCycleDay(date)

  db.write(() => {
-    if (symptom === 'bleeding') {
-      const mensesDaysAfter = getMensesDaysRightAfter(cycleDay)
-      maybeSetNewCycleStart({
-        val, cycleDay, mensesDaysAfter, checkIsMensesStart
-      })
+    if (bleedingValueDeleted(symptom, val)) {
+      cycleDay.bleeding = val
+      cycleDay.isCycleStart = false
+      maybeSetNewCycleStart(cycleDay, val)
+    } else if (bleedingValueAddedOrChanged(symptom, val)) {
+      cycleDay.bleeding = val
+      cycleDay.isCycleStart = isMensesStart(cycleDay)
+      maybeClearOldCycleStarts(cycleDay)
    } else {
      cycleDay[symptom] = val
    }
  })
+
+  function bleedingValueDeleted(symptom, val) {
+    return symptom === 'bleeding' && !val
+  }
+
+  function bleedingValueAddedOrChanged(symptom, val) {
+    return symptom === 'bleeding' && val
+  }
+
+  function maybeSetNewCycleStart(dayWithDeletedBleeding) {
+    // if a bleeding value is deleted, we need to check if
+    // there are any following bleeding days and if the
+    // next one of them is now a cycle start
+    const mensesDaysAfter = getMensesDaysRightAfter(dayWithDeletedBleeding)
+    if (!mensesDaysAfter.length) return
+    const nextOne = mensesDaysAfter[mensesDaysAfter.length - 1]
+    if (isMensesStart(nextOne)) {
+      nextOne.isCycleStart = true
+    }
+  }
+
+  function maybeClearOldCycleStarts(cycleDay) {
+    // if we have a new bleeding day, we need to clear the
+    // menses start marker from all following days of this
+    // menses that may have been marked as start before
+    const mensesDaysAfter = getMensesDaysRightAfter(cycleDay)
+    mensesDaysAfter.forEach(day => day.isCycleStart = false)
+  }
 }

 export function updateCycleStartsForAllCycleDays() {
  db.write(() => {
    getBleedingDaysSortedByDate().forEach(day => {
-      if (checkIsMensesStart(day)) {
+      if (isMensesStart(day)) {
        day.isCycleStart = true
      }
    })
@@ -1,8 +0,0 @@
-{
-  "globals": {
-    "expect": true,
-    "element": true,
-    "by": true,
-    "device": true,
-  }
-}
@@ -1,144 +0,0 @@
-const LocalTime = require("js-joda").LocalTime
-const ChronoUnit = require("js-joda").ChronoUnit
-
-const {
-  symptomValues,
-  reloadApp,
-  goToHomePage,
-  goBack,
-} = require('./helpers')
-
-const minutes = ChronoUnit.MINUTES
-let currentTime
-
-const symptoms = Object.keys(symptomValues).map( symptom => {
-  return symptom === 'mucus' ? 'cervical mucus' : symptom
-})
-
-const navigateToSymptomView = (symptom) => {
-  return element(by.text(symptom)).tap()
-}
-
-const navigateToCycleDayOverview = () => {
-  return element(by.text('add data for today')).tap()
-}
-
-const tapExclude = () => {
-  return element(by.type('android.widget.CompoundButton')).tap()
-}
-
-const enterSymptomData = async (symptom) => {
-  const { valuesToSelect, shouldExclude } = symptomValues[symptom]
-
-  for (const value of valuesToSelect) {
-    await element(by.text(value)).tap()
-  }
-
-  if (shouldExclude) {
-    await tapExclude()
-  }
-}
-
-const formExpectedSymptomSummary = (symptom) => {
-  const { valuesToSelect, shouldExclude } = symptomValues[symptom]
-  let expectedText, temperature
-
-  switch (symptom) {
-  case 'temperature':
-    temperature = valuesToSelect[0]
-    expectedText = `${temperature} °C - ${currentTime}`
-    break
-  case 'mucus':
-    expectedText = `feeling: ${valuesToSelect[0]}, texture: ${valuesToSelect[1]}\n => S`
-    break
-  case 'cervix':
-    expectedText = `opening: ${valuesToSelect[0]}, firmness: ${valuesToSelect[1]}, position: ${valuesToSelect[2]}`
-    break
-  case 'note':
-    expectedText = valuesToSelect[0]
-    break
-  default: expectedText = valuesToSelect.join(', ')
-  }
-
-  if (shouldExclude) {
-    expectedText = `(${expectedText})`
-  }
-
-  return expectedText
-}
-
-const enterNote = async() => {
-  const note = symptomValues['note'].valuesToSelect[0]
-  await element(by.id('noteInput')).replaceText(note)
-}
-
-const enterTemperature = async() => {
-  const temperature = symptomValues['temperature'].valuesToSelect[0]
-  currentTime = LocalTime.now().truncatedTo(minutes).toString()
-  const note = symptomValues['temperature'].valuesToSelect[1]
-
-  await element(by.id('temperatureInput')).typeText(temperature)
-  await element(by.id('timeInput')).tap()
-  await element(by.text('OK')).tap()
-  await element(by.id('noteInput')).replaceText(note)
-  await tapExclude()
-}
-
-describe('Symptom Data Input', () => {
-
-  before(async () => {
-    await reloadApp()
-    await goToHomePage()
-    await navigateToCycleDayOverview()
-  })
-
-  for (const symptom of symptoms) {
-    it(`Should test ${symptom} data input.`, async () => {
-
-      await navigateToSymptomView(symptom)
-
-      let expectedSymptomSummary
-      await expect(element(by.id('headerTitle').and(by.text(symptom))))
-        .toBeVisible()
-
-      switch (symptom) {
-      case 'temperature':
-        await enterTemperature()
-        expectedSymptomSummary = formExpectedSymptomSummary('temperature')
-        console.log(
-          'This test a bit flaky. console.log apparently helps to fix it.'
-        )
-
-        await goBack()
-        await expect(element(by.text(expectedSymptomSummary))).toExist()
-
-        // Testing here additionally the deletion of data
-        await navigateToSymptomView(symptom)
-        await element(by.id('deleteIcon')).tap()
-        await element(by.text('YES, I AM SURE')).tap()
-        await expect(element(by.text(expectedSymptomSummary))).toNotExist()
-
-        await navigateToSymptomView(symptom)
-        await enterTemperature()
-
-        break
-      case 'note':
-        await enterNote()
-        expectedSymptomSummary = formExpectedSymptomSummary('note')
-        break
-      case 'cervical mucus':
-        await enterSymptomData('mucus')
-        expectedSymptomSummary = formExpectedSymptomSummary('mucus')
-        break
-      default:
-        await enterSymptomData(symptom)
-        expectedSymptomSummary = formExpectedSymptomSummary(symptom)
-      }
-
-      await goBack()
-
-      await expect(element(by.text(expectedSymptomSummary))).toExist()
-    })
-  }
-
-})
@@ -1,29 +0,0 @@
-const LocalDate = require("js-joda").LocalDate
-const moment = require('moment')
-
-describe('Date', () => {
-  beforeEach(async () => {
-    await device.reloadReactNative()
-  })
-
-  it('should have same date when navigating between cycle day and symptom view', async () => {
-
-    await element(by.text('add data for today')).tap()
-    await expect(
-      element(by.id('headerTitle').and(by.text('today')))
-    ).toBeVisible()
-    await element(by.id('backButton')).tap()
-    await element(by.id('drip-icon-bleeding')).tap()
-
-    const today = LocalDate.now()
-    const yesterday = today.minusDays(1)
-    const yesterdayFormatted = moment(
-      yesterday.toString()).format('MMMM Do YYYY')
-      .toLowerCase()
-
-    await expect(
-      element(by.id('headerSubtitle').and(by.text(yesterdayFormatted)))
-    ).toBeVisible()
-  })
-
-})
@@ -1,62 +0,0 @@
-const symptomValues = {
-  bleeding: {
-    valuesToSelect: ['spotting'],
-    shouldExclude: true,
-  },
-  temperature: {
-    valuesToSelect: ['36.63', 'This is test text'],
-    shouldExclude: true,
-  },
-  mucus: {
-    valuesToSelect: ['dry', 'creamy'],
-    shouldExclude: true,
-  },
-  cervix: {
-    valuesToSelect: ['closed', 'hard', 'low'],
-    shouldExclude: true,
-  },
-  desire: {
-    valuesToSelect: ['low'],
-    shouldExclude: false,
-  },
-  sex: {
-    valuesToSelect: ['solo', 'condom'],
-    shouldExclude: false,
-  },
-  pain: {
-    valuesToSelect: ['cramps'],
-    shouldExclude: false,
-  },
-  mood: {
-    valuesToSelect: ['happy'],
-    shouldExclude: false,
-  },
-  note: {
-    valuesToSelect: ['This is test text'],
-    shouldExclude: false,
-  }
-}
-
-function goBack() {
-  return device.pressBack()
-}
-
-function reloadApp() {
-  return device.reloadReactNative()
-}
-
-function goToHomePage() {
-  try {
-    element(by.id('licenseOkButton')).tap()
-  } catch (error) {
-    goBack()
-    element(by.text('home')).tap()
-  }
-}
-
-module.exports = {
-  symptomValues,
-  reloadApp,
-  goToHomePage,
-  goBack,
-}
@@ -1,60 +0,0 @@
-const isOnPage = async (page, parentPage) => {
-  await expect(
-    element(by.id('headerTitle').and(by.text(page)))
-  ).toBeVisible()
-  await expect(
-    element(
-      by.id('activeMenuItem').and(by.text(parentPage ? parentPage : page))
-    )
-  ).toBeVisible()
-}
-
-describe('Home Navigation', () => {
-  before(async () => {
-    await device.launchApp({ newInstance: true })
-  })
-  beforeEach(async () => {
-    await device.reloadReactNative()
-  })
-
-  // TODO: clarify how to test that exiting from the app happened
-  // https://stackoverflow.com/questions/57133730/how-to-test-an-exit-app-scenario-using-detox
-  // it('should exit the app when license agreement declined', async () => {
-  //   await expect(element(by.id('licensePage'))).toBeVisible();
-  //   await element(by.id('licenseOkCance')).tap();
-  // });
-
-  // TODO: figure out how to clean the localStorage between the different specs are running
-  // for now disabling the License Agreement test.
-  // it('should navigate to home on accepting the license agreement', async () => {
-  //   await expect(element(by.id('licensePage'))).toBeVisible()
-  //   await element(by.id('licenseOkButton')).tap()
-  //   await isOnPage('home')
-  // })
-
-  it('should navigate to today bleeding symptom', async () => {
-    await element(by.text('track your period')).tap()
-    await expect(
-      element(by.id('headerTitle').and(by.text('bleeding')))
-    ).toBeVisible()
-    await expect(
-      element(by.id('headerSubtitle').and(by.text('today')))
-    ).toBeVisible()
-  })
-
-  it('should navigate to chart to check your fertility', async () => {
-    await element(by.text('check your fertility')).tap()
-    await isOnPage('chart')
-  })
-
-  it('should navigate to settings, its sub pages and back', async () => {
-    await element(by.id('menuItemSettings')).tap()
-    await isOnPage('settings')
-    await element(by.text('reminders')).tap()
-    await isOnPage('reminders', 'settings')
-    await element(by.id('backButton')).tap()
-    await element(by.text('nfp settings')).tap()
-    await isOnPage('nfp settings', 'settings')
-    await device.pressBack()
-  })
-})
@@ -1,19 +0,0 @@
-const detox = require('detox');
-const config = require('../package.json').detox;
-const adapter = require('detox/runners/mocha/adapter');
-
-before(async () => {
-  await detox.init(config);
-});
-
-beforeEach(async function () {
-  await adapter.beforeEach(this);
-});
-
-afterEach(async function () {
-  await adapter.afterEach(this);
-});
-
-after(async () => {
-  await detox.cleanup();
-});
@@ -1 +0,0 @@
--recursive --timeout 120000 --bail --file e2e/init.js
@@ -15,10 +15,7 @@ export const shared = {
  date: 'Date',
  cycleDayWithLinebreak: 'Cycle\nday',
  loading: 'Loading ...',
-  noDataWarning: 'You haven\'t entered any data yet.',
-  noTemperatureWarning: 'You haven\'t entered any temperature data yet.',
-  noDataButtonText: 'Start entering data now',
-  enter: 'Enter',
+  enter: 'Enter'
 }

 export const headerTitles = {
@@ -1,7 +1,5 @@
 import links from './links'

-const currentYear = new Date().getFullYear()
-
 export default {
  menuTitles: {
    reminders: 'Reminders',
@@ -106,7 +104,7 @@ export default {
  },
  license: {
    title: 'drip is an open-source cycle tracking app',
-    text: `Copyright (C) ${currentYear} Bloody Health GbR
+    text: `Copyright (C) 2019 Bloody Health GbR

 This 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: https://www.gnu.org/licenses/gpl-3.0.html

@@ -1,4 +1,4 @@
 import { AppRegistry } from 'react-native'
 import AppWrapper from './components/app-wrapper'

-AppRegistry.registerComponent('drip', () => AppWrapper)
+AppRegistry.registerComponent('home', () => AppWrapper)
@@ -42,16 +42,14 @@
 		2DF0FFEE2056DD460020B375 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3EA31DF850E9000B6D8A /* libReact.a */; };
 		3DF2498A20844F298CD84CC3 /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E954835D62BD45F0A5FFC523 /* SimpleLineIcons.ttf */; };
 		3F0F9C6368674C66AEAC3807 /* FontAwesome5_Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C783C08EEEB541D2A30FEE44 /* FontAwesome5_Regular.ttf */; };
+		42C7FA34220248E900F22656 /* libRCTPushNotification.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 42C7FA10220248C300F22656 /* libRCTPushNotification.a */; };
 		42DA1D39221B24CD00C56795 /* libART.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 42DA1D07221B24C500C56795 /* libART.a */; };
 		4E04B0A1FECA4915AD4A6CCF /* Feather.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F59A471BDE4144A1A41D4B52 /* Feather.ttf */; };
-		54E1D49723E75880003FA37B /* libRNCPushNotificationIOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 54E1D49623E75862003FA37B /* libRNCPushNotificationIOS.a */; };
-		54E1D49923E7588F003FA37B /* JavaScriptCore.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 54E1D49823E7588F003FA37B /* JavaScriptCore.framework */; };
 		5D921C348AC14944835A4D82 /* OpenSans-Light.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 673C016DDDD74C2F89050279 /* OpenSans-Light.ttf */; };
 		5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
 		62F2A4645AC84CDC9506FF27 /* libc++.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 9AEBF0735214455AAEDF56D5 /* libc++.tbd */; };
 		71D0BCE4666A4AB8A0874B5A /* OpenSans-SemiBold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 644690BCCEBF41789960B9A2 /* OpenSans-SemiBold.ttf */; };
 		72DA6B4241504DB096AFAD40 /* libRCTRestart.a in Frameworks */ = {isa = PBXBuildFile; fileRef = AB636AA0286D45CE9B23B2C3 /* libRCTRestart.a */; };
-		77500FAD5ADD402AAD2D9972 /* AntDesign.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3102FB76D69C42938E0E126D /* AntDesign.ttf */; };
 		7D48A7B9435741CCA9678C42 /* FontAwesome5_Solid.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 0BE71E2D5A634744A662DF44 /* FontAwesome5_Solid.ttf */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
 		87508EF4BE7548878981BE9E /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B41CDA1146DB4492B1796444 /* EvilIcons.ttf */; };
@@ -60,7 +58,6 @@
 		96687426D3D64D0F8E15FE4B /* MaterialCommunityIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5D8CEEF11CF346C7A641F4EC /* MaterialCommunityIcons.ttf */; };
 		A1410AC4C98A49B2820D9E45 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B6F5078F7DEC470782757471 /* Zocial.ttf */; };
 		A16B351C3F3644CF95F104D2 /* builtin_modules in Resources */ = {isa = PBXBuildFile; fileRef = 36F1B55D0DEE47AA9AF4BBDD /* builtin_modules */; };
-		AA800A96BB73482AA90E29B8 /* OpenSans-LightItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 885BDE0B3896402F99D0C860 /* OpenSans-LightItalic.ttf */; };
 		ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
 		AED64B7892744F21B3A156BB /* libRNVectorIcons.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F5039D0A572B4BBCB7995891 /* libRNVectorIcons.a */; };
 		AF2EAEC3772C41A49A4AF117 /* FontAwesome5_Brands.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 044ECCD7D9B8470782A453CA /* FontAwesome5_Brands.ttf */; };
@@ -74,9 +71,8 @@
 		E09F3B05A4F84E9883101CC7 /* libRNNodeJsMobile.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F992F2D99E614DD79FAD6565 /* libRNNodeJsMobile.a */; };
 		E43EF009AC8C4698AB322190 /* NodeMobile.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = C225FC4966694B9FBD32E946 /* NodeMobile.framework */; };
 		E4584E55EEC24302A3E84A23 /* nodejs-project in Resources */ = {isa = PBXBuildFile; fileRef = 6466AE2461BE4FA88B8372F0 /* nodejs-project */; };
-		D9D0CDA164E74C0EA3FC53EC /* libGCDWebServers.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 90224CB4571D41C4969E9722 /* libGCDWebServers.a */; };
-		FDC5A23FB0A04961ABE52950 /* libRealmJS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F710D85E391D4094816E1B62 /* libRealmJS.a */; };
-		BD7041F2826E4A2CBE6CB87D /* RealmJSTests.xctest in Resources */ = {isa = PBXBuildFile; fileRef = F79F72C5390646E0A06AAE68 /* RealmJSTests.xctest */; };
+		77500FAD5ADD402AAD2D9972 /* AntDesign.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3102FB76D69C42938E0E126D /* AntDesign.ttf */; };
+		AA800A96BB73482AA90E29B8 /* OpenSans-LightItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 885BDE0B3896402F99D0C860 /* OpenSans-LightItalic.ttf */; };
 /* End PBXBuildFile section */

 /* Begin PBXContainerItemProxy section */
@@ -213,6 +209,20 @@
 			remoteGlobalIDString = 3D383D621EBD27B9005632C8;
 			remoteInfo = "double-conversion-tvOS";
 		};
+		2DF0FFEA2056DD460020B375 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 9936F3131F5F2E4B0010BF04;
+			remoteInfo = privatedata;
+		};
+		2DF0FFEC2056DD460020B375 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 9936F32F1F5F2E5B0010BF04;
+			remoteInfo = "privatedata-tvOS";
+		};
 		3DAD3E831DF850E9000B6D8A /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;
@@ -290,6 +300,20 @@
 			remoteGlobalIDString = 3D3CD9321DE5FBEE00167DC4;
 			remoteInfo = "cxxreact-tvOS";
 		};
+		3DAD3EAC1DF850E9000B6D8A /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 3D3CD90B1DE5FBD600167DC4;
+			remoteInfo = jschelpers;
+		};
+		3DAD3EAE1DF850E9000B6D8A /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 3D3CD9181DE5FBD800167DC4;
+			remoteInfo = "jschelpers-tvOS";
+		};
 		42C7F9CA2202468600F22656 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 50DBC4BCDDF74A10AEDC99D5 /* RCTRestart.xcodeproj */;
@@ -346,6 +370,20 @@
 			remoteGlobalIDString = 5DBEB1501B18CEA900B34395;
 			remoteInfo = RNVectorIcons;
 		};
+		42C7FA0F220248C300F22656 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 42C7F9FE220248C300F22656 /* RCTPushNotification.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 134814201AA4EA6300B7C361;
+			remoteInfo = RCTPushNotification;
+		};
+		42C7FA11220248C300F22656 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 42C7F9FE220248C300F22656 /* RCTPushNotification.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 3D05745F1DE6004600184BB4;
+			remoteInfo = "RCTPushNotification-tvOS";
+		};
 		42DA1D06221B24C500C56795 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 42DA1D01221B24C500C56795 /* ART.xcodeproj */;
@@ -360,48 +398,6 @@
 			remoteGlobalIDString = 323A12871E5F266B004975B8;
 			remoteInfo = "ART-tvOS";
 		};
-		54E1D47923E75847003FA37B /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = EDEBC6D6214B3E7000DD5AC8;
-			remoteInfo = jsi;
-		};
-		54E1D47B23E75847003FA37B /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = EDEBC73B214B45A300DD5AC8;
-			remoteInfo = jsiexecutor;
-		};
-		54E1D47D23E75847003FA37B /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = ED296FB6214C9A0900B7C4FE;
-			remoteInfo = "jsi-tvOS";
-		};
-		54E1D47F23E75847003FA37B /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = ED296FEE214C9CF800B7C4FE;
-			remoteInfo = "jsiexecutor-tvOS";
-		};
-		54E1D48923E75847003FA37B /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = D1E5ACC4B66345868F556374 /* RNVectorIcons.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = A39873CE1EA65EE60051E01A;
-			remoteInfo = "RNVectorIcons-tvOS";
-		};
-		54E1D49523E75862003FA37B /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 54E1D49123E75862003FA37B /* PushNotificationIOS.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 9B97F66B220DEC6000B61540;
-			remoteInfo = RNCPushNotificationIOS;
-		};
 		5E9157321DD0AC6500FF2AA8 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */;
@@ -480,15 +476,13 @@
 		2D02E47B1E0B4A5D006451C7 /* drip-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "drip-tvOS.app"; sourceTree = BUILT_PRODUCTS_DIR; };
 		2D02E4901E0B4A5D006451C7 /* drip-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "drip-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
 		2D16E6891FA4F8E400B85C8A /* libReact.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; path = libReact.a; sourceTree = BUILT_PRODUCTS_DIR; };
-		3102FB76D69C42938E0E126D /* AntDesign.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = AntDesign.ttf; path = "../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = "<group>"; };
 		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>"; };
+		42C7F9FE220248C300F22656 /* RCTPushNotification.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTPushNotification.xcodeproj; path = "../node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj"; sourceTree = "<group>"; };
 		42DA1D01221B24C500C56795 /* ART.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = ART.xcodeproj; path = "../node_modules/react-native/Libraries/ART/ART.xcodeproj"; sourceTree = "<group>"; };
 		4902D5DCD46748BD8DC403FD /* Octicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Octicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; };
 		49089E09BFCF4F3DB209B6E9 /* RNFS.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNFS.xcodeproj; path = "../node_modules/react-native-fs/RNFS.xcodeproj"; sourceTree = "<group>"; };
 		4E6AB77B55F2491487B6124E /* RNShare.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNShare.xcodeproj; path = "../node_modules/react-native-share/ios/RNShare.xcodeproj"; sourceTree = "<group>"; };
 		50DBC4BCDDF74A10AEDC99D5 /* RCTRestart.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RCTRestart.xcodeproj; path = "../node_modules/react-native-restart/ios/RCTRestart.xcodeproj"; sourceTree = "<group>"; };
-		54E1D49123E75862003FA37B /* PushNotificationIOS.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = PushNotificationIOS.xcodeproj; path = "../node_modules/@react-native-community/push-notification-ios/ios/PushNotificationIOS.xcodeproj"; sourceTree = "<group>"; };
-		54E1D49823E7588F003FA37B /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		5D8CEEF11CF346C7A641F4EC /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = MaterialCommunityIcons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; };
 		5E7B0A75F8004C6699B70F86 /* Prompt-ExtraLight.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Prompt-ExtraLight.ttf"; path = "../assets/fonts/Prompt-ExtraLight.ttf"; sourceTree = "<group>"; };
 		5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
@@ -501,7 +495,6 @@
 		7F6C9FA9B66B453CA602B334 /* RealmReact.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RealmReact.xcodeproj; path = "../node_modules/realm/react-native/ios/RealmReact.xcodeproj"; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
 		84CCEBD3B2C44758853BC941 /* libRNFS.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNFS.a; sourceTree = "<group>"; };
-		885BDE0B3896402F99D0C860 /* OpenSans-LightItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "OpenSans-LightItalic.ttf"; path = "../assets/fonts/OpenSans-LightItalic.ttf"; sourceTree = "<group>"; };
 		887F1D52A4684A5280CB79AA /* drip-home-icons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "drip-home-icons.ttf"; path = "../assets/fonts/drip-home-icons.ttf"; sourceTree = "<group>"; };
 		8F2C7294680449AEA698AF76 /* Ionicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Ionicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; };
 		9AEBF0735214455AAEDF56D5 /* libc++.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = "libc++.tbd"; path = "usr/lib/libc++.tbd"; sourceTree = SDKROOT; };
@@ -523,10 +516,8 @@
 		F5039D0A572B4BBCB7995891 /* libRNVectorIcons.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNVectorIcons.a; sourceTree = "<group>"; };
 		F59A471BDE4144A1A41D4B52 /* Feather.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Feather.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; };
 		F992F2D99E614DD79FAD6565 /* libRNNodeJsMobile.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNNodeJsMobile.a; sourceTree = "<group>"; };
-		BB052EE60D044AD3A9D08692 /* RealmJS.xcodeproj */ = {isa = PBXFileReference; name = "RealmJS.xcodeproj"; path = "../node_modules/realm/src/RealmJS.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
-		90224CB4571D41C4969E9722 /* libGCDWebServers.a */ = {isa = PBXFileReference; name = "libGCDWebServers.a"; path = "libGCDWebServers.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
-		F710D85E391D4094816E1B62 /* libRealmJS.a */ = {isa = PBXFileReference; name = "libRealmJS.a"; path = "libRealmJS.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
-		F79F72C5390646E0A06AAE68 /* RealmJSTests.xctest */ = {isa = PBXFileReference; name = "RealmJSTests.xctest"; path = "RealmJSTests.xctest"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.cfbundle; explicitFileType = undefined; includeInIndex = 0; };
+		3102FB76D69C42938E0E126D /* AntDesign.ttf */ = {isa = PBXFileReference; name = "AntDesign.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		885BDE0B3896402F99D0C860 /* OpenSans-LightItalic.ttf */ = {isa = PBXFileReference; name = "OpenSans-LightItalic.ttf"; path = "../assets/fonts/OpenSans-LightItalic.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */

 /* Begin PBXFrameworksBuildPhase section */
@@ -542,9 +533,8 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				54E1D49923E7588F003FA37B /* JavaScriptCore.framework in Frameworks */,
-				54E1D49723E75880003FA37B /* libRNCPushNotificationIOS.a in Frameworks */,
 				42DA1D39221B24CD00C56795 /* libART.a in Frameworks */,
+				42C7FA34220248E900F22656 /* libRCTPushNotification.a in Frameworks */,
 				ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */,
 				5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */,
 				146834051AC3E58100842450 /* libReact.a in Frameworks */,
@@ -568,9 +558,6 @@
 				72DA6B4241504DB096AFAD40 /* libRCTRestart.a in Frameworks */,
 				E09F3B05A4F84E9883101CC7 /* libRNNodeJsMobile.a in Frameworks */,
 				E43EF009AC8C4698AB322190 /* NodeMobile.framework in Frameworks */,
-				D9D0CDA164E74C0EA3FC53EC /* libGCDWebServers.a in Frameworks */,
-				FDC5A23FB0A04961ABE52950 /* libRealmJS.a in Frameworks */,
-				BD7041F2826E4A2CBE6CB87D /* RealmJSTests.xctest in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -730,16 +717,16 @@
 				3DAD3EA71DF850E9000B6D8A /* libyoga.a */,
 				3DAD3EA91DF850E9000B6D8A /* libcxxreact.a */,
 				3DAD3EAB1DF850E9000B6D8A /* libcxxreact.a */,
+				3DAD3EAD1DF850E9000B6D8A /* libjschelpers.a */,
+				3DAD3EAF1DF850E9000B6D8A /* libjschelpers.a */,
 				2DF0FFDF2056DD460020B375 /* libjsinspector.a */,
 				2DF0FFE12056DD460020B375 /* libjsinspector-tvOS.a */,
 				2DF0FFE32056DD460020B375 /* libthird-party.a */,
 				2DF0FFE52056DD460020B375 /* libthird-party.a */,
 				2DF0FFE72056DD460020B375 /* libdouble-conversion.a */,
 				2DF0FFE92056DD460020B375 /* libdouble-conversion.a */,
-				54E1D47A23E75847003FA37B /* libjsi.a */,
-				54E1D47C23E75847003FA37B /* libjsiexecutor.a */,
-				54E1D47E23E75847003FA37B /* libjsi-tvOS.a */,
-				54E1D48023E75847003FA37B /* libjsiexecutor-tvOS.a */,
+				2DF0FFEB2056DD460020B375 /* libprivatedata.a */,
+				2DF0FFED2056DD460020B375 /* libprivatedata-tvOS.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -747,7 +734,6 @@
 		2D16E6871FA4F8E400B85C8A /* Frameworks */ = {
 			isa = PBXGroup;
 			children = (
-				54E1D49823E7588F003FA37B /* JavaScriptCore.framework */,
 				2D16E6891FA4F8E400B85C8A /* libReact.a */,
 				9AEBF0735214455AAEDF56D5 /* libc++.tbd */,
 				CD8C8B91E0A747B3883A0D56 /* libz.tbd */,
@@ -790,7 +776,6 @@
 			isa = PBXGroup;
 			children = (
 				42C7F9E02202468600F22656 /* libRNVectorIcons.a */,
-				54E1D48A23E75847003FA37B /* libRNVectorIcons-tvOS.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -828,6 +813,15 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		42C7F9FF220248C300F22656 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				42C7FA10220248C300F22656 /* libRCTPushNotification.a */,
+				42C7FA12220248C300F22656 /* libRCTPushNotification-tvOS.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		42DA1D02221B24C500C56795 /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -837,14 +831,6 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
-		54E1D49223E75862003FA37B /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				54E1D49623E75862003FA37B /* libRNCPushNotificationIOS.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
 		5E91572E1DD0AC6500FF2AA8 /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -866,7 +852,6 @@
 		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
-				54E1D49123E75862003FA37B /* PushNotificationIOS.xcodeproj */,
 				42DA1D01221B24C500C56795 /* ART.xcodeproj */,
 				5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */,
 				146833FF1AC3E56700842450 /* React.xcodeproj */,
@@ -886,8 +871,8 @@
 				1F05FE29622E4F21AF70C2B7 /* RNDocumentPicker.xcodeproj */,
 				49089E09BFCF4F3DB209B6E9 /* RNFS.xcodeproj */,
 				50DBC4BCDDF74A10AEDC99D5 /* RCTRestart.xcodeproj */,
+				42C7F9FE220248C300F22656 /* RCTPushNotification.xcodeproj */,
 				65F706FAFA1444AE9937D472 /* RNNodeJsMobile.xcodeproj */,
-				BB052EE60D044AD3A9D08692 /* RealmJS.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -969,9 +954,9 @@
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				2B572382D4504B8FB4B9D251 /* Embed Frameworks */,
-				DE9DD9049EBE47E5A1EA3F5D /* Build NodeJS Mobile Native Modules */,
-				6C10CEE2CE544C7F9400F1B4 /* Sign NodeJS Mobile Native Modules */,
-				B93B657279074F0DB95BCDE2 /* Remove NodeJS Mobile Framework Simulator Strips */,
+				D6AE48E8124449EE863F342D /* Build NodeJS Mobile Native Modules */,
+				7D43D3729FAE42C0859CDC36 /* Sign NodeJS Mobile Native Modules */,
+				54483AF1DA474A71931D6D6A /* Remove NodeJS Mobile Framework Simulator Strips */,
 			);
 			buildRules = (
 			);
@@ -1058,10 +1043,6 @@
 					ProductGroup = 42DA1D02221B24C500C56795 /* Products */;
 					ProjectRef = 42DA1D01221B24C500C56795 /* ART.xcodeproj */;
 				},
-				{
-					ProductGroup = 54E1D49223E75862003FA37B /* Products */;
-					ProjectRef = 54E1D49123E75862003FA37B /* PushNotificationIOS.xcodeproj */;
-				},
 				{
 					ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */;
 					ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */;
@@ -1090,6 +1071,10 @@
 					ProductGroup = 00C302D41ABCB9D200DB3ED1 /* Products */;
 					ProjectRef = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */;
 				},
+				{
+					ProductGroup = 42C7F9FF220248C300F22656 /* Products */;
+					ProjectRef = 42C7F9FE220248C300F22656 /* RCTPushNotification.xcodeproj */;
+				},
 				{
 					ProductGroup = 42C7F9C72202468600F22656 /* Products */;
 					ProjectRef = 50DBC4BCDDF74A10AEDC99D5 /* RCTRestart.xcodeproj */;
@@ -1269,6 +1254,20 @@
 			remoteRef = 2DF0FFE82056DD460020B375 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		2DF0FFEB2056DD460020B375 /* libprivatedata.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libprivatedata.a;
+			remoteRef = 2DF0FFEA2056DD460020B375 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		2DF0FFED2056DD460020B375 /* libprivatedata-tvOS.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = "libprivatedata-tvOS.a";
+			remoteRef = 2DF0FFEC2056DD460020B375 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		3DAD3E841DF850E9000B6D8A /* libRCTImage-tvOS.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -1346,6 +1345,20 @@
 			remoteRef = 3DAD3EAA1DF850E9000B6D8A /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		3DAD3EAD1DF850E9000B6D8A /* libjschelpers.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libjschelpers.a;
+			remoteRef = 3DAD3EAC1DF850E9000B6D8A /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		3DAD3EAF1DF850E9000B6D8A /* libjschelpers.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libjschelpers.a;
+			remoteRef = 3DAD3EAE1DF850E9000B6D8A /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		42C7F9CB2202468600F22656 /* libRCTRestart.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -1402,6 +1415,20 @@
 			remoteRef = 42C7F9DF2202468600F22656 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		42C7FA10220248C300F22656 /* libRCTPushNotification.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTPushNotification.a;
+			remoteRef = 42C7FA0F220248C300F22656 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		42C7FA12220248C300F22656 /* libRCTPushNotification-tvOS.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = "libRCTPushNotification-tvOS.a";
+			remoteRef = 42C7FA11220248C300F22656 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		42DA1D07221B24C500C56795 /* libART.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -1416,48 +1443,6 @@
 			remoteRef = 42DA1D08221B24C500C56795 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
-		54E1D47A23E75847003FA37B /* libjsi.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libjsi.a;
-			remoteRef = 54E1D47923E75847003FA37B /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		54E1D47C23E75847003FA37B /* libjsiexecutor.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libjsiexecutor.a;
-			remoteRef = 54E1D47B23E75847003FA37B /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		54E1D47E23E75847003FA37B /* libjsi-tvOS.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = "libjsi-tvOS.a";
-			remoteRef = 54E1D47D23E75847003FA37B /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		54E1D48023E75847003FA37B /* libjsiexecutor-tvOS.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = "libjsiexecutor-tvOS.a";
-			remoteRef = 54E1D47F23E75847003FA37B /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		54E1D48A23E75847003FA37B /* libRNVectorIcons-tvOS.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = "libRNVectorIcons-tvOS.a";
-			remoteRef = 54E1D48923E75847003FA37B /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		54E1D49623E75862003FA37B /* libRNCPushNotificationIOS.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRNCPushNotificationIOS.a;
-			remoteRef = 54E1D49523E75862003FA37B /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
 		5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -1581,47 +1566,159 @@
 			shellPath = /bin/sh;
 			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
-		6C10CEE2CE544C7F9400F1B4 /* Sign NodeJS Mobile Native Modules */ = {
+		D6AE48E8124449EE863F342D /* Build 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";
-		};
-		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";
-		};
-		DE9DD9049EBE47E5A1EA3F5D /* Build NodeJS Mobile Native Modules */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-			);
 			name = "Build NodeJS Mobile Native Modules";
+			inputPaths = (
+			);
 			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";
+			shellScript = "
+set -e
+if [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then
+# If build native modules preference is not set, look for it in the project's
+#nodejs-assets/BUILD_NATIVE_MODULES.txt file.
+NODEJS_ASSETS_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../nodejs-assets/ && pwd )\"
+PREFERENCE_FILE_PATH=\"$NODEJS_ASSETS_DIR/BUILD_NATIVE_MODULES.txt\"
+  if [ -f \"$PREFERENCE_FILE_PATH\" ]; then
+    NODEJS_MOBILE_BUILD_NATIVE_MODULES=\"$(cat $PREFERENCE_FILE_PATH | xargs)\"
+  fi
+fi
+if [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then
+# If build native modules preference is not set, try to find .gyp files
+#to turn it on.
+  gypfiles=($(find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -type f -name \"*.gyp\"))
+  if [ ${#gypfiles[@]} -gt 0 ]; then
+    NODEJS_MOBILE_BUILD_NATIVE_MODULES=1
+  else
+    NODEJS_MOBILE_BUILD_NATIVE_MODULES=0
+  fi
+fi
+if [ \"1\" != \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then exit 0; fi
+# Delete object files that may already come from within the npm package.
+find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.o\" -type f -delete
+find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.a\" -type f -delete
+find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.node\" -type f -delete
+# Delete bundle contents that may be there from previous builds.
+find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.node/*\" -delete
+find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.node\" -type d -delete
+find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.framework/*\" -delete
+find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d -delete
+# Apply patches to the modules package.json
+if [ -d \"$CODESIGNING_FOLDER_PATH\"/nodejs-project/node_modules/ ]; then
+  PATCH_SCRIPT_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/scripts/ && pwd )\"
+  NODEJS_PROJECT_MODULES_DIR=\"$( cd \"$CODESIGNING_FOLDER_PATH\" && cd nodejs-project/node_modules/ && pwd )\"
+  node \"$PATCH_SCRIPT_DIR\"/patch-package.js $NODEJS_PROJECT_MODULES_DIR
+fi
+# Get the nodejs-mobile-gyp location
+if [ -d \"$PROJECT_DIR/../node_modules/nodejs-mobile-gyp/\" ]; then
+  NODEJS_MOBILE_GYP_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-gyp/ && pwd )\"
+else
+  NODEJS_MOBILE_GYP_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/node_modules/nodejs-mobile-gyp/ && pwd )\"
+fi
+NODEJS_MOBILE_GYP_BIN_FILE=\"$NODEJS_MOBILE_GYP_DIR\"/bin/node-gyp.js
+# Rebuild modules with right environment
+NODEJS_HEADERS_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/ios/libnode/ && pwd )\"
+pushd $CODESIGNING_FOLDER_PATH/nodejs-project/
+if [ \"$PLATFORM_NAME\" == \"iphoneos\" ]
+then
+  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
+else
+  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
+fi
+popd
+";
+		};
+		7D43D3729FAE42C0859CDC36 /* Sign NodeJS Mobile Native Modules */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			name = "Sign NodeJS Mobile Native Modules";
+			inputPaths = (
+			);
+			outputPaths = (
+			);
+			shellPath = /bin/sh;
+			shellScript = "
+set -e
+if [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then
+# If build native modules preference is not set, look for it in the project's
+#nodejs-assets/BUILD_NATIVE_MODULES.txt file.
+NODEJS_ASSETS_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../nodejs-assets/ && pwd )\"
+PREFERENCE_FILE_PATH=\"$NODEJS_ASSETS_DIR/BUILD_NATIVE_MODULES.txt\"
+  if [ -f \"$PREFERENCE_FILE_PATH\" ]; then
+    NODEJS_MOBILE_BUILD_NATIVE_MODULES=\"$(cat $PREFERENCE_FILE_PATH | xargs)\"
+  fi
+fi
+if [ -z \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then
+# If build native modules preference is not set, try to find .gyp files
+#to turn it on.
+  gypfiles=($(find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -type f -name \"*.gyp\"))
+  if [ ${#gypfiles[@]} -gt 0 ]; then
+    NODEJS_MOBILE_BUILD_NATIVE_MODULES=1
+  else
+    NODEJS_MOBILE_BUILD_NATIVE_MODULES=0
+  fi
+fi
+if [ \"1\" != \"$NODEJS_MOBILE_BUILD_NATIVE_MODULES\" ]; then exit 0; fi
+# Delete object files
+find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.o\" -type f -delete
+find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.a\" -type f -delete
+# Create Info.plist for each framework built and loader override.
+PATCH_SCRIPT_DIR=\"$( cd \"$PROJECT_DIR\" && cd ../node_modules/nodejs-mobile-react-native/scripts/ && pwd )\"
+NODEJS_PROJECT_DIR=\"$( cd \"$CODESIGNING_FOLDER_PATH\" && cd nodejs-project/ && pwd )\"
+node \"$PATCH_SCRIPT_DIR\"/ios-create-plists-and-dlopen-override.js $NODEJS_PROJECT_DIR
+# Embed every resulting .framework in the application and delete them afterwards.
+embed_framework()
+{
+    FRAMEWORK_NAME=\"$(basename \"$1\")\"
+    cp -r \"$1\" \"$TARGET_BUILD_DIR/$FRAMEWORKS_FOLDER_PATH/\"
+    
+    /usr/bin/codesign --force --sign $EXPANDED_CODE_SIGN_IDENTITY --preserve-metadata=identifier,entitlements,flags --timestamp=none \"$TARGET_BUILD_DIR/$FRAMEWORKS_FOLDER_PATH/$FRAMEWORK_NAME\"
+}
+find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d | while read frmwrk_path; do embed_framework \"$frmwrk_path\"; done
+
+#Delete gyp temporary .deps dependency folders from the project structure.
+find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/.deps/*\" -delete
+find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \".deps\" -type d -delete
+
+#Delete frameworks from their build paths
+find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.framework/*\" -delete
+find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d -delete
+";
+		};
+		54483AF1DA474A71931D6D6A /* Remove NodeJS Mobile Framework Simulator Strips */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			name = "Remove NodeJS Mobile Framework Simulator Strips";
+			inputPaths = (
+			);
+			outputPaths = (
+			);
+			shellPath = /bin/sh;
+			shellScript = "
+set -e
+FRAMEWORK_BINARY_PATH=\"$TARGET_BUILD_DIR/$FRAMEWORKS_FOLDER_PATH/NodeMobile.framework/NodeMobile\"
+FRAMEWORK_STRIPPED_PATH=\"$FRAMEWORK_BINARY_PATH-strip\"
+if [ \"$PLATFORM_NAME\" != \"iphonesimulator\" ]; then
+  if $(lipo \"$FRAMEWORK_BINARY_PATH\" -verify_arch \"x86_64\") ; then
+    lipo -output \"$FRAMEWORK_STRIPPED_PATH\" -remove \"x86_64\" \"$FRAMEWORK_BINARY_PATH\"
+    rm \"$FRAMEWORK_BINARY_PATH\"
+    mv \"$FRAMEWORK_STRIPPED_PATH\" \"$FRAMEWORK_BINARY_PATH\"
+    echo \"Removed simulator strip from NodeMobile.framework\"
+  fi
+fi
+";
 		};
 /* End PBXShellScriptBuildPhase section */

@@ -1712,17 +1809,11 @@
 					"$(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;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = (
-					"$(inherited)",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-				);
+				LIBRARY_SEARCH_PATHS = "$(inherited)";
 				OTHER_LDFLAGS = (
 					"-ObjC",
 					"-lc++",
@@ -1753,17 +1844,11 @@
 					"$(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;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = (
-					"$(inherited)",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-				);
+				LIBRARY_SEARCH_PATHS = "$(inherited)";
 				OTHER_LDFLAGS = (
 					"-ObjC",
 					"-lc++",
@@ -1793,8 +1878,6 @@
 					"$(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/**",
 				);
 				INFOPLIST_FILE = drip/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1827,8 +1910,6 @@
 					"$(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/**",
 				);
 				INFOPLIST_FILE = drip/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1870,16 +1951,10 @@
 					"$(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 = "drip-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = (
-					"$(inherited)",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-				);
+				LIBRARY_SEARCH_PATHS = "$(inherited)";
 				OTHER_LDFLAGS = (
 					"-ObjC",
 					"-lc++",
@@ -1920,16 +1995,10 @@
 					"$(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 = "drip-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = (
-					"$(inherited)",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-				);
+				LIBRARY_SEARCH_PATHS = "$(inherited)";
 				OTHER_LDFLAGS = (
 					"-ObjC",
 					"-lc++",
@@ -1968,16 +2037,10 @@
 					"$(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 = "drip-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = (
-					"$(inherited)",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-				);
+				LIBRARY_SEARCH_PATHS = "$(inherited)";
 				OTHER_LDFLAGS = (
 					"-ObjC",
 					"-lc++",
@@ -2016,16 +2079,10 @@
 					"$(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 = "drip-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = (
-					"$(inherited)",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-					"\"$(SRCROOT)/$(TARGET_NAME)\"",
-				);
+				LIBRARY_SEARCH_PATHS = "$(inherited)";
 				OTHER_LDFLAGS = (
 					"-ObjC",
 					"-lc++",
@@ -5,22 +5,24 @@
 * LICENSE file in the root directory of this source tree.
 */

-#import <AppDelegate.h>
+#import "AppDelegate.h"

-#import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
-#import <RNCPushNotificationIOS.h>
+#import <React/RCTPushNotificationManager.h>

@implementation AppDelegate

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
-  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
-                                                   moduleName:@"drip"
-                                            initialProperties:nil];
+  NSURL *jsCodeLocation;

+  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
+
+  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
+                                                      moduleName:@"home"
+                                               initialProperties:nil
+                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
@@ -34,37 +36,28 @@
 // Required to register for notifications
 - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
 {
-  [RNCPushNotificationIOS didRegisterUserNotificationSettings:notificationSettings];
+  [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings];
 }
 // Required for the register event.
 - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
 {
-  [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
+  [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
 }
 // Required for the notification event. You must call the completion handler after handling the remote notification.
 - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
 fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
 {
-  [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
+  [RCTPushNotificationManager didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
 }
 // Required for the registrationError event.
 - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
 {
-  [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
+  [RCTPushNotificationManager didFailToRegisterForRemoteNotificationsWithError:error];
 }
 // Required for the localNotification event.
 - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
 {
-  [RNCPushNotificationIOS didReceiveLocalNotification:notification];
-}
-
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
-{
-#if DEBUG
-  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
-#else
-  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-#endif
+  [RCTPushNotificationManager didReceiveLocalNotification:notification];
 }

@end
@@ -51,7 +51,7 @@ export default function config(opts) {
    const i = cycleStartsSortedByDate.indexOf(cycleStart)
    const earlierCycleStart = cycleStartsSortedByDate[i + 1]
    if (!earlierCycleStart) return null
-    return getCycleByStartDay(earlierCycleStart)
+    return getCycleForCycleStartDay(earlierCycleStart)
  }

  function getCyclesBefore(targetCycleStartDay) {
@@ -61,70 +61,38 @@ export default function config(opts) {
    if (startFromHere < 0) return null
    return cycleStartsSortedByDate
      .slice(startFromHere)
-      .map(start => getCycleByStartDay(start))
+      .map(start => getCycleForCycleStartDay(start))
      // filter the ones exceeding maxCycleLength, those are null
      .filter(cycle => cycle)
  }

-  function findIndexOfDay(day, daysSortedByDate) {
-    return daysSortedByDate.findIndex(d => d.date === day.date)
-  }
-
-  function getNextCycleStartDay(startDay, cycleStartsSortedByDate) {
-    const cycleStartIndex = findIndexOfDay(
-      startDay,
-      cycleStartsSortedByDate)
-    return cycleStartsSortedByDate[cycleStartIndex - 1]
-  }
-
-  function getTodayDate() {
-    return new Date().toISOString().slice(0, 10)
-  }
-
-  function getCycleLength(startDate, endDate) {
-    return LocalDate.parse(startDate)
-      .until(LocalDate.parse(endDate), DAYS)
-  }
-
-  function isValidCycle(startDate, endDate) {
-    return getCycleLength(startDate, endDate) <= maxCycleLength
-  }
-
-  function getCycleByStartDay(startDay, todayDate) {
-    let cycleEndDate = todayDate || getTodayDate()
-    let cycleEndIndex = 0
-
-    const nextCycleStart = getNextCycleStartDay(
-      startDay,
-      cycleStartsSortedByDate
-    )
-
-    if (nextCycleStart) {
-      const nextCycleIndex = findIndexOfDay(
-        nextCycleStart,
-        cycleDaysSortedByDate
+  function getCycleForCycleStartDay(startDay, todayDate) {
+    const todayAsLocalDate = todayDate ? LocalDate.parse(todayDate) : LocalDate.now()
+    const cycleStartIndex = cycleDaysSortedByDate.indexOf(startDay)
+    const i = cycleStartsSortedByDate.indexOf(startDay)
+    const startLocalDate = LocalDate.parse(startDay.date)
+    const nextMensesStart = cycleStartsSortedByDate[i - 1]
+    let cycle
+    let cycleLength
+    if (nextMensesStart) {
+      cycle = cycleDaysSortedByDate.slice(
+        cycleDaysSortedByDate.indexOf(nextMensesStart) + 1,
+        cycleStartIndex + 1,
      )
-      cycleEndIndex = nextCycleIndex + 1
-      cycleEndDate = nextCycleStart.date
+      const nextLocalDate = LocalDate.parse(nextMensesStart.date)
+      cycleLength = startLocalDate.until(nextLocalDate, DAYS)
+    } else {
+      cycle = cycleDaysSortedByDate.slice(0, cycleStartIndex + 1)
+      cycleLength = startLocalDate.until(todayAsLocalDate, DAYS)
    }
-
-    if (isValidCycle(startDay.date, cycleEndDate)) {
-      const cycleStartIndex = findIndexOfDay(
-        startDay,
-        cycleDaysSortedByDate
-      )
-      return cycleDaysSortedByDate
-        .slice(cycleEndIndex, cycleStartIndex + 1)
-    }
-
-    return null
+    return cycleLength > maxCycleLength ? null : cycle
  }

  function getCycleForDay(dayOrDate, todayDate) {
    const dateString = typeof dayOrDate === 'string' ? dayOrDate : dayOrDate.date
    const cycleStart = getLastMensesStartForDay(dateString)
    if (!cycleStart) return null
-    return getCycleByStartDay(cycleStart, todayDate)
+    return getCycleForCycleStartDay(cycleStart, todayDate)
  }

  function isMensesStart(cycleDay) {
@@ -231,7 +199,6 @@ export default function config(opts) {
    getAllCycleLengths,
    getPredictedMenses,
    isMensesStart,
-    getMensesDaysRightAfter,
-    getCycleByStartDay,
+    getMensesDaysRightAfter
  }
-}
+}
@@ -1,34 +0,0 @@
-export default function ({
-  val, cycleDay, mensesDaysAfter, checkIsMensesStart
-}) {
-
-  cycleDay.bleeding = val
-
-  // if a bleeding value is deleted or excluded, we need to check if there are
-  // any following bleeding days and if the next one of them is now a cycle
-  // start
-  if (bleedingValueDeletedOrExluded(val)) {
-    cycleDay.isCycleStart = false
-    if (!mensesDaysAfter.length) return
-    const nextOne = mensesDaysAfter[mensesDaysAfter.length - 1]
-    if (checkIsMensesStart(nextOne)) {
-      nextOne.isCycleStart = true
-    }
-  } else {
-    cycleDay.isCycleStart = checkIsMensesStart(cycleDay)
-    maybeClearOldCycleStarts(cycleDay)
-  }
-
-  function bleedingValueDeletedOrExluded(val) {
-    const bleedingDeleted = !val
-    const bleedingExcluded = val && val.exclude
-    return bleedingDeleted || bleedingExcluded
-  }
-
-  function maybeClearOldCycleStarts() {
-  // if we have a new bleeding day, we need to clear the
-  // menses start marker from all following days of this
-  // menses that may have been marked as start before
-    mensesDaysAfter.forEach(day => day.isCycleStart = false)
-  }
-}
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`--recursive --timeout 120000 --bail --file e2e/init.js`