Test

Distinction between License and AcceptLicense screens

See merge request bloodyhealth/drip!534

.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["module:metro-react-native-babel-preset"],
-}

.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

.eslintrc

@@ -1,42 +0,0 @@
-{
-  "env": {
-    "node": true,
-    "mocha": true,
-    "es6": true
-  },
-  "extends": ["eslint:recommended", "plugin:react/recommended"],
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 2018
-  },
-  "plugins": ["react"],
-  "settings": {
-    "react": {
-      "version": require("./package.json").dependencies.react
-    }
-  },
-  "rules": {
-    "indent": ["error", 2],
-    "no-console": ["error", { "allow": ["warn", "error"] }],
-    "space-before-function-paren": 0,
-    "semi": ["warn", "never"],
-    "space-infix-ops": ["warn"],
-    "no-var": "error",
-    "prefer-const": "error",
-    "no-trailing-spaces": "error",
-    "react/prop-types": 2,
-    "max-len": [
-      1,
-      {
-        "ignoreStrings": true,
-        "ignoreComments": true,
-        "ignoreTemplateLiterals": true
-      }
-    ],
-    "no-multi-spaces": 2
-  }
-}

.eslintrc.js

@@ -0,0 +1,33 @@
+module.exports = {
+  root: true,
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  env: {
+    node: true,
+    jest: true,
+    es6: true,
+  },
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    requireConfigFile: false,
+    babelOptions: {
+      presets: ['@babel/preset-react'],
+    },
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+  },
+  plugins: ['react'],
+  settings: {
+    react: {
+      version: require('./package.json').dependencies.react,
+    },
+  },
+  rules: {
+    'no-console': ['error', { allow: ['warn', 'error'] }],
+    'no-var': 'error',
+    'prefer-const': 'error',
+    'react/prop-types': 2,
+  },
+}

.gitignore

@@ -23,7 +23,6 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-project.xcworkspace
 ios/Index/DataStore
 
 # Android/IntelliJ
@@ -33,17 +32,18 @@ build/
 .gradle
 local.properties
 *.iml
+*.hprof
 
 # node.js
 #
 node_modules/
 npm-debug.log
-yarn-error.log
 
 # BUCK
 buck-out/
 \.buckd/
 *.keystore
+!debug.keystore
 
 # fastlane
 #
@@ -59,6 +59,9 @@ buck-out/
 # Bundle artifact
 *.jsbundle
 
+# CocoaPods
+/ios/Pods/
+
 # RN android release
 android/app/bin/
 android/app/release/
@@ -74,3 +77,7 @@ android/app/src/main/assets/*
 nodejs-assets/nodejs-project/sample-*
 nodejs-assets/build-native-modules-MacOS-helper-script-node.sh
 nodejs-assets/build-native-modules-MacOS-helper-script-npm.sh
+
+# yarn
+.yarn/*
+yarn-error.log

.gitlab-ci.yml

@@ -1,4 +1,4 @@
-image: node:8
+image: node:14
 
 # This folder is cached between builds
 # http://docs.gitlab.com/ce/ci/yaml/README.html#cache
@@ -10,3 +10,29 @@ test_async:
   script:
     - npm install
     - npm test
+
+variables:
+  DEPENDABOT_IMAGE: docker.io/andrcuns/dependabot-gitlab:0.23.0
+
+.dependabot-gitlab:
+  image:
+    name: $DEPENDABOT_IMAGE
+    entrypoint: ['']
+  variables:
+    GIT_STRATEGY: none
+    RAILS_ENV: production
+    SECRET_KEY_BASE: key
+    PACKAGE_MANAGER: npm
+    SETTINGS__GITLAB_URL: $CI_SERVER_URL
+    SETTINGS__STANDALONE: 'true'
+    SETTINGS__LOG_COLOR: 'true'
+  script:
+    - cd /home/dependabot/app
+    - bundle exec rake "dependabot:update[$PROJECT_PATH,$PACKAGE_MANAGER,$DIRECTORY]"
+
+dependabot:
+  extends: .dependabot-gitlab
+  rules:
+    - if: $DEPENDENCY_UPDATES_DISABLED
+      when: never
+    - if: '$CI_PIPELINE_SOURCE == "schedule" && $PACKAGE_MANAGER_SET =~ /(\bnpm|yarn\b)/'

.gitlab/dependabot.yml

@@ -0,0 +1,17 @@
+# Configuration taken from this article:
+# https://paperless.blog/dependabot-on-gitlab
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: daily
+    open-pull-requests-limit: 3
+    ignore:
+      - dependency-name: '*'
+        update-types: ['version-update:semver-patch']
+      - dependency-name: 'realm'
+      - dependency-name: 'nodejs-mobile-react-native'
+      - dependency-name: 'react'
+      - dependency-name: 'react-native'
+      - dependency-name: 'react-native-push-notifications'

.gitlab/merge_request_templates/Default.md

@@ -0,0 +1,32 @@
+## Why this change?
+
+Closes ticket #
+
+## Description
+
+I have tested this MR:
+
+- [ ] tested this PR on iOS simulator/physical device,
+- [ ] tested this PR on Android simulator/physical device,
+- [ ] ran e2e tests.
+
+A few sentences describing the overall goals of the pull request's commits.
+
+## Steps to Test or Reproduce
+
+Outline the steps to test or reproduce the MR here.
+
+## Reviewing
+
+Here's what I am looking for feedback on in particular:
+
+- additional testing on specific type of the devices,
+- feedback on specific part of the code,
+- etc.
+
+## In addition:
+
+- Screenshots
+- Links to the additional info
+- Migrations
+- Follow-up tickets

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx pretty-quick --staged

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.nvmrc

@@ -0,0 +1 @@
+v14.19.3

.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  singleQuote: true,
+  semi: false,
+}

.ruby-version

@@ -0,0 +1 @@
+2.7.4

CONTRIBUTING.md

@@ -14,7 +14,7 @@ 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:drip@mailbox.org?Subject=Nice%20incoming%20mail) :postbox:, ask to [join our Slack](mailto:drip@mailbox.org?Subject=Join%20Slack) or tweet :bird: at us [@dripberlin](https://twitter.com/dripberlin).
 
 ## What should I know before I get started?
 

Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby '2.7.4'
+gem 'cocoapods', '~> 1.11', '>= 1.11.2'

Gemfile.lock

@@ -0,0 +1,96 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    CFPropertyList (3.0.5)
+      rexml
+    activesupport (6.1.5)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      tzinfo (~> 2.0)
+      zeitwerk (~> 2.3)
+    addressable (2.8.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    algoliasearch (1.27.5)
+      httpclient (~> 2.8, >= 2.8.3)
+      json (>= 1.5.1)
+    atomos (0.1.3)
+    claide (1.1.0)
+    cocoapods (1.11.3)
+      addressable (~> 2.8)
+      claide (>= 1.0.2, < 2.0)
+      cocoapods-core (= 1.11.3)
+      cocoapods-deintegrate (>= 1.0.3, < 2.0)
+      cocoapods-downloader (>= 1.4.0, < 2.0)
+      cocoapods-plugins (>= 1.0.0, < 2.0)
+      cocoapods-search (>= 1.0.0, < 2.0)
+      cocoapods-trunk (>= 1.4.0, < 2.0)
+      cocoapods-try (>= 1.1.0, < 2.0)
+      colored2 (~> 3.1)
+      escape (~> 0.0.4)
+      fourflusher (>= 2.3.0, < 3.0)
+      gh_inspector (~> 1.0)
+      molinillo (~> 0.8.0)
+      nap (~> 1.0)
+      ruby-macho (>= 1.0, < 3.0)
+      xcodeproj (>= 1.21.0, < 2.0)
+    cocoapods-core (1.11.3)
+      activesupport (>= 5.0, < 7)
+      addressable (~> 2.8)
+      algoliasearch (~> 1.0)
+      concurrent-ruby (~> 1.1)
+      fuzzy_match (~> 2.0.4)
+      nap (~> 1.0)
+      netrc (~> 0.11)
+      public_suffix (~> 4.0)
+      typhoeus (~> 1.0)
+    cocoapods-deintegrate (1.0.5)
+    cocoapods-downloader (1.5.1)
+    cocoapods-plugins (1.0.0)
+      nap
+    cocoapods-search (1.0.1)
+    cocoapods-trunk (1.6.0)
+      nap (>= 0.8, < 2.0)
+      netrc (~> 0.11)
+    cocoapods-try (1.2.0)
+    colored2 (3.1.2)
+    concurrent-ruby (1.1.9)
+    escape (0.0.4)
+    ethon (0.15.0)
+      ffi (>= 1.15.0)
+    ffi (1.15.5)
+    fourflusher (2.3.1)
+    fuzzy_match (2.0.4)
+    gh_inspector (1.1.3)
+    httpclient (2.8.3)
+    i18n (1.10.0)
+      concurrent-ruby (~> 1.0)
+    json (2.6.1)
+    minitest (5.15.0)
+    molinillo (0.8.0)
+    nanaimo (0.3.0)
+    nap (1.1.0)
+    netrc (0.11.0)
+    public_suffix (4.0.6)
+    rexml (3.2.5)
+    ruby-macho (2.5.1)
+    typhoeus (1.4.0)
+      ethon (>= 0.9.0)
+    tzinfo (2.0.4)
+      concurrent-ruby (~> 1.0)
+    xcodeproj (1.21.0)
+      CFPropertyList (>= 2.3.3, < 4.0)
+      atomos (~> 0.1.3)
+      claide (>= 1.0.2, < 2.0)
+      colored2 (~> 3.1)
+      nanaimo (~> 0.3.0)
+      rexml (~> 3.2.4)
+    zeitwerk (2.5.4)
+PLATFORMS
+  ruby
+DEPENDENCIES
+  cocoapods (~> 1.11, >= 1.11.2)
+RUBY VERSION
+   ruby 2.7.4p191
+BUNDLED WITH
+   2.2.27

README.md

@@ -1,11 +1,11 @@
 # drip, the open-source cycle tracking app
 
 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/).
+Find more information on [our website](https://dripapp.org/).
 
-[<img src="https://bloodyhealth.gitlab.io/assets/get.png"
+[<img src="https://dripapp.org/assets/get.png"
      alt="Get it here"
-     height="55">](https://bloodyhealth.gitlab.io/release/5.apk)
+     height="55">](https://dripapp.org/release/8.apk)
 [<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/)
@@ -21,93 +21,132 @@ The app is built in React Native and currently developed for Android.
 
 ## Development setup
 
-#### 1. Android Studio
+### 1. Get this repository
-    
-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:
-
-
-    $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
-    $ nvm install v10
-
-
-#### 3. Get this repository
 
 Clone it with SSH
 
-    $ git clone git@gitlab.com:bloodyhealth/drip.git
+    git clone git@gitlab.com:bloodyhealth/drip.git
 
 or clone it with HTTPS
 
-    $ git clone https://gitlab.com/bloodyhealth/drip.git
+    git clone https://gitlab.com/bloodyhealth/drip.git
 
-and run
+### 2. Node & yarn version
 
-    $ cd drip
+Make sure you are running Node 14 and classic yarn (v.1). It's easiest to switch Node versions using `nvm`, here's how to install NVM: https://github.com/nvm-sh/nvm#installing-and-updating. Once you have nvm you can install node 14:
-    $ npm install
 
-#### 4. More requirements from Android Studio
+    nvm install v14.19.3
+
+and then run
+
+    cd drip
+    yarn install
+
+## for Android
+
+### 3.1 Android Studio
+
+Install [Android Studio](https://developer.android.com/studio/) - you'll need it to install some dependencies.
+
+### 3.2 More requirements from Android Studio
 
 Open Android Studio and click on "Open an existing Android Studio project". Navigate to the drip repository you cloned and double click the android folder. It detects, downloads and cofigures requirements that might be missing, like the NDK and CMake to build the native code part of the project. Also see the [nodejs-mobile repository](https://github.com/janeasystems/nodejs-mobile) for the necessary prerequisites for your system.
 
-#### 5. Run the app
+### 3.3 Run the app on Android
 
 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
+i. Open a terminal and run
-    ```
-    $ npm run android
-    ```
 
-1.  To see logging output, run the following command in another tab: 
+    yarn android
-    ```
-    $ npm run log
-    ```
 
-1.  Run the following command and select enable hot reloading (see https://facebook.github.io/react-native/docs/debugging.html):
+ii. To see logging output, run the following command in another tab:
-    ```
-    $ adb shell input keyevent 82
-    ```
 
-1.  We recommend installing an [ESLint plugin in your editor](https://eslint.org/docs/user-guide/integrations#editors). There's an `.eslintrc` file in this project which will be used by the plugin to check your code for style errors and potential bugs.
+    yarn log
+
+iii. Run the following command and select enable hot reloading (see https://facebook.github.io/react-native/docs/debugging.html):
+
+    adb shell input keyevent 82
+
+iv. We recommend installing an [ESLint plugin in your editor](https://eslint.org/docs/user-guide/integrations#editors). There's an `.eslintrc` file in this project which will be used by the plugin to check your code for style errors and potential bugs.
+
+## for iOS
+
+### 4.1 Install Cocoapods
+
+"CocoaPods manages library dependencies for your Xcode projects"
+
+    brew install cocoapods
+
+### 4.2 Run app on iOS
+
+Minimum system requirements to run iOS app are as follows:
+
+- MacOS 10.15.7 for Mac users
+- Xcode 13 (command line tools only might be enough)
+
+i. Install XCode dependencies by running the following command from the root project directory:
+
+    cd ios && pod install && cd ..
+
+ii. To run app either open drip workspace ('drip.xcworkspace' file) with XCode and run "Build" or run the following command:
+
+    yarn ios
+
+iii. If you are building the app with XCode make sure you are running this as well:
+
+    yarn start
 
 ### Troubleshooting
+
 #### [MacOS] Java problems
 
 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.
 
 #### [MacOS] Ninja
-If `npm` says `CMake was unable to find a build program corresponding to "Ninja".`:
+
-    ```
+If `yarn` says `CMake was unable to find a build program corresponding to "Ninja".`:
-    $ brew install ninja
+
-    ```
+    brew install ninja
 
 ### [MacOS] adb not on the path
+
 If you get error messages about `adb` not being found on your path:
-    ```
+
-    $ ln -s ~/Library/Android/sdk/platform-tools/adb /usr/local/bin/adb
+    ln -s ~/Library/Android/sdk/platform-tools/adb /usr/local/bin/adb
-    ```
+
+### Clearing project cache
+
+If you would like to clear project cache and/or re-install project libraries, you can run clear script as follows:
+
+    yarn clear
+
+Script accepts the following options:
+"all" - script will delete all caches and re-install project libraries,
+"ios" - script will delete ios-related cache
+"android" - script will delete android-related cache
+"cache" - script will purge Watchman, Metrobundler, Pachager and React caches
+"npm" - script will reinstall project libraries.
+
+For example, if you would like to clear android part of the project and re-install project libraries, you can run the following command:
+
+    yarn clear android npm
 
 ## Tests
 
 ### Unit tests
+
 You can run the tests with:
-    ```
+
-    $ npm test
+    yarn 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":
@@ -119,28 +158,37 @@ You can run the tests with:
 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.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"). 
+   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"`
-    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`
+   --> 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`
+   Otherwise just open a new 2nd tab to run (in your drip folder) `yarn 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: !
 
+### Manual testing
+
+To ensure that core app functionality is working, we developed a [test protocol](https://gitlab.com/bloodyhealth/drip/-/snippets/2283405).
+
 ## 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:
+
+In order to see logging output from the app, run `yarn log` in a separate terminal. You can output specific code you want to see, with:
 `console.log(theVariableIWantToSeeHere)`
 or just a random string to check if this piece of code is actually running:
 `console.log("HELLO")`.
 
+## Known issues
+
+### Android emulator
+
+- Import/export to the local drive don't work.
+- Email button on the Hamburger menu > About doesn't work - throws a yellow error message "Possible unhandled promise rejection...".
+
 ## NFP rules
+
 More information about how the app calculates fertility status and bleeding predictions in the [wiki on Gitlab](https://gitlab.com/bloodyhealth/drip/wikis/home).
 
 ## Adding a new tracking icon
@@ -149,7 +197,11 @@ More information about how the app calculates fertility status and bleeding pred
 2.  Download webfont from fontello.
 3.  Copy both the content of `config.json` and `font.tff` into `assets/fonts`, replacing it with the current content of `config-drip-icon-font.json` and `drip-icon-font.tff`.
 4.  Now run the following command in your console:
-    ```
+
-    $ react-native link
+        react-native link
-    ```
+
 5.  You should be able to use the icon now within drip, e.g. in Cycle Day Overview and on the chart.
+
+## Translation
+
+We are using [Weblate](https://weblate.org/) as translation software.

android/app/build.gradle

@@ -15,9 +15,14 @@ import com.android.build.OutputFile
  *   // the name of the generated asset file containing your JS bundle
  *   bundleAssetName: "index.android.bundle",
  *
- *   // the entry file for bundle generation
+ *   // the entry file for bundle generation. If none specified and
+ *   // "index.android.js" exists, it will be used. Otherwise "index.js" is
+ *   // default. Can be overridden with ENTRY_FILE environment variable.
  *   entryFile: "index.android.js",
  *
+ *   // https://reactnative.dev/docs/performance#enable-the-ram-format
+ *   bundleCommand: "ram-bundle",
+ *
  *   // whether to bundle JS and assets in debug mode
  *   bundleInDebug: false,
  *
@@ -73,7 +78,7 @@ import com.android.build.OutputFile
  */
 
 project.ext.react = [
-    entryFile: "index.js"
+    enableHermes: false,  // clean and rebuild if changing
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"
@@ -94,15 +99,37 @@ def enableSeparateBuildPerCPUArchitecture = false
  */
 def enableProguardInReleaseBuilds = false
 
+/**
+ * The preferred build flavor of JavaScriptCore.
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US.  Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'org.webkit:android-jsc:+'
+/**
+ * Whether to enable the Hermes VM.
+ *
+ * This should be set on project.ext.react and that value will be read here. If it is not set
+ * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
+ * and the benefits of using Hermes will therefore be sharply reduced.
+ */
+def enableHermes = project.ext.react.get("enableHermes", false);
+
+/**
+ * Architectures to build native code for in debug.
+ */
+def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitectures")
+
 android {
+    ndkVersion rootProject.ext.ndkVersion
     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,12 +137,18 @@ android {
         versionCode 8
         versionName "1.2102.28"
         ndk {
-            abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+            abiFilters "armeabi-v7a", "x86", "arm64-v8a"
         }
         testBuildType System.getProperty('testBuildType', 'debug')  // This will later be used to control the test apk build type
         testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
     }
     signingConfigs {
+	    debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
         release {
             if (project.hasProperty('DRIP_RELEASE_STORE_FILE')) {
                 storeFile file(DRIP_RELEASE_STORE_FILE)
@@ -134,40 +167,74 @@ android {
         }
     }
     buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+            if (nativeArchitectures) {
+                ndk {
+                    abiFilters nativeArchitectures.split(',')
+                }
+            }            
+        }
         release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
             signingConfig signingConfigs.release
         }
     }
+
+    packagingOptions {
+        pickFirst "lib/armeabi-v7a/libc++_shared.so"
+        pickFirst "lib/arm64-v8a/libc++_shared.so"
+        pickFirst "lib/x86/libc++_shared.so"
+        pickFirst "lib/x86_64/libc++_shared.so"
+    }
+
     // applicationVariants are e.g. debug, release
     applicationVariants.all { variant ->
         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
+            // https://developer.android.com/studio/build/configure-apk-splits.html
-            def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a":3, "x86_64":4]
+            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
+            def versionCodes = ["armeabi-v7a": 1, "x86": 2]
             def abi = output.getFilter(OutputFile.ABI)
             if (abi != null) {  // null for the universal-debug, universal-release variants
                 output.versionCodeOverride =
-                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
+                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
             }
         }
     }
 }
 
 dependencies {
-    implementation project(':realm')
-    implementation project(':react-native-vector-icons')
-    implementation project(':react-native-share')
-    implementation project(':react-native-restart')
-    implementation project(':react-native-push-notification')
-    implementation project(':react-native-fs')
-    implementation project(':react-native-document-picker')
-    implementation project(':nodejs-mobile-react-native')
     implementation fileTree(dir: "libs", include: ["*.jar"])
+    //noinspection GradleDynamicVersion
     implementation 'androidx.appcompat:appcompat:1.0.0'
     implementation 'androidx.annotation:annotation:1.1.0'
     implementation "com.facebook.react:react-native:+"  // From node_modules
+
+    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
+    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
+      exclude group:'com.facebook.fbjni'
+    }
+    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
+        exclude group:'com.facebook.flipper'
+        exclude group:'com.squareup.okhttp3', module:'okhttp'
+    }
+    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
+        exclude group:'com.facebook.flipper'
+    }
+
+    if (enableHermes) {
+        def hermesPath = "../../node_modules/hermes-engine/android/";
+        debugImplementation files(hermesPath + "hermes-debug.aar")
+        releaseImplementation files(hermesPath + "hermes-release.aar")
+    } else {
+        implementation jscFlavor
+    }
+
     androidTestImplementation('com.wix:detox:+') { transitive = true }
     androidTestImplementation 'junit:junit:4.12'
 }
@@ -175,6 +242,8 @@ dependencies {
 // Run this once to be able to run the application with BUCK
 // puts all compile dependencies into folder libs for BUCK to use
 task copyDownloadableDepsToLibs(type: Copy) {
-    from configurations.compile
+    from configurations.implementation
     into 'libs'
 }
+
+apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

android/app/src/debug/AndroidManifest.xml

@@ -4,5 +4,10 @@
 
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
+    <application
+        android:usesCleartextTraffic="true"
+        tools:targetApi="28"
+        tools:ignore="GoogleAppIndexingWarning">
+        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+    </application>    
 </manifest>

android/app/src/debug/java/com/drip/ReactNativeFlipper.java

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
+ * directory of this source tree.
+ */
+package com.rndiffapp;
+import android.content.Context;
+import com.facebook.flipper.android.AndroidFlipperClient;
+import com.facebook.flipper.android.utils.FlipperUtils;
+import com.facebook.flipper.core.FlipperClient;
+import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
+import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
+import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
+import com.facebook.flipper.plugins.inspector.DescriptorMapping;
+import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
+import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
+import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
+import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
+import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.modules.network.NetworkingModule;
+import okhttp3.OkHttpClient;
+public class ReactNativeFlipper {
+  public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
+    if (FlipperUtils.shouldEnableFlipper(context)) {
+      final FlipperClient client = AndroidFlipperClient.getInstance(context);
+      client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
+      client.addPlugin(new ReactFlipperPlugin());
+      client.addPlugin(new DatabasesFlipperPlugin(context));
+      client.addPlugin(new SharedPreferencesFlipperPlugin(context));
+      client.addPlugin(CrashReporterPlugin.getInstance());
+      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
+      NetworkingModule.setCustomClientBuilder(
+          new NetworkingModule.CustomClientBuilder() {
+            @Override
+            public void apply(OkHttpClient.Builder builder) {
+              builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
+            }
+          });
+      client.addPlugin(networkFlipperPlugin);
+      client.start();
+      // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
+      // Hence we run if after all native modules have been initialized
+      ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
+      if (reactContext == null) {
+        reactInstanceManager.addReactInstanceEventListener(
+            new ReactInstanceManager.ReactInstanceEventListener() {
+              @Override
+              public void onReactContextInitialized(ReactContext reactContext) {
+                reactInstanceManager.removeReactInstanceEventListener(this);
+                reactContext.runOnNativeModulesQueueThread(
+                    new Runnable() {
+                      @Override
+                      public void run() {
+                        client.addPlugin(new FrescoFlipperPlugin());
+                      }
+                    });
+              }
+            });
+      } else {
+        client.addPlugin(new FrescoFlipperPlugin());
+      }
+    }
+  }
+}

android/app/src/main/AndroidManifest.xml

@@ -10,6 +10,8 @@
     <uses-permission tools:node="remove" android:name="android.permission.READ_PHONE_STATE" />
     <uses-permission tools:node="remove" android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
     <uses-permission tools:node="remove" android:name="android.permission.READ_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.VIBRATE" />
+    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
 
     <permission
         android:name="${applicationId}.permission.C2D_MESSAGE"
@@ -29,7 +31,8 @@
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
+        android:launchMode="singleTask"
         android:windowSoftInputMode="adjustResize"
         android:screenOrientation="sensorPortrait">
         <intent-filter>
@@ -37,7 +40,6 @@
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
       </activity>
-      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
       <provider
             android:name="androidx.core.content.FileProvider"
             android:authorities="com.drip.provider"
@@ -49,20 +51,28 @@
                 android:resource="@xml/filepaths" />
       </provider>
 
-        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_name"
+        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_foreground"
-                android:value="drip-notification"/>
+                    android:value="false"/>
-        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_channel_description"
-                    android:value="notifications from drip"/>
         <!-- Change the resource name to your App's accent color - or any other color you want -->
         <meta-data  android:name="com.dieam.reactnativepushnotification.notification_color"
-                    android:resource="@android:color/white"/>
+                    android:resource="@android:color/white"/> <!-- or @android:color/{name} to use a standard color -->
 
+        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions" />
         <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
         <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
             <intent-filter>
                 <action android:name="android.intent.action.BOOT_COMPLETED" />
+                <action android:name="android.intent.action.QUICKBOOT_POWERON" />
+                <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
             </intent-filter>
         </receiver>
-    </application>
 
+        <service
+            android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
+            android:exported="false" >
+            <intent-filter>
+                <action android:name="com.google.firebase.MESSAGING_EVENT" />
+            </intent-filter>
+        </service>
+    </application>
 </manifest>

android/app/src/main/java/com/drip/MainActivity.java

@@ -5,8 +5,8 @@ import com.facebook.react.ReactActivity;
 public class MainActivity extends ReactActivity {
 
   /**
-     * Returns the name of the main component registered from JavaScript.
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
-     * This is used to schedule rendering of the component.
+   * rendering of the component.
    */
   @Override
   protected String getMainComponentName() {

android/app/src/main/java/com/drip/MainApplication.java

@@ -1,28 +1,21 @@
 package com.drip;
 
 import android.app.Application;
-
+import android.content.Context;
+import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
-import com.janeasystems.rn_nodejs_mobile.RNNodeJsMobilePackage;
+import com.facebook.react.ReactInstanceManager;
-import com.avishayil.rnrestart.ReactNativeRestartPackage;
-import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage;
-import com.oblador.vectoricons.VectorIconsPackage;
-import com.rnfs.RNFSPackage;
-import com.reactnativedocumentpicker.ReactNativeDocumentPicker;
-import cl.json.RNSharePackage;
 import cl.json.ShareApplication;
-import io.realm.react.RealmReactPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
-import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
-
+import java.lang.reflect.InvocationTargetException;
-import java.util.Arrays;
 import java.util.List;
 
 public class MainApplication extends Application implements ReactApplication, ShareApplication {
 
-  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
+  private final ReactNativeHost mReactNativeHost =
+    new ReactNativeHost(this) {
       @Override
       public boolean getUseDeveloperSupport() {
         return BuildConfig.DEBUG;
@@ -30,17 +23,11 @@ public class MainApplication extends Application implements ReactApplication, Sh
 
       @Override
       protected List<ReactPackage> getPackages() {
-      return Arrays.<ReactPackage>asList(
+        @SuppressWarnings("UnnecessaryLocalVariable")
-          new MainReactPackage(),
+        List<ReactPackage> packages = new PackageList(this).getPackages();
-            new RNNodeJsMobilePackage(),
+        // Packages that cannot be autolinked yet can be added manually here, for example:
-            new ReactNativeRestartPackage(),
+        // packages.add(new MyReactNativePackage());
-            new ReactNativePushNotificationPackage(),
+        return packages;
-            new VectorIconsPackage(),
-            new RNFSPackage(),
-            new ReactNativeDocumentPicker(),
-            new RNSharePackage(),
-            new RealmReactPackage()
-      );
       }
 
         @Override
@@ -58,6 +45,37 @@ public class MainApplication extends Application implements ReactApplication, Sh
   public void onCreate() {
     super.onCreate();
     SoLoader.init(this, /* native exopackage */ false);
+    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+  }
+  /**
+   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
+   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+   *
+   * @param context
+   * @param reactInstanceManager   
+   */
+  private static void initializeFlipper(
+      Context context, ReactInstanceManager reactInstanceManager) {
+    if (BuildConfig.DEBUG) {
+      try {
+        /*
+         We use reflection here to pick up the class that initializes Flipper,
+        since Flipper library is not available in release mode
+        */
+        Class<?> aClass = Class.forName("com.rndiffapp.ReactNativeFlipper");
+        aClass
+            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
+            .invoke(null, context, reactInstanceManager);
+      } catch (ClassNotFoundException e) {
+        e.printStackTrace();
+      } catch (NoSuchMethodException e) {
+        e.printStackTrace();
+      } catch (IllegalAccessException e) {
+        e.printStackTrace();
+      } catch (InvocationTargetException e) {
+        e.printStackTrace();
+      }
+    }
   }
 
   @Override

android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+     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.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
+    <selector>
+        <!-- 
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+</inset>

android/app/src/main/res/values/styles.xml

@@ -1,8 +1,9 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
+        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
         <item name="colorPrimary">@color/colorPrimary</item>
         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
         <item name="colorAccent">@color/colorAccent</item>

android/build.gradle

@@ -2,12 +2,12 @@
 
 buildscript {
     repositories {
-        jcenter()
         google()
+        mavenCentral()
     }
-    ext.kotlinVersion = '1.3.10'
+    ext.kotlinVersion = "1.3.10"
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.4.0'
+        classpath("com.android.tools.build:gradle:4.2.2")
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
@@ -17,17 +17,27 @@ buildscript {
 
 allprojects {
     repositories {
-        mavenLocal()
-        jcenter()
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-            url "$rootDir/../node_modules/react-native/android"
+            url("$rootDir/../node_modules/react-native/android")
         }
+        maven {
+            // Android JSC is installed from npm
+            url("$rootDir/../node_modules/jsc-android/dist")
+        }
+        mavenCentral {
+            // We don't want to fetch react-native from Maven Central as there are
+            // older versions over there.
+            content {
+                excludeGroup "com.facebook.react"
+            }
+        }        
+        google()
+        maven { url 'https://www.jitpack.io' }
         maven {
             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"
@@ -36,20 +46,12 @@ allprojects {
 }
 
 ext {
-    buildToolsVersion = "29.0.3"
+    googlePlayServicesVersion = "+" // default: "+"
-    minSdkVersion = 23
+    firebaseMessagingVersion = "21.1.0" // default: "+"
-    compileSdkVersion = 29
-    targetSdkVersion = 29
-    supportLibVersion = "29.0.0"
-}
 
-subprojects {
+    buildToolsVersion = "30.0.2"
-    afterEvaluate {project ->
+    minSdkVersion = 23
-        if (project.hasProperty("android")) {
+    compileSdkVersion = 30
-            android {
+    targetSdkVersion = 30
-                compileSdkVersion 29
+    ndkVersion = "21.4.7075529"       
-                buildToolsVersion '29.0.3'
-            }
-        }
-    }
 }

android/gradle.properties

@@ -9,12 +9,23 @@
 
 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
-# Default value: -Xmx10248m -XX:MaxPermSize=256m
+# Default value: -Xmx1024m -XX:MaxPermSize=256m
 # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
 
 # 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
-android.enableJetifier=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
 android.useAndroidX=true
+# Automatically convert third-party libraries to use AndroidX
+android.enableJetifier=true
+
+# Version of flipper SDK to use with React Native
+FLIPPER_VERSION=0.99.0
+
+# https://github.com/facebook/react-native/issues/30729
+org.gradle.jvmargs=-Xmx4g

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

android/gradlew

@@ -7,7 +7,7 @@
 # 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
+#      https://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,
@@ -83,6 +83,7 @@ cd "$SAVED" >&-
 
 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 
+
 # Determine the Java command to use to start the JVM.
 if [ -n "$JAVA_HOME" ] ; then
     if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
@@ -126,11 +127,13 @@ if $darwin; then
     GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
 fi
 
-# For Cygwin, switch paths to Windows format before running java
+# For Cygwin or MSYS, switch paths to Windows format before running java
-if $cygwin ; then
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
     APP_HOME=`cygpath --path --mixed "$APP_HOME"`
     CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
 
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
     # We build the pattern for arguments to be converted via cygpath
     ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
     SEP=""
@@ -154,27 +157,30 @@ if $cygwin ; then
         else
             eval `echo args$i`="\"$arg\""
         fi
-        i=$((i+1))
+        i=`expr $i + 1`
     done
     case $i in
-        (0) set -- ;;
+        0) set -- ;;
-        (1) set -- "$args0" ;;
+        1) set -- "$args0" ;;
-        (2) set -- "$args0" "$args1" ;;
+        2) set -- "$args0" "$args1" ;;
-        (3) set -- "$args0" "$args1" "$args2" ;;
+        3) set -- "$args0" "$args1" "$args2" ;;
-        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
-        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
-        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
-        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
-        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
-        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;        
     esac
 fi
 
-# Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules
+# Escape application args
-function splitJvmOpts() {
+save () {
-    JVM_OPTS=("$@")
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
 }
-eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS
+APP_ARGS=`save "$@"`
-JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME"
 
-exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@"
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -32,12 +32,15 @@ if "%DIRNAME%" == "" set DIRNAME=.
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
 @rem Find java.exe
 if defined JAVA_HOME goto findJavaFromJavaHome
 
 set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto init
+if "%ERRORLEVEL%" == "0" goto execute
 
 echo.
 echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
@@ -51,7 +54,7 @@ goto fail
 set JAVA_HOME=%JAVA_HOME:"=%
 set JAVA_EXE=%JAVA_HOME%/bin/java.exe
 
-if exist "%JAVA_EXE%" goto init
+if exist "%JAVA_EXE%" goto execute
 
 echo.
 echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
@@ -61,34 +64,14 @@ echo location of your Java installation.
 
 goto fail
 
-:init
-@rem Get command-line arguments, handling Windowz variants
-
-if not "%OS%" == "Windows_NT" goto win9xME_args
-if "%@eval[2+2]" == "4" goto 4NT_args
-
-:win9xME_args
-@rem Slurp the command line arguments.
-set CMD_LINE_ARGS=
-set _SKIP=2
-
-:win9xME_args_slurp
-if "x%~1" == "x" goto execute
-
-set CMD_LINE_ARGS=%*
-goto execute
-
-:4NT_args
-@rem Get arguments from the 4NT Shell from JP Software
-set CMD_LINE_ARGS=%$
-
 :execute
 @rem Setup the command line
 
 set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
 
+
 @rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
 
 :end
 @rem End local scope for the variables with windows NT shell

android/keystores/BUCK

@@ -1,8 +0,0 @@
-keystore(
-    name = "debug",
-    properties = "debug.keystore.properties",
-    store = "debug.keystore",
-    visibility = [
-        "PUBLIC",
-    ],
-)

android/keystores/debug.keystore.properties

@@ -1,4 +0,0 @@
-key.store=debug.keystore
-key.alias=androiddebugkey
-key.store.password=android
-key.alias.password=android

android/settings.gradle

@@ -1,19 +1,5 @@
 rootProject.name = 'drip'
-include ':nodejs-mobile-react-native'
+
-project(':nodejs-mobile-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/nodejs-mobile-react-native/android')
+apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
-include ':react-native-restart'
-project(':react-native-restart').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-restart/android')
-include ':react-native-push-notification'
-project(':react-native-push-notification').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-push-notification/android')
-include ':react-native-vector-icons'
-project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
-include ':react-native-fs'
-project(':react-native-fs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fs/android')
-include ':react-native-document-picker'
-project(':react-native-document-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-document-picker/android')
-include ':react-native-share'
-project(':react-native-share').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-share/android')
-include ':realm'
-project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android')
 
 include ':app'

app.json

@@ -1,4 +1,4 @@
 {
-  "name": "drip",
+  "name": "drip.",
-  "displayName": "drip"
+  "displayName": "drip."
 }

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+}

components/AcceptLicense.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { BackHandler, StyleSheet, View } from 'react-native'
+import { useTranslation } from 'react-i18next'
+
+import License from './settings/License'
+import Button from './common/button'
+
+import { saveLicenseFlag } from '../local-storage'
+
+import { Containers } from '../styles'
+
+export default function AcceptLicense({ setLicense }) {
+  const onAcceptLicense = async () => {
+    await saveLicenseFlag()
+    setLicense()
+  }
+
+  const { t } = useTranslation()
+
+  return (
+    <License>
+      <View style={styles.container}>
+        <Button onPress={BackHandler.exitApp} testID="licenseCancelButton">
+          {t('labels.shared.cancel')}
+        </Button>
+        <Button isCTA onPress={onAcceptLicense} testID="licenseOkButton">
+          {t('labels.shared.ok')}
+        </Button>
+      </View>
+    </License>
+  )
+}
+
+AcceptLicense.propTypes = {
+  setLicense: PropTypes.func.isRequired,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.rowContainer,
+  },
+})

components/Home.js

@@ -0,0 +1,141 @@
+import React from 'react'
+import { ScrollView, StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+import moment from 'moment'
+
+import AppText from './common/app-text'
+import Button from './common/button'
+
+import cycleModule from '../lib/cycle'
+import { getFertilityStatusForDay } from '../lib/sympto-adapter'
+import {
+  determinePredictionText,
+  formatWithOrdinalSuffix,
+} from './helpers/home'
+
+import { Colors, Fonts, Sizes, Spacing } from '../styles'
+import { LocalDate } from '@js-joda/core'
+import { useTranslation } from 'react-i18next'
+
+const Home = ({ navigate, setDate }) => {
+  const { t } = useTranslation()
+
+  function navigateToCycleDayView() {
+    setDate(todayDateString)
+    navigate('CycleDay')
+  }
+
+  const todayDateString = LocalDate.now().toString()
+  const { getCycleDayNumber, getPredictedMenses } = cycleModule()
+  const cycleDayNumber = getCycleDayNumber(todayDateString)
+  const { status, phase, statusText } =
+    getFertilityStatusForDay(todayDateString)
+  const prediction = determinePredictionText(getPredictedMenses(), t)
+
+  const cycleDayText = cycleDayNumber
+    ? formatWithOrdinalSuffix(cycleDayNumber)
+    : ''
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+    >
+      <AppText style={styles.title}>{moment().format('MMM Do YYYY')}</AppText>
+
+      {cycleDayNumber && (
+        <View style={styles.line}>
+          <AppText style={styles.whiteSubtitle}>{cycleDayText}</AppText>
+          <AppText style={styles.turquoiseText}>
+            {t('labels.home.cycleDay')}
+          </AppText>
+        </View>
+      )}
+      {phase && (
+        <View style={styles.line}>
+          <AppText style={styles.whiteSubtitle}>
+            {formatWithOrdinalSuffix(phase)}
+          </AppText>
+          <AppText style={styles.turquoiseText}>
+            {t('labels.home.cyclePhase')}
+          </AppText>
+          <AppText style={styles.turquoiseText}>{status}</AppText>
+          <Asterisk />
+        </View>
+      )}
+      <View style={styles.line}>
+        <AppText style={styles.turquoiseText}>{prediction}</AppText>
+      </View>
+      <Button isCTA isSmall={false} onPress={navigateToCycleDayView}>
+        {t('labels.home.addDataForToday')}
+      </Button>
+      {phase && (
+        <View style={styles.asteriskLine}>
+          <Asterisk />
+          <AppText linkStyle={styles.whiteText} style={styles.greyText}>
+            {statusText}
+          </AppText>
+        </View>
+      )}
+    </ScrollView>
+  )
+}
+
+const Asterisk = () => {
+  return <AppText style={styles.asterisk}>*</AppText>
+}
+
+const styles = StyleSheet.create({
+  asterisk: {
+    color: Colors.orange,
+  },
+  container: {
+    backgroundColor: Colors.purple,
+    flex: 1,
+  },
+  contentContainer: {
+    padding: Spacing.base,
+    paddingTop: 0,
+  },
+  line: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignContent: 'flex-start',
+    marginBottom: Spacing.tiny,
+    marginTop: Spacing.small,
+  },
+  asteriskLine: {
+    flexDirection: 'row',
+    alignContent: 'flex-start',
+    marginBottom: Spacing.tiny,
+    marginTop: Spacing.small,
+  },
+  title: {
+    color: Colors.purpleLight,
+    fontFamily: Fonts.bold,
+    fontSize: Sizes.huge,
+    marginVertical: Spacing.small,
+  },
+  turquoiseText: {
+    color: Colors.turquoise,
+    fontSize: Sizes.subtitle,
+  },
+  whiteSubtitle: {
+    color: 'white',
+    fontSize: Sizes.subtitle,
+  },
+  whiteText: {
+    color: 'white',
+  },
+  greyText: {
+    color: Colors.greyLight,
+    paddingLeft: Spacing.base,
+  },
+})
+
+Home.propTypes = {
+  navigate: PropTypes.func,
+  setDate: PropTypes.func,
+}
+
+export default Home

components/app-wrapper.js

@@ -1,90 +1,54 @@
-import React, { Component } from 'react'
+import React, { useState, useEffect } from 'react'
 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 './common/app-loading'
+import AppStatusBar from './common/app-status-bar'
+import AcceptLicense from './AcceptLicense'
+import PasswordPrompt from './password-prompt'
 
-import store from "../store"
+export default function AppWrapper() {
-import { Provider } from 'react-redux'
+  const [isLoading, setIsLoading] = useState(true)
+  const [isLicenseAccepted, setIsLicenseAccepted] = useState(false)
+  const [isDbEncrypted, setIsDbEncrypted] = useState(false)
 
-export default class AppWrapper extends Component {
+  const checkIsLicenseAccepted = async () => {
-  constructor() {
-    super()
-    this.state = {
-      isCheckingLicenseAgreement: true,
-      shouldShowLicenseAgreement: false,
-      shouldShowPasswordPrompt: false,
-      shouldShowApp: false,
-    }
-    nodejs.start('main.js')
-    this.checkLicenseAgreement()
-    this.checkDbPasswordSet()
-  }
-
-  async checkLicenseAgreement() {
     const isLicenseFlagSet = await getLicenseFlag()
-    if (!isLicenseFlagSet) {
+    setIsLicenseAccepted(isLicenseFlagSet)
-      this.enableShowLicenseAgreement()
+    setIsLoading(false)
-    } else {
-      this.setState({ isCheckingLicenseAgreement: false })
-    }
   }
 
-  async checkDbPasswordSet() {
+  const checkIsDbEncrypted = async () => {
-    const canConnectToDb = await openDb()
+    const isEncrypted = !(await openDb())
-    if (canConnectToDb) {
+    if (isEncrypted) setIsDbEncrypted(true)
-      this.enableShowApp()
+    await saveEncryptionFlag(isEncrypted)
-      await saveEncryptionFlag(false)
-      return false
-    }
-    this.setState({ shouldShowPasswordPrompt: true })
-    await saveEncryptionFlag(true)
   }
 
-  enableShowLicenseAgreement = () => {
+  useEffect(() => {
-    this.setState({
+    nodejs.start('main.js')
-      shouldShowLicenseAgreement: true,
+    checkIsLicenseAccepted()
-      isCheckingLicenseAgreement: false
+    checkIsDbEncrypted()
-    })
+  }, [])
+
+  if (isLoading) {
+    return <AppLoadingView />
   }
 
-  disableShowLicenseAgreement = () => {
+  if (!isLicenseAccepted) {
-    this.setState({ shouldShowLicenseAgreement: false })
+    return <AcceptLicense setLicense={() => setIsLicenseAccepted(true)} />
   }
 
-  enableShowApp = () => {
+  return (
-    this.setState({
+    <>
-      shouldShowApp: true,
+      <AppStatusBar />
-      shouldShowPasswordPrompt: false
+      {isDbEncrypted ? (
-    })
+        <PasswordPrompt enableShowApp={() => setIsDbEncrypted(false)} />
-  }
+      ) : (
-
+        <App restartApp={() => checkIsDbEncrypted()} />
-  render() {
+      )}
-    const {
+    </>
-      isCheckingLicenseAgreement,
+  )
-      shouldShowLicenseAgreement,
-      shouldShowPasswordPrompt,
-      shouldShowApp,
-    } = this.state
-
-    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 />
-    }
-
-    return <Provider store={store}>{initialView}</Provider>
-
-  }
 }

components/app.js

@@ -1,114 +1,71 @@
-import React, { Component } from 'react'
+import React, { useState, useEffect } from 'react'
 import { BackHandler, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { connect } from 'react-redux'
+import { LocalDate } from '@js-joda/core'
-
-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 { isSettingsView } from './pages'
+import { pages } from './pages'
 
-import { headerTitles } from '../i18n/en/labels'
 import setupNotifications from '../lib/notifications'
-import { getCycleDay, closeDb } from '../db'
+import { closeDb } from '../db'
-
-class App extends Component {
-
-  static propTypes = {
-    date: PropTypes.string,
-    navigation: PropTypes.object.isRequired,
-    navigate: PropTypes.func,
-    goBack: PropTypes.func,
-  }
-
-  constructor(props) {
-    super(props)
-
-    this.backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      this.goBack
-    )
-
-    setupNotifications(this.props.navigate)
-  }
-
-  goBack = () => {
-    const { currentPage } = this.props.navigation
 
+const App = ({ restartApp }) => {
+  const [date, setDate] = useState(LocalDate.now().toString())
+  const [currentPage, setCurrentPage] = useState('Home')
+  const goBack = () => {
     if (currentPage === 'Home') {
       closeDb()
       BackHandler.exitApp()
     } else {
-      this.props.goBack()
+      const { parent } = pages.find((p) => p.component === currentPage)
+
+      setCurrentPage(parent)
     }
 
     return true
   }
 
-  componentWillUnmount() {
+  useEffect(() => {
-    this.backHandler.remove()
+    const backHandler = BackHandler.addEventListener(
-  }
+      'hardwareBackPress',
+      goBack
+    )
 
-  render() {
+    return () => backHandler.remove()
-    const { date, navigation, goBack } = this.props
+  })
-    const { currentPage } = navigation
 
-    if (!currentPage) {
+  useEffect(() => setupNotifications(setCurrentPage, setDate), [])
-      return false
-    }
 
   const Page = viewsList[currentPage]
-    const title = headerTitles[currentPage]
-
-    const isSettingsSubView = isSettingsView(currentPage)
   const isTemperatureEditView = currentPage === 'TemperatureEditView'
-
+  const headerProps = { navigate: setCurrentPage }
-    const headerProps = {
-      title,
-      handleBack: isSettingsSubView ? goBack : null,
-    }
-
   const pageProps = {
-      cycleDay: date && getCycleDay(date),
     date,
+    setDate,
     isTemperatureEditView,
+    navigate: setCurrentPage,
   }
 
   return (
     <View style={styles.container}>
-        <Header { ...headerProps } />
+      <Header {...headerProps} />
-        <Page { ...pageProps } />
+      <Page {...pageProps} restartApp={restartApp} />
-        <Menu />
+      <Menu currentPage={currentPage} navigate={setCurrentPage} />
     </View>
   )
-  }
+}
+
+App.propTypes = {
+  restartApp: PropTypes.func,
 }
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
-  }
+  },
 })
 
-const mapStateToProps = (state) => {
+export default App
-  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)

components/calendar.js

@@ -1,15 +1,10 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View } from 'react-native'
 import { CalendarList } from 'react-native-calendars'
 
-import { connect } from 'react-redux'
-import { setDate } from '../slices/date'
-import { navigate } from '../slices/navigation'
-
 import { getBleedingDaysSortedByDate } from '../db'
 import cycleModule from '../lib/cycle'
-import nothingChanged from '../db/db-unchanged'
 import {
   calendarTheme,
   predictionToCalFormat,
@@ -17,55 +12,20 @@ import {
   todayToCalFormat,
 } from './helpers/calendar'
 
-class CalendarView extends Component {
+const CalendarView = ({ setDate, navigate }) => {
-  static propTypes = {
+  const bleedingDays = getBleedingDaysSortedByDate()
-    setDate: PropTypes.func.isRequired,
-    navigate: PropTypes.func.isRequired,
-  }
-
-  constructor(props) {
-    super(props)
-    this.bleedingDays = getBleedingDaysSortedByDate()
   const predictedMenses = cycleModule().getPredictedMenses()
-    this.state = {
+
-      bleedingDaysInCalFormat: toCalFormat(this.bleedingDays),
+  const passDateToDayView = ({ dateString }) => {
-      predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
+    setDate(dateString)
-      todayInCalFormat: todayToCalFormat(),
+    navigate('CycleDay')
   }
 
-    this.bleedingDays.addListener(this.setStateWithCalFormattedDays)
-  }
-
-  setStateWithCalFormattedDays = (_, changes) => {
-    if (nothingChanged(changes)) return
-    const predictedMenses = cycleModule().getPredictedMenses()
-    this.setState({
-      bleedingDaysInCalFormat: toCalFormat(this.bleedingDays),
-      predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
-      todayInCalFormat: todayToCalFormat(),
-    })
-  }
-
-  componentWillUnmount() {
-    this.bleedingDays.removeListener(this.setStateWithCalFormattedDays)
-  }
-
-  passDateToDayView = (result) => {
-    this.props.setDate(result.dateString)
-    this.props.navigate('CycleDay')
-  }
-
-  render() {
-    const {
-      todayInCalFormat,
-      bleedingDaysInCalFormat,
-      predictedBleedingDaysInCalFormat,
-    } = this.state
   const markedDates = Object.assign(
     {},
-      todayInCalFormat,
+    todayToCalFormat(),
-      bleedingDaysInCalFormat,
+    toCalFormat(bleedingDays),
-      predictedBleedingDaysInCalFormat
+    predictionToCalFormat(predictedMenses)
   )
 
   return (
@@ -73,27 +33,24 @@ class CalendarView extends Component {
       <CalendarList
         // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
         firstDay={1}
-          onDayPress={this.passDateToDayView.bind(this)}
+        onDayPress={passDateToDayView}
         markedDates={markedDates}
-          markingType='custom'
+        markingType="custom"
         theme={calendarTheme}
         // Max amount of months allowed to scroll to the past.
         pastScrollRange={120}
       />
     </View>
   )
-  }
 }
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
 })
 
-const mapDispatchToProps = (dispatch) => {
+CalendarView.propTypes = {
-  return {
+  setDate: PropTypes.func.isRequired,
-    setDate: (date) => dispatch(setDate(date)),
+  navigate: PropTypes.func.isRequired,
-    navigate: (page) => dispatch(navigate(page)),
-  }
 }
 
-export default connect(null, mapDispatchToProps)(CalendarView)
+export default CalendarView

components/chart/chart-legend.js

@@ -18,21 +18,21 @@ const ChartLegend = ({ height }) => {
 }
 
 ChartLegend.propTypes = {
-  height: PropTypes.number.isRequired
+  height: PropTypes.number.isRequired,
 }
 
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     justifyContent: 'flex-end',
-    width: CHART_YAXIS_WIDTH
+    width: CHART_YAXIS_WIDTH,
   },
   text: {
     ...Typography.label,
   },
   textBold: {
-    ...Typography.labelBold
+    ...Typography.labelBold,
-  }
+  },
 })
 
 export default ChartLegend

components/chart/chart-line.js

@@ -1,19 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { Shape } from 'react-native/Libraries/ART/ReactNativeART'
+import { Shape } from '@react-native-community/art'
 
 import { Colors } from '../../styles'
-import { CHART_STROKE_WIDTH, CHART_GRID_LINE_HORIZONTAL_WIDTH } from '../../config'
+import {
+  CHART_STROKE_WIDTH,
+  CHART_GRID_LINE_HORIZONTAL_WIDTH,
+} from '../../config'
 
 const ChartLine = ({ path, isNfpLine }) => {
   const color = isNfpLine ? Colors.orange : Colors.grey
   const width = isNfpLine
-    ? CHART_STROKE_WIDTH : CHART_GRID_LINE_HORIZONTAL_WIDTH * 2.5
+    ? CHART_STROKE_WIDTH
+    : CHART_GRID_LINE_HORIZONTAL_WIDTH * 2.5
 
-  return (
+  return <Shape d={path} stroke={color} strokeWidth={width} />
-    <Shape d={path} stroke={color} strokeWidth={width} />
-  )
 }
 
 ChartLine.propTypes = {
@@ -22,7 +24,7 @@ ChartLine.propTypes = {
 }
 
 ChartLine.defaultProps = {
-  isNfpLine: false
+  isNfpLine: false,
 }
 
 export default ChartLine

components/chart/chart.js

@@ -1,255 +1,145 @@
-import React, { Component } from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
-import { ActivityIndicator, FlatList, Dimensions, StyleSheet, View } from 'react-native'
+import { Dimensions, PixelRatio, StyleSheet, View } from 'react-native'
 
-import AppLoadingView from '../common/app-loading'
 import AppPage from '../common/app-page'
-import AppText from '../common/app-text'
 
 import DayColumn from './day-column'
 import HorizontalGrid from './horizontal-grid'
+import MainGrid from './main-grid'
 import NoData from './no-data'
+import NoTemperature from './no-temperature'
 import Tutorial from './tutorial'
 import YAxis from './y-axis'
 
-import { connect } from 'react-redux'
-import { navigate } from '../../slices/navigation'
-
 import { getCycleDaysSortedByDate } from '../../db'
-import nothingChanged from '../../db/db-unchanged'
+import { getChartFlag, setChartFlag } from '../../local-storage'
-import { getChartFlag, scaleObservable, setChartFlag } from '../../local-storage'
+import { makeColumnInfo } from '../helpers/chart'
-import { makeColumnInfo, nfpLines } from '../helpers/chart'
 
 import {
   CHART_COLUMN_WIDTH,
-  SYMPTOMS,
+  CHART_GRID_LINE_HORIZONTAL_WIDTH,
   CHART_SYMPTOM_HEIGHT_RATIO,
-  CHART_XAXIS_HEIGHT_RATIO
+  CHART_XAXIS_HEIGHT_RATIO,
+  SYMPTOMS,
 } from '../../config'
-import { shared } from '../../i18n/en/labels'
+import { Spacing } from '../../styles'
-import { Colors, Spacing } from '../../styles'
 
-class CycleChart extends Component {
+const getSymptomsFromCycleDays = (cycleDays) =>
-  static propTypes = {
+  SYMPTOMS.filter((symptom) => cycleDays.some((cycleDay) => cycleDay[symptom]))
-    navigate: PropTypes.func,
-    end: PropTypes.bool
-  }
 
-  constructor(props) {
+const CycleChart = ({ navigate, setDate }) => {
-    super(props)
+  const [shouldShowHint, setShouldShowHint] = useState(true)
 
-    this.state = {}
+  useEffect(async () => {
-    this.cycleDaysSortedByDate = getCycleDaysSortedByDate()
-    this.getFhmAndLtlInfo = nfpLines()
-    this.shouldShowTemperatureColumn = false
-
-    this.checkShouldShowHint()
-    this.prepareSymptomData()
-  }
-
-  componentWillUnmount() {
-    this.cycleDaysSortedByDate.removeListener(this.handleDbChange)
-    this.removeObvListener()
-  }
-
-  checkShouldShowHint = async () => {
     const flag = await getChartFlag()
-    const shouldShowHint = flag === 'true' ? true : false
+    setShouldShowHint(flag === 'true')
-    this.setState({ shouldShowHint })
+  }, [])
+
+  const hideHint = () => {
+    setShouldShowHint(false)
+    setChartFlag()
   }
 
-  setShouldShowHint = async () => {
+  const cycleDaysSortedByDate = getCycleDaysSortedByDate()
-    await setChartFlag()
-    this.setState({ shouldShowHint: false })
-  }
 
-  onLayout = () => {
+  const chartSymptoms = getSymptomsFromCycleDays(cycleDaysSortedByDate)
-    if (this.state.chartHeight) return false
+  const symptomRowSymptoms = chartSymptoms.filter(
+    (symptom) => symptom !== 'temperature'
+  )
 
-    this.reCalculateChartInfo()
+  const shouldShowTemperatureColumn = chartSymptoms.indexOf('temperature') > -1
-    this.updateListeners(this.reCalculateChartInfo)
-  }
 
-  prepareSymptomData = () => {
+  const { width, height } = Dimensions.get('window')
-    this.symptomRowSymptoms = SYMPTOMS.filter((symptomName) => {
+  const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
-      return this.cycleDaysSortedByDate.some(cycleDay => {
-        return (symptomName !== 'temperature') && cycleDay[symptomName]
-      })
-    })
-    this.chartSymptoms = [...this.symptomRowSymptoms]
-    if (this.cycleDaysSortedByDate.some(day => day.temperature)) {
-      this.chartSymptoms.push('temperature')
-      this.shouldShowTemperatureColumn = true
-    }
-  }
 
-  renderColumn = ({ item, index }) => {
+  const xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
+  const remainingHeight = height * 0.7 - xAxisHeight
+  const symptomHeight = PixelRatio.roundToNearestPixel(
+    remainingHeight * CHART_SYMPTOM_HEIGHT_RATIO
+  )
+  const symptomRowHeight =
+    PixelRatio.roundToNearestPixel(symptomRowSymptoms.length * symptomHeight) +
+    CHART_GRID_LINE_HORIZONTAL_WIDTH
+  const columnHeight = remainingHeight - symptomRowHeight
+
+  const chartHeight = shouldShowTemperatureColumn
+    ? height * 0.7
+    : symptomRowHeight + xAxisHeight
+
+  const columns = makeColumnInfo()
+
+  const renderColumn = ({ item }) => {
     return (
       <DayColumn
+        setDate={setDate}
         dateString={item}
-        index={index}
+        navigate={navigate}
-        navigate={this.props.navigate}
+        symptomHeight={symptomHeight}
-        symptomHeight={this.symptomHeight}
+        columnHeight={columnHeight}
-        columnHeight={this.columnHeight}
+        symptomRowSymptoms={symptomRowSymptoms}
-        symptomRowSymptoms={this.symptomRowSymptoms}
+        chartSymptoms={chartSymptoms}
-        chartSymptoms={this.chartSymptoms}
+        shouldShowTemperatureColumn={shouldShowTemperatureColumn}
-        shouldShowTemperatureColumn={this.shouldShowTemperatureColumn}
+        xAxisHeight={xAxisHeight}
-        getFhmAndLtlInfo={this.getFhmAndLtlInfo}
-        xAxisHeight={this.xAxisHeight}
       />
     )
   }
 
-  reCalculateChartInfo = () => {
+  const hasDataToDisplay = chartSymptoms.length > 0
-    const { width, height } = Dimensions.get('window')
 
-    this.xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
+  if (!hasDataToDisplay) {
-    const remainingHeight = height * 0.7 - this.xAxisHeight
+    return <NoData navigate={navigate} />
-    this.symptomHeight = remainingHeight * CHART_SYMPTOM_HEIGHT_RATIO
-    this.symptomRowHeight = this.symptomRowSymptoms.length *
-      this.symptomHeight
-    this.columnHeight = remainingHeight - this.symptomRowHeight
-    const chartHeight = this.shouldShowTemperatureColumn ?
-      height * 0.7 : (this.symptomRowHeight + this.xAxisHeight)
-    const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
-    const columns = makeColumnInfo()
-
-    this.setState({ columns, chartHeight, numberOfColumnsToRender })
   }
 
-  updateListeners(dataUpdateHandler) {
-    // remove existing listeners
-    if(this.handleDbChange) {
-      this.cycleDaysSortedByDate.removeListener(this.handleDbChange)
-    }
-    if (this.removeObvListener) this.removeObvListener()
-
-    this.handleDbChange = (_, changes) => {
-      if (nothingChanged(changes)) return
-      dataUpdateHandler()
-    }
-
-    this.cycleDaysSortedByDate.addListener(this.handleDbChange)
-    this.removeObvListener = scaleObservable(dataUpdateHandler, false)
-  }
-
-  render() {
-    const {
-      chartHeight,
-      chartLoaded,
-      shouldShowHint,
-      numberOfColumnsToRender
-    } = this.state
-    const hasDataToDisplay = this.chartSymptoms.length > 0
-
   return (
     <AppPage
       contentContainerStyle={styles.pageContainer}
-        onLayout={this.onLayout}
       scrollViewStyle={styles.page}
     >
-        {!hasDataToDisplay && <NoData />}
-        {hasDataToDisplay && !chartHeight && !chartLoaded && <AppLoadingView />}
       <View style={styles.chartContainer}>
-          {shouldShowHint && chartLoaded &&
+        {shouldShowHint && <Tutorial onClose={hideHint} />}
-            <Tutorial onClose={this.setShouldShowHint} />
+        {!shouldShowTemperatureColumn && <NoTemperature />}
-          }
-          {hasDataToDisplay && chartLoaded &&
-            !this.shouldShowTemperatureColumn &&
-            <View style={styles.centerItem}>
-              <AppText style={styles.warning}>
-                {shared.noTemperatureWarning}
-              </AppText>
-            </View>
-          }
-          {hasDataToDisplay && (
         <View style={styles.chartArea}>
-
-              {chartHeight && chartLoaded && (
           <YAxis
-                  height={this.columnHeight}
+            height={columnHeight}
-                  symptomsToDisplay={this.symptomRowSymptoms}
+            symptomsToDisplay={symptomRowSymptoms}
-                  symptomsSectionHeight={this.symptomRowHeight}
+            symptomsSectionHeight={symptomRowHeight}
-                  shouldShowTemperatureColumn=
+            shouldShowTemperatureColumn={shouldShowTemperatureColumn}
-                    {this.shouldShowTemperatureColumn}
+            xAxisHeight={xAxisHeight}
-                  xAxisHeight={this.xAxisHeight}
           />
-              )}
+          <MainGrid
-
+            data={columns}
-              {chartHeight &&
+            renderItem={renderColumn}
-               <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 }}
           />
-              }
+          {shouldShowTemperatureColumn && (
-              {chartHeight && chartLoaded && (
+            <HorizontalGrid height={columnHeight} />
-                <React.Fragment>
-                  {this.shouldShowTemperatureColumn &&
-                    <HorizontalGrid height={this.columnHeight} />
-                  }
-                </React.Fragment>
           )}
         </View>
-          )}
       </View>
     </AppPage>
   )
-  }
 }
 
-function LoadingMoreView({ end }) {
+CycleChart.propTypes = {
-  return (
+  navigate: PropTypes.func,
-    <View style={styles.loadingContainer}>
+  setDate: PropTypes.func,
-      {!end && <ActivityIndicator size={'large'} color={Colors.orange}/>}
-    </View>
-  )
-}
-
-LoadingMoreView.propTypes = {
-  end: PropTypes.bool
 }
 
 const styles = StyleSheet.create({
   chartArea: {
-    flexDirection: 'row'
+    flexDirection: 'row',
   },
   chartContainer: {
-    flexDirection: 'column'
+    flexDirection: 'column',
-  },
-  loadingContainer: {
-    height: '100%',
-    backgroundColor: Colors.turquoiseLight,
-    justifyContent: 'center'
   },
   page: {
-    marginVertical: Spacing.small
+    marginVertical: Spacing.small,
   },
   pageContainer: {
-    paddingHorizontal: Spacing.base
+    paddingHorizontal: Spacing.base,
   },
-  warning: {
-    padding: Spacing.large
-  }
 })
 
-const mapDispatchToProps = (dispatch) => {
+export default CycleChart
-  return({
-    navigate: (page) => dispatch(navigate(page)),
-  })
-}
-
-export default connect(
-  null,
-  mapDispatchToProps,
-)(CycleChart)

components/chart/cycle-day-label.js

@@ -7,7 +7,7 @@ import AppText from '../common/app-text'
 
 import cycleModule from '../../lib/cycle'
 import { getOrdinalSuffix } from '../helpers/home'
-import { Containers, Typography, Sizes } from '../../styles'
+import { Typography, Sizes } from '../../styles'
 
 const CycleDayLabel = ({ height, date }) => {
   const cycleDayNumber = cycleModule().getCycleDayNumber(date)
@@ -24,11 +24,11 @@ const CycleDayLabel = ({ height, date }) => {
         <AppText style={styles.text}>
           {isFirstDayOfMonth ? momentDate.format('MMM') : dayOfMonth}
         </AppText>
-        {!isFirstDayOfMonth &&
+        {!isFirstDayOfMonth && (
           <AppText style={styles.textLight}>
             {getOrdinalSuffix(dayOfMonth)}
           </AppText>
-        }
+        )}
       </View>
     </View>
   )
@@ -45,15 +45,12 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     left: 4,
   },
-  containerRow: {
-    ...Containers.rowContainer
-  },
   text: {
     ...Typography.label,
     fontSize: Sizes.small,
   },
   textBold: {
-    ...Typography.labelBold
+    ...Typography.labelBold,
   },
   textLight: {
     ...Typography.labelLight,
@@ -62,7 +59,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-around',
     alignItems: 'center',
-  }
+  },
 })
 
 export default CycleDayLabel

components/chart/day-column.js

@@ -1,10 +1,6 @@
-import React, { Component } from 'react'
+import React 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'
 
@@ -15,39 +11,36 @@ import CycleDayLabel from './cycle-day-label'
 import {
   symptomColorMethods,
   getTemperatureProps,
-  isSymptomDataComplete
+  isSymptomDataComplete,
+  nfpLines,
 } from '../helpers/chart'
 
-class DayColumn extends Component {
+const DayColumn = ({
-  static propTypes = {
+  dateString,
-    dateString: PropTypes.string.isRequired,
+  chartSymptoms,
-    chartSymptoms: PropTypes.array,
+  columnHeight,
-    columnHeight: PropTypes.number.isRequired,
+  setDate,
-    getFhmAndLtlInfo: PropTypes.func.isRequired,
+  navigate,
-    navigate: PropTypes.func.isRequired,
+  shouldShowTemperatureColumn,
-    setDate: PropTypes.func.isRequired,
+  symptomHeight,
-    shouldShowTemperatureColumn: PropTypes.bool,
+  symptomRowSymptoms,
-    symptomHeight: PropTypes.number.isRequired,
+  xAxisHeight,
-    symptomRowSymptoms: PropTypes.array,
+}) => {
-    xAxisHeight: PropTypes.number,
-  }
-
-  constructor(props) {
-    super()
-
-    const { dateString, chartSymptoms, columnHeight } = props
   const cycleDayData = getCycleDay(dateString)
-    this.data = {}
+  let data = {}
 
   if (cycleDayData) {
-      this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom, ) => {
+    data = chartSymptoms.reduce((symptomDataToDisplay, symptom) => {
       const symptomData = cycleDayData[symptom]
 
       if (symptomData && symptom === 'temperature') {
-          symptomDataToDisplay[symptom] =
+        symptomDataToDisplay[symptom] = getTemperatureProps(
-           getTemperatureProps(symptomData, columnHeight, dateString)
+          symptomData,
+          columnHeight,
+          dateString
+        )
       } else {
-          if (symptomData && ! symptomData.exclude) {
+        if (symptomData && !symptomData.exclude) {
           // if symptomColorMethods entry doesn't exist for given symptom,
           // use 'default'
           const getSymptomColorIndex =
@@ -58,81 +51,65 @@ class DayColumn extends Component {
       }
 
       return symptomDataToDisplay
-      }, this.data)
+    }, data)
   }
 
-    this.fhmAndLtl = props.getFhmAndLtlInfo(
+  const fhmAndLtl = nfpLines()(
-      props.dateString,
-      this.data.temperature ? this.data.temperature.value : null,
-      props.columnHeight
-    )
-  }
-
-  onDaySelect = (date) => {
-    this.props.setDate(date)
-    this.props.navigate('CycleDay')
-  }
-
-  shouldComponentUpdate() {
-    return false
-  }
-
-  render() {
-    const { columnHeight,
     dateString,
-      shouldShowTemperatureColumn,
+    data.temperature ? data.temperature.value : null,
-      symptomHeight,
+    columnHeight
-      symptomRowSymptoms,
+  )
-      xAxisHeight
+
-    } = this.props
+  const onDaySelect = (date) => {
+    setDate(date)
+    navigate('CycleDay')
+  }
 
   return (
-      <TouchableOpacity
+    <TouchableOpacity onPress={() => onDaySelect(dateString)} activeOpacity={1}>
-        onPress={() => this.onDaySelect(dateString)}
+      {shouldShowTemperatureColumn && (
-        activeOpacity={1}
+        <TemperatureColumn
-      >
+          horizontalLinePosition={fhmAndLtl.drawLtlAt}
-
+          isVerticalLine={fhmAndLtl.drawFhmLine}
-        {shouldShowTemperatureColumn && <TemperatureColumn
+          data={data && data.temperature}
-          horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
-          isVerticalLine={this.fhmAndLtl.drawFhmLine}
-          data={this.data && this.data.temperature}
           columnHeight={columnHeight}
-        />}
-
-        <CycleDayLabel
-          height={xAxisHeight}
-          date={dateString}
         />
+      )}
 
-        { symptomRowSymptoms.map((symptom, i) => {
+      <CycleDayLabel height={xAxisHeight} date={dateString} />
-          const hasSymptomData = this.data.hasOwnProperty(symptom)
+
+      {symptomRowSymptoms.map((symptom, i) => {
+        const hasSymptomData = Object.prototype.hasOwnProperty.call(
+          data,
+          symptom
+        )
         return (
           <SymptomCell
             index={i}
             key={symptom}
             symptom={symptom}
-              symptomValue={hasSymptomData && this.data[symptom]}
+            symptomValue={hasSymptomData && data[symptom]}
             isSymptomDataComplete={
               hasSymptomData && isSymptomDataComplete(symptom, dateString)
             }
             height={symptomHeight}
-            />)
+          />
-        }
+        )
-        )}
+      })}
-
     </TouchableOpacity>
   )
-  }
 }
 
-const mapDispatchToProps = (dispatch) => {
+DayColumn.propTypes = {
-  return({
+  dateString: PropTypes.string.isRequired,
-    setDate: (date) => dispatch(setDate(date)),
+  chartSymptoms: PropTypes.array,
-    navigate: (page) => dispatch(navigate(page)),
+  columnHeight: PropTypes.number.isRequired,
-  })
+  navigate: PropTypes.func.isRequired,
+  setDate: PropTypes.func.isRequired,
+  shouldShowTemperatureColumn: PropTypes.bool,
+  symptomHeight: PropTypes.number.isRequired,
+  symptomRowSymptoms: PropTypes.array,
+  xAxisHeight: PropTypes.number,
 }
 
-export default connect(
+export default DayColumn
-  null,
-  mapDispatchToProps,
-)(DayColumn)

components/chart/dot-and-line.js

@@ -1,6 +1,6 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { Path, Shape } from 'react-native/Libraries/ART/ReactNativeART'
+import { Path, Shape } from '@react-native-community/art'
 
 import { Colors } from '../../styles'
 
@@ -8,59 +8,45 @@ import {
   CHART_COLUMN_WIDTH,
   CHART_COLUMN_MIDDLE,
   CHART_DOT_RADIUS,
-  CHART_STROKE_WIDTH
+  CHART_STROKE_WIDTH,
 } from '../../config'
 
-export default class DotAndLine extends Component {
+const DotAndLine = ({
-  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])
-  }
-
-  render() {
-    const {
   exclude,
   leftTemperatureExclude,
   leftY,
   rightTemperatureExclude,
   rightY,
-      y
+  y,
-    } = this.props
+}) => {
   let excludeLeftLine, excludeRightLine, lineLeft, lineRight
 
   if (leftY) {
-      const middleY = ((leftY - y) / 2) + y
+    const middleY = (leftY - y) / 2 + y
     excludeLeftLine = leftTemperatureExclude || exclude
-      lineLeft = new Path()
+    lineLeft = new Path().moveTo(CHART_COLUMN_MIDDLE, y).lineTo(0, middleY)
-        .moveTo(CHART_COLUMN_MIDDLE, y)
-        .lineTo(0, middleY)
   }
   if (rightY) {
-      const middleY = ((y - rightY) / 2) + rightY
+    const middleY = (y - rightY) / 2 + rightY
     excludeRightLine = rightTemperatureExclude || exclude
     lineRight = new Path()
       .moveTo(CHART_COLUMN_MIDDLE, y)
       .lineTo(CHART_COLUMN_WIDTH, middleY)
   }
 
-    const dot = new Path().moveTo(CHART_COLUMN_MIDDLE , y - CHART_DOT_RADIUS)
+  const dot = new Path()
+    .moveTo(CHART_COLUMN_MIDDLE, y - CHART_DOT_RADIUS)
     .arc(0, CHART_DOT_RADIUS * 2, CHART_DOT_RADIUS)
     .arc(0, CHART_DOT_RADIUS * -2, CHART_DOT_RADIUS)
   const dotColor = exclude ? Colors.turquoise : Colors.turquoiseDark
-    const lineColorLeft = excludeLeftLine ?
+  const lineColorLeft = excludeLeftLine
-      Colors.turquoise : Colors.turquoiseDark
+    ? Colors.turquoise
-    const lineColorRight = excludeRightLine ?
+    : Colors.turquoiseDark
-      Colors.turquoise : Colors.turquoiseDark
+  const lineColorRight = excludeRightLine
+    ? Colors.turquoise
+    : Colors.turquoiseDark
 
-    return(
+  return (
     <React.Fragment>
       <Shape
         d={lineLeft}
@@ -79,9 +65,19 @@ export default class DotAndLine extends Component {
         stroke={dotColor}
         strokeWidth={CHART_STROKE_WIDTH}
         fill="white"
-          key='dot'
+        key="dot"
       />
     </React.Fragment>
   )
-  }
 }
+
+DotAndLine.propTypes = {
+  exclude: PropTypes.bool,
+  leftY: PropTypes.number,
+  leftTemperatureExclude: PropTypes.bool,
+  rightY: PropTypes.number,
+  rightTemperatureExclude: PropTypes.bool,
+  y: PropTypes.number.isRequired,
+}
+
+export default DotAndLine

components/chart/horizontal-grid.js

@@ -5,18 +5,19 @@ import { StyleSheet, View } from 'react-native'
 import { getTickPositions } from '../helpers/chart'
 
 import { Colors } from '../../styles'
-import { CHART_GRID_LINE_HORIZONTAL_WIDTH, CHART_YAXIS_WIDTH } from '../../config'
+import {
+  CHART_GRID_LINE_HORIZONTAL_WIDTH,
+  CHART_YAXIS_WIDTH,
+} from '../../config'
 
 const HorizontalGrid = ({ height }) => {
-  return getTickPositions(height).map(tick => {
+  return getTickPositions(height).map((tick) => {
-    return (
+    return <View key={tick} top={tick} {...styles.line} />
-      <View key={tick} top={tick} {...styles.line}/>
-    )
   })
 }
 
 HorizontalGrid.propTypes = {
-  height: PropTypes.number
+  height: PropTypes.number,
 }
 
 const styles = StyleSheet.create({
@@ -25,9 +26,9 @@ const styles = StyleSheet.create({
     borderBottomColor: Colors.grey,
     borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
     left: CHART_YAXIS_WIDTH,
-    position:'absolute',
+    position: 'absolute',
-    right: 0
+    right: 0,
-  }
+  },
 })
 
 export default HorizontalGrid

components/chart/loading-more.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { ActivityIndicator, StyleSheet, View } from 'react-native'
+
+import { Colors } from '../../styles'
+
+function LoadingMoreView({ end }) {
+  return (
+    <View style={styles.loadingContainer}>
+      {!end && <ActivityIndicator size={'large'} color={Colors.orange} />}
+    </View>
+  )
+}
+
+LoadingMoreView.propTypes = {
+  end: PropTypes.bool,
+}
+
+const styles = StyleSheet.create({
+  loadingContainer: {
+    height: '100%',
+    backgroundColor: Colors.turquoiseLight,
+    justifyContent: 'center',
+  },
+})
+
+export default LoadingMoreView

components/chart/main-grid.js

@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { FlatList } from 'react-native'
+
+import LoadingMoreView from './loading-more'
+
+const MainGrid = (props) => {
+  const [endReached, setEndReached] = useState(false)
+  return (
+    <FlatList
+      horizontal={true}
+      inverted={true}
+      showsHorizontalScrollIndicator={false}
+      keyExtractor={(item) => item}
+      windowSize={30}
+      onEndReached={() => setEndReached(true)}
+      ListFooterComponent={<LoadingMoreView end={endReached} />}
+      updateCellsBatchingPeriod={800}
+      {...props}
+    />
+  )
+}
+
+MainGrid.propTypes = {
+  height: PropTypes.number,
+  data: PropTypes.array,
+  renderItem: PropTypes.func,
+  initialNumToRender: PropTypes.number,
+  contentContainerStyle: PropTypes.object,
+}
+
+export default MainGrid

components/chart/no-data.js

@@ -5,9 +5,6 @@ import PropTypes from 'prop-types'
 import AppText from '../common/app-text'
 import Button from '../common/button'
 
-import { connect } from 'react-redux'
-import { navigate } from '../../slices/navigation'
-
 import { Containers } from '../../styles'
 import { shared } from '../../i18n/en/labels'
 
@@ -15,7 +12,12 @@ const NoData = ({ navigate }) => {
   return (
     <View style={styles.container}>
       <AppText>{shared.noDataWarning}</AppText>
-      <Button isCTA onPress={() => {navigate('CycleDay')}}>
+      <Button
+        isCTA
+        onPress={() => {
+          navigate('CycleDay')
+        }}
+      >
         {shared.noDataButtonText}
       </Button>
     </View>
@@ -28,17 +30,8 @@ NoData.propTypes = {
 
 const styles = StyleSheet.create({
   container: {
-    ...Containers.centerItems
+    ...Containers.centerItems,
-  }
+  },
 })
 
-const mapDispatchToProps = (dispatch) => {
+export default NoData
-  return({
-    navigate: (page) => dispatch(navigate(page)),
-  })
-}
-
-export default connect(
-  null,
-  mapDispatchToProps,
-)(NoData)

components/chart/no-temperature.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import AppText from '../common/app-text'
+
+import { shared } from '../../i18n/en/labels'
+
+import { Spacing } from '../../styles'
+
+function NoTemperature() {
+  return <AppText style={styles.warning}>{shared.noTemperatureWarning}</AppText>
+}
+
+const styles = StyleSheet.create({
+  warning: {
+    padding: Spacing.large,
+  },
+})
+
+export default NoTemperature

components/chart/symptom-cell.js

@@ -6,7 +6,7 @@ import { Colors, Containers } from '../../styles'
 import {
   CHART_COLUMN_WIDTH,
   CHART_DOT_RADIUS,
-  CHART_GRID_LINE_HORIZONTAL_WIDTH
+  CHART_GRID_LINE_HORIZONTAL_WIDTH,
 } from '../../config'
 
 const SymptomCell = ({
@@ -14,11 +14,11 @@ const SymptomCell = ({
   index,
   symptom,
   symptomValue,
-  isSymptomDataComplete
+  isSymptomDataComplete,
 }) => {
-
   const shouldDrawDot = symptomValue !== false
-  const styleCell = index !== 0
+  const styleCell =
+    index !== 0
       ? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
       : [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder]
   let styleDot
@@ -26,10 +26,10 @@ const SymptomCell = ({
   if (shouldDrawDot) {
     const styleSymptom = Colors.iconColors[symptom]
     const symptomColor = styleSymptom.shades[symptomValue]
-    const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix')
+    const isMucusOrCervix = symptom === 'mucus' || symptom === 'cervix'
-    const backgroundColor = (isMucusOrCervix && !isSymptomDataComplete) ?
+    const backgroundColor =
-      'white' : symptomColor
+      isMucusOrCervix && !isSymptomDataComplete ? 'white' : symptomColor
-    const borderWidth = (isMucusOrCervix && !isSymptomDataComplete) ? 2 : 0
+    const borderWidth = isMucusOrCervix && !isSymptomDataComplete ? 2 : 0
     const borderColor = symptomColor
     styleDot = [styles.dot, { backgroundColor, borderColor, borderWidth }]
   }
@@ -45,10 +45,7 @@ SymptomCell.propTypes = {
   height: PropTypes.number,
   index: PropTypes.number.isRequired,
   symptom: PropTypes.string,
-  symptomValue: PropTypes.oneOfType([
+  symptomValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-    PropTypes.bool,
-    PropTypes.number,
-  ]),
   isSymptomDataComplete: PropTypes.bool,
 }
 
@@ -59,7 +56,7 @@ const styles = StyleSheet.create({
     borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
     borderLeftColor: Colors.grey,
     borderLeftWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
-    ...Containers.centerItems
+    ...Containers.centerItems,
   },
   topBorder: {
     borderTopColor: Colors.grey,
@@ -68,7 +65,7 @@ const styles = StyleSheet.create({
   dot: {
     width: CHART_DOT_RADIUS * 2,
     height: CHART_DOT_RADIUS * 2,
-    borderRadius: 50
+    borderRadius: 50,
-  }
+  },
 })
 export default SymptomCell

components/chart/symptom-icon.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet , View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 import DripIcon from '../../assets/drip-icons'
 
@@ -26,8 +26,8 @@ SymptomIcon.propTypes = {
 
 const styles = StyleSheet.create({
   container: {
-    ...Containers.centerItems
+    ...Containers.centerItems,
-  }
+  },
 })
 
 export default SymptomIcon

components/chart/temperature-column.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet } from 'react-native'
 
-import { Surface , Path } from 'react-native/Libraries/ART/ReactNativeART'
+import { Surface, Path } from '@react-native-community/art'
 
 import ChartLine from './chart-line'
 import DotAndLine from './dot-and-line'
@@ -13,7 +13,7 @@ const TemperatureColumn = ({
   horizontalLinePosition,
   isVerticalLine,
   data,
-  columnHeight
+  columnHeight,
 }) => {
   const x = CHART_STROKE_WIDTH / 2
 
@@ -23,34 +23,37 @@ const TemperatureColumn = ({
       height={columnHeight}
       style={styles.container}
     >
+      <ChartLine path={new Path().lineTo(0, columnHeight)} />
 
-      <ChartLine path={new Path().lineTo(0, columnHeight)}/>
+      {horizontalLinePosition && (
-
+        <ChartLine
-      {horizontalLinePosition && <ChartLine
           path={new Path()
             .moveTo(0, horizontalLinePosition)
-          .lineTo(CHART_COLUMN_WIDTH, horizontalLinePosition)
+            .lineTo(CHART_COLUMN_WIDTH, horizontalLinePosition)}
-        }
           isNfpLine={true}
-        key='ltl'
+          key="ltl"
-      />}
+        />
+      )}
 
-      {isVerticalLine && <ChartLine
+      {isVerticalLine && (
+        <ChartLine
           path={new Path().moveTo(x, x).lineTo(x, columnHeight)}
           isNfpLine={true}
-        key='fhm'
+          key="fhm"
-      />}
+        />
+      )}
 
-      {data && typeof(data.y) !== 'undefined' && <DotAndLine
+      {data && typeof data.y !== 'undefined' && (
+        <DotAndLine
           y={data.y}
           exclude={data.temperatureExclude}
           rightY={data.rightY}
           rightTemperatureExclude={data.rightTemperatureExclude}
           leftY={data.leftY}
           leftTemperatureExclude={data.leftTemperatureExclude}
-        key='dotandline'
+          key="dotandline"
-      />}
+        />
-
+      )}
     </Surface>
   )
 }
@@ -64,8 +67,8 @@ TemperatureColumn.propTypes = {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: 'white'
+    backgroundColor: 'white',
-  }
+  },
 })
 
 export default TemperatureColumn

components/chart/tick-list.js

@@ -7,12 +7,10 @@ import Tick from './tick'
 import { getTickList } from '../helpers/chart'
 
 const TickList = ({ height }) => {
-
   return (
     <View style={[styles.container, height]}>
-      {
+      {getTickList(height).map(
-        getTickList(height)
+        ({ isBold, label, position, shouldShowLabel, tickHeight }) => {
-          .map(({ isBold, label, position, shouldShowLabel, tickHeight}) => {
           return (
             <Tick
               height={tickHeight}
@@ -23,8 +21,8 @@ const TickList = ({ height }) => {
               yPosition={position}
             />
           )
-          })
         }
+      )}
     </View>
   )
 }
@@ -35,8 +33,8 @@ TickList.propTypes = {
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
-  }
+  },
 })
 
 export default TickList

components/chart/tick.js

@@ -5,13 +5,14 @@ import PropTypes from 'prop-types'
 import AppText from '../common/app-text'
 
 import { Sizes } from '../../styles'
+import { CHART_TICK_WIDTH } from '../../config'
 
 const Tick = ({ yPosition, height, isBold, shouldShowLabel, label }) => {
   const top = yPosition - height / 2
-  const containerStyle = [ styles.container, { flexBasis: height, height, top }]
+  const containerStyle = [styles.container, { flexBasis: height, height, top }]
   const textStyle = isBold ? styles.textBold : styles.textNormal
 
-  return(
+  return (
     <View style={containerStyle}>
       <AppText style={textStyle}>{shouldShowLabel && label}</AppText>
     </View>
@@ -26,28 +27,25 @@ Tick.propTypes = {
   label: PropTypes.string,
 }
 
-
 const text = {
-  lineHeight: Sizes.base,
+  textAlign: 'right',
-  right: 4,
-  textAlign: 'right'
 }
 const styles = StyleSheet.create({
   container: {
     justifyContent: 'center',
     position: 'absolute',
     right: 0,
-    width: 40
+    width: CHART_TICK_WIDTH,
   },
   textBold: {
     fontSize: Sizes.base,
     fontWeight: 'bold',
-    ...text
+    ...text,
   },
   textNormal: {
     fontSize: Sizes.small,
-    ...text
+    ...text,
-  }
+  },
 })
 
 export default Tick

components/chart/tutorial.js

@@ -13,7 +13,7 @@ const image = require('../../assets/swipe.png')
 const Tutorial = ({ onClose }) => {
   return (
     <View style={styles.container}>
-      <Image resizeMode='contain' source={image} style={styles.image} />
+      <Image resizeMode="contain" source={image} style={styles.image} />
       <View style={styles.textContainer}>
         <AppText>{chart.tutorial}</AppText>
       </View>
@@ -23,20 +23,20 @@ const Tutorial = ({ onClose }) => {
 }
 
 Tutorial.propTypes = {
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
 }
 
 const styles = StyleSheet.create({
   container: {
     ...Containers.rowContainer,
-    padding: Spacing.large
+    padding: Spacing.large,
   },
   image: {
-    height: 40
+    height: 40,
   },
   textContainer: {
-    width: '70%'
+    width: '70%',
-  }
+  },
 })
 
 export default Tutorial

components/chart/y-axis.js

@@ -13,7 +13,7 @@ const YAxis = ({
   symptomsToDisplay,
   symptomsSectionHeight,
   shouldShowTemperatureColumn,
-  xAxisHeight
+  xAxisHeight,
 }) => {
   const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length
 
@@ -21,15 +21,14 @@ const YAxis = ({
     <View>
       {shouldShowTemperatureColumn && <TickList height={height} />}
       <ChartLegend height={xAxisHeight} />
-      <View style={[styles.yAxis, {height: symptomsSectionHeight}]}>
+      <View style={[styles.yAxis, { height: symptomsSectionHeight }]}>
-        {symptomsToDisplay.map(symptom => (
+        {symptomsToDisplay.map((symptom) => (
           <SymptomIcon
             key={symptom}
             symptom={symptom}
             height={symptomIconHeight}
           />
-        )
+        ))}
-        )}
       </View>
     </View>
   )
@@ -40,13 +39,13 @@ YAxis.propTypes = {
   symptomsToDisplay: PropTypes.array,
   symptomsSectionHeight: PropTypes.number,
   shouldShowTemperatureColumn: PropTypes.bool,
-  xAxisHeight: PropTypes.number.isRequired
+  xAxisHeight: PropTypes.number.isRequired,
 }
 
 const styles = StyleSheet.create({
   yAxis: {
-    width: CHART_YAXIS_WIDTH
+    width: CHART_YAXIS_WIDTH,
-  }
+  },
 })
 
 export default YAxis

components/common/app-icon.js

@@ -14,17 +14,17 @@ const AppIcon = ({ color, name, style, ...props }) => {
 AppIcon.propTypes = {
   color: PropTypes.string,
   name: PropTypes.string.isRequired,
-  style: PropTypes.object
+  style: PropTypes.object,
 }
 
 AppIcon.defaultProps = {
-  color: 'black'
+  color: 'black',
 }
 
 const styles = StyleSheet.create({
   icon: {
-    fontSize: Sizes.subtitle
+    fontSize: Sizes.subtitle,
-  }
+  },
 })
 
 export default AppIcon

components/common/app-loading.js

@@ -17,8 +17,8 @@ const AppLoadingView = () => {
 
 const styles = StyleSheet.create({
   container: {
-    ...Containers.centerItems
+    ...Containers.centerItems,
-  }
+  },
 })
 
 export default AppLoadingView

components/common/app-modal.js

@@ -3,9 +3,9 @@ import { Modal, StyleSheet, TouchableOpacity } from 'react-native'
 import PropTypes from 'prop-types'
 
 const AppModal = ({ children, onClose }) => {
-  return(
+  return (
     <Modal
-      animationType='fade'
+      animationType="fade"
       onRequestClose={onClose}
       transparent={true}
       visible={true}
@@ -18,7 +18,7 @@ const AppModal = ({ children, onClose }) => {
 
 AppModal.propTypes = {
   children: PropTypes.node,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
 }
 
 const styles = StyleSheet.create({
@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'black',
     flex: 1,
     opacity: 0.5,
-  }
+  },
 })
 
 export default AppModal

components/common/app-page.js

@@ -13,7 +13,7 @@ const AppPage = ({
   title,
   ...props
 }) => {
-  return(
+  return (
     <View style={styles.container}>
       <ScrollView
         contentContainerStyle={[styles.scrollView, contentContainerStyle]}
@@ -31,21 +31,21 @@ AppPage.propTypes = {
   children: PropTypes.node,
   contentContainerStyle: PropTypes.object,
   scrollViewStyle: PropTypes.object,
-  title: PropTypes.string
+  title: PropTypes.string,
 }
 
 const styles = StyleSheet.create({
   container: {
     backgroundColor: Colors.turquoiseLight,
-    flex: 1
+    flex: 1,
   },
   scrollView: {
     backgroundColor: Colors.turquoiseLight,
-    flexGrow: 1
+    flexGrow: 1,
   },
   title: {
-    ...Typography.title
+    ...Typography.title,
-  }
+  },
 })
 
 export default AppPage

components/common/app-status-bar.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { SafeAreaView, StatusBar, StyleSheet, View } from 'react-native'
+
+import { Colors } from '../../styles'
+import { STATUSBAR_HEIGHT } from '../../config'
+
+const AppStatusBar = () => (
+  <View style={styles.statusBar}>
+    <SafeAreaView>
+      <StatusBar
+        backgroundColor={Colors.purple}
+        barStyle="light-content"
+        translucent
+      />
+    </SafeAreaView>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  statusBar: {
+    backgroundColor: Colors.purple,
+    height: STATUSBAR_HEIGHT,
+  },
+})
+
+export default AppStatusBar

components/common/app-switch.js

@@ -20,19 +20,19 @@ const AppSwitch = ({ onToggle, text, value }) => {
 AppSwitch.propTypes = {
   onToggle: PropTypes.func.isRequired,
   text: PropTypes.string,
-  value: PropTypes.bool
+  value: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({
   container: {
-    ...Containers.rowContainer
+    ...Containers.rowContainer,
   },
   switch: {
     flex: 1,
   },
   textContainer: {
     flex: 4,
-  }
+  },
 })
 
 export default AppSwitch

components/common/app-text-input.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 import { Colors, Spacing, Typography } from '../../styles'
 
 const AppTextInput = ({ style, isKeyboardOffset, ...props }) => {
-  const behavior = isKeyboardOffset ? "padding" : "height"
+  const behavior = isKeyboardOffset ? 'padding' : 'height'
   const keyboardVerticalOffset = isKeyboardOffset ? 300 : 0
 
   return (
@@ -38,8 +38,9 @@ const styles = StyleSheet.create({
     marginTop: Spacing.base,
     minWidth: '80%',
     paddingHorizontal: Spacing.base,
-    ...Typography.mainText
+    paddingVertical: Spacing.tiny,
-  }
+    ...Typography.mainText,
+  },
 })
 
 export default AppTextInput

components/common/app-text.js

@@ -26,8 +26,8 @@ AppText.propTypes = {
 const styles = StyleSheet.create({
   text: {
     color: Colors.greyDark,
-    ...Typography.mainText
+    ...Typography.mainText,
-  }
+  },
 })
 
 export default AppText

components/common/button-row.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
+
+const ButtonRow = ({ children }) => {
+  return <View style={styles.container}>{children}</View>
+}
+
+ButtonRow.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+})
+
+export default ButtonRow

components/common/button.js

@@ -5,7 +5,7 @@ import { StyleSheet, TouchableOpacity } from 'react-native'
 import AppIcon from './app-icon'
 import AppText from './app-text'
 
-import { Colors, Fonts, Spacing } from '../../styles'
+import { Colors, Fonts, Sizes, Spacing } from '../../styles'
 
 const Button = ({
   children,
@@ -39,49 +39,51 @@ Button.propTypes = {
   isCTA: PropTypes.bool,
   isSmall: PropTypes.bool,
   onPress: PropTypes.func,
-  testID: PropTypes.string
+  testID: PropTypes.string,
 }
 
 Button.defaultProps = {
-  isSmall: true
+  isSmall: true,
 }
 
 const text = {
   padding: Spacing.base,
-  textTransform: 'uppercase'
+  textTransform: 'uppercase',
 }
 
 const textSmall = {
-  fontSize: Fonts.small,
+  fontSize: Sizes.small,
   padding: Spacing.small,
-  textTransform: 'uppercase'
+  textTransform: 'uppercase',
 }
 
 const button = {
   alignItems: 'center',
+  alignSelf: 'center',
   flexDirection: 'row',
   justifyContent: 'center',
-  margin: Spacing.base,
+  marginTop: Spacing.base,
-  minWidth: '15%'
+  paddingHorizontal: Spacing.tiny,
+  minWidth: '15%',
 }
 
 const styles = StyleSheet.create({
   regular: {
-    ...button
+    ...button,
   },
   cta: {
     backgroundColor: Colors.orange,
     borderRadius: 25,
-    ...button
+    ...button,
   },
   buttonTextBold: {
     color: 'white',
-    fontFamily: Fonts.bold
+    fontFamily: Fonts.bold,
   },
   buttonTextRegular: {
     color: Colors.greyDark,
-    fontFamily: Fonts.main
+    fontFamily: Fonts.main,
-  }
+  },
 })
 
 export default Button

components/common/close-icon.js

@@ -4,29 +4,32 @@ import { StyleSheet, TouchableOpacity } from 'react-native'
 
 import AppIcon from './app-icon'
 
+import { HIT_SLOP } from '../../config'
 import { Colors, Sizes } from '../../styles'
 
-const CloseIcon = ({ onClose, ...props }) => {
+const CloseIcon = ({ onClose, color, ...props }) => {
   return (
     <TouchableOpacity
+      hitSlop={HIT_SLOP}
       onPress={onClose}
       style={styles.container}
       {...props}
     >
-      <AppIcon name='cross' color={Colors.orange} />
+      <AppIcon name="cross" color={color ? color : Colors.orange} />
     </TouchableOpacity>
   )
 }
 
 CloseIcon.propTypes = {
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
+  color: PropTypes.string,
 }
 
 const styles = StyleSheet.create({
   container: {
     alignSelf: 'flex-start',
-    marginBottom: Sizes.base
+    marginBottom: Sizes.base,
-  }
+  },
 })
 
 export default CloseIcon

components/common/link.js

@@ -21,7 +21,7 @@ const Link = ({ children, style }) => {
 
 Link.propTypes = {
   children: PropTypes.node,
-  style: PropTypes.object
+  style: PropTypes.object,
 }
 
 const styles = StyleSheet.create({
@@ -29,11 +29,11 @@ const styles = StyleSheet.create({
     color: Colors.purple,
     textDecorationLine: 'underline',
     ...Typography.mainText,
-  }
+  },
 })
 
 function replaceUrlWithText(url) {
-  const link = Object.values(links).find(l => l.url === url)
+  const link = Object.values(links).find((l) => l.url === url)
   return (link && link.text) || url
 }
 

components/common/menu-icon.js

@@ -15,7 +15,7 @@ const MenuIcon = ({ isActive, name }) => {
 
 MenuIcon.propTypes = {
   isActive: PropTypes.bool,
-  name: PropTypes.string.isRequired
+  name: PropTypes.string.isRequired,
 }
 
 export default MenuIcon

components/common/segment.js

@@ -43,7 +43,7 @@ const styles = StyleSheet.create({
   },
   title: {
     ...Typography.subtitle,
-  }
+  },
 })
 
 export default Segment

components/common/table.js

@@ -7,17 +7,17 @@ import AppText from './app-text'
 import { Sizes, Spacing, Typography } from '../../styles'
 
 const Table = ({ tableContent }) => {
-  return (
+  return tableContent.map((rowContent, i) => (
-    tableContent.map((rowContent, i) => <Row key={i} rowContent={rowContent} />)
+    <Row key={i} rowContent={rowContent} />
-  )
+  ))
 }
 
 Table.propTypes = {
-  tableContent: PropTypes.array.isRequired
+  tableContent: PropTypes.array.isRequired,
 }
 
 const Row = ({ rowContent }) => {
-  return(
+  return (
     <View style={styles.row}>
       <Cell content={rowContent[0]} isLeft />
       <Cell content={rowContent[1]} />
@@ -26,7 +26,7 @@ const Row = ({ rowContent }) => {
 }
 
 Row.propTypes = {
-  rowContent: PropTypes.array.isRequired
+  rowContent: PropTypes.array.isRequired,
 }
 
 const Cell = ({ content, isLeft }) => {
@@ -35,7 +35,7 @@ const Cell = ({ content, isLeft }) => {
   const numberOfLines = isLeft ? 1 : 2
   const ellipsizeMode = isLeft ? 'clip' : 'tail'
 
-  return(
+  return (
     <View style={styleContainer}>
       <AppText
         numberOfLines={numberOfLines}
@@ -57,10 +57,11 @@ const styles = StyleSheet.create({
   accentOrange: {
     ...Typography.accentOrange,
     fontSize: Sizes.small,
+    margin: Sizes.tiny,
   },
   accentPurpleBig: {
     ...Typography.accentPurpleBig,
-    marginRight: Spacing.small,
+    marginRight: Spacing.tiny,
   },
   cellLeft: {
     alignItems: 'flex-end',
@@ -68,13 +69,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   cellRight: {
-    flex: 6,
+    flex: 5,
     justifyContent: 'center',
   },
   row: {
     flexDirection: 'row',
     marginBottom: Spacing.tiny,
-  }
+    marginLeft: Spacing.tiny,
+  },
 })
 
 export default Table

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

@@ -1,87 +1,66 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
-import { LocalDate } from 'js-joda'
 
 import AppPage from '../common/app-page'
 import SymptomBox from './symptom-box'
 import SymptomPageTitle from './symptom-page-title'
 
-import { connect } from 'react-redux'
-import { getDate, setDate } from '../../slices/date'
-import { navigate } from '../../slices/navigation'
-
-import cycleModule from '../../lib/cycle'
-import { dateToTitle } from '../helpers/format-date'
 import { getCycleDay } from '../../db'
-import { getData } from '../helpers/cycle-day'
+import { getData, nextDate, prevDate } from '../helpers/cycle-day'
 
-import { general as labels} from '../../i18n/en/cycle-day'
 import { Spacing } from '../../styles'
 import { SYMPTOMS } from '../../config'
 
-class CycleDayOverView extends Component {
+const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
+  const cycleDay = getCycleDay(date)
 
-  static propTypes = {
+  const [editedSymptom, setEditedSymptom] = useState(
-    navigate: PropTypes.func,
+    isTemperatureEditView ? 'temperature' : ''
-    setDate: PropTypes.func,
+  )
-    cycleDay: PropTypes.object,
+
-    date: PropTypes.string,
+  const showNextCycleDay = () => {
-    isTemperatureEditView: PropTypes.bool,
+    setDate(nextDate(date))
   }
 
-  constructor(props) {
+  const showPrevCycleDay = () => {
-    super(props)
+    setDate(prevDate(date))
-
-    this.state = { cycleDay: getCycleDay(props.date), data: null }
-    if (props.isTemperatureEditView) {
-      const todayDateString = LocalDate.now().toString()
-      props.setDate(todayDateString)
   }
-  }
-
-  updateCycleDay = (date) => {
-    this.props.setDate(date)
-    this.setState({ cycleDay: getCycleDay(date) })
-  }
-
-  render() {
-    const { cycleDay } = this.state
-    const { date, isTemperatureEditView } = this.props
-
-    const { getCycleDayNumber } = cycleModule()
-    const cycleDayNumber = getCycleDayNumber(date)
-    const subtitle = cycleDayNumber && `${labels.cycleDayNumber}${cycleDayNumber}`
 
   return (
     <AppPage>
       <SymptomPageTitle
-          reloadSymptomData={this.updateCycleDay}
+        date={date}
-          subtitle={subtitle}
+        onNextCycleDay={showNextCycleDay}
-          title={dateToTitle(date)}
+        onPrevCycleDay={showPrevCycleDay}
       />
       <View style={styles.container}>
-          {SYMPTOMS.map(symptom => {
+        {SYMPTOMS.map((symptom) => {
-            const symptomData = cycleDay && cycleDay[symptom]
+          const symptomData =
-              ? cycleDay[symptom] : null
+            cycleDay && cycleDay[symptom] ? cycleDay[symptom] : null
 
-            const isSymptomEdited = isTemperatureEditView && symptom === 'temperature'
+          return (
-
-            return(
             <SymptomBox
+              date={date}
               key={symptom}
               symptom={symptom}
               symptomData={symptomData}
               symptomDataToDisplay={getData(symptom, symptomData)}
-                updateCycleDayData={this.updateCycleDay}
+              editedSymptom={editedSymptom}
-                isSymptomEdited={isSymptomEdited}
+              setEditedSymptom={setEditedSymptom}
             />
           )
         })}
       </View>
     </AppPage>
   )
-  }
+}
+
+CycleDayOverView.propTypes = {
+  cycleDay: PropTypes.object,
+  date: PropTypes.string,
+  setDate: PropTypes.func,
+  isTemperatureEditView: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({
@@ -89,24 +68,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap',
     justifyContent: 'space-between',
-    padding: Spacing.base
+    padding: Spacing.base,
-  }
+  },
 })
 
-const mapStateToProps = (state) => {
+export default CycleDayOverView
-  return({
-    date: getDate(state),
-  })
-}
-
-const mapDispatchToProps = (dispatch) => {
-  return({
-    setDate: (date) => dispatch(setDate(date)),
-    navigate: (page) => dispatch(navigate(page)),
-  })
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(CycleDayOverView)

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

@@ -9,7 +9,7 @@ import { Colors, Containers } from '../../styles'
 const SelectBoxGroup = ({ labels, optionsState, onSelect }) => {
   return (
     <View style={styles.container}>
-      {Object.keys(labels).map(key => {
+      {Object.keys(labels).map((key) => {
         const isActive = optionsState[key]
         const boxStyle = [styles.box, isActive && styles.boxActive]
         const textStyle = [styles.text, isActive && styles.textActive]
@@ -31,25 +31,25 @@ const SelectBoxGroup = ({ labels, optionsState, onSelect }) => {
 SelectBoxGroup.propTypes = {
   labels: PropTypes.object.isRequired,
   onSelect: PropTypes.func.isRequired,
-  optionsState: PropTypes.object.isRequired
+  optionsState: PropTypes.object.isRequired,
 }
 
 const styles = StyleSheet.create({
   box: {
-    ...Containers.box
+    ...Containers.box,
   },
   boxActive: {
-    ...Containers.boxActive
+    ...Containers.boxActive,
   },
   container: {
-    ...Containers.selectGroupContainer
+    ...Containers.selectGroupContainer,
   },
   text: {
-    color: Colors.orange
+    color: Colors.orange,
   },
   textActive: {
-    color: 'white'
+    color: 'white',
-  }
+  },
 })
 
 export default SelectBoxGroup

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

@@ -9,8 +9,7 @@ import { Colors, Containers } from '../../styles'
 export default function SelectTabGroup({ activeButton, buttons, onSelect }) {
   return (
     <View style={styles.container}>
-      {
+      {buttons.map(({ label, value }, i) => {
-        buttons.map(({ label, value }, i) => {
         const isActive = value === activeButton
         const boxStyle = [styles.box, isActive && styles.boxActive]
         const textStyle = [styles.text, isActive && styles.textActive]
@@ -24,8 +23,7 @@ export default function SelectTabGroup({ activeButton, buttons, onSelect }) {
             <AppText style={textStyle}>{label}</AppText>
           </TouchableOpacity>
         )
-        })
+      })}
-      }
     </View>
   )
 }
@@ -33,23 +31,23 @@ export default function SelectTabGroup({ activeButton, buttons, onSelect }) {
 SelectTabGroup.propTypes = {
   activeButton: PropTypes.number,
   buttons: PropTypes.array.isRequired,
-  onSelect: PropTypes.func.isRequired
+  onSelect: PropTypes.func.isRequired,
 }
 
 const styles = StyleSheet.create({
   box: {
-    ...Containers.box
+    ...Containers.box,
   },
   boxActive: {
-    ...Containers.boxActive
+    ...Containers.boxActive,
   },
   container: {
-    ...Containers.selectGroupContainer
+    ...Containers.selectGroupContainer,
   },
   text: {
-    color: Colors.orange
+    color: Colors.orange,
   },
   textActive: {
-    color: 'white'
+    color: 'white',
-  }
+  },
 })

components/cycle-day/symptom-box.js

@@ -1,55 +1,26 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View, TouchableOpacity } from 'react-native'
+import { scale } from 'react-native-size-matters'
 
 import AppText from '../common/app-text'
 import DripIcon from '../../assets/drip-icons'
 import SymptomEditView from './symptom-edit-view'
 
-import { connect } from 'react-redux'
-import { getDate } from '../../slices/date'
 import { isDateInFuture } from '../helpers/cycle-day'
 
 import { Colors, Sizes, Spacing } from '../../styles'
 import { headerTitles as symptomTitles } from '../../i18n/en/labels'
 
-class SymptomBox extends Component {
+const SymptomBox = ({
-
+  date,
-  static propTypes = {
+  symptom,
-    date: PropTypes.string.isRequired,
+  symptomData,
-    isSymptomEdited: PropTypes.bool,
+  symptomDataToDisplay,
-    symptom: PropTypes.string.isRequired,
+  editedSymptom,
-    symptomData: PropTypes.object,
+  setEditedSymptom,
-    symptomDataToDisplay: PropTypes.string,
+}) => {
-    updateCycleDayData: PropTypes.func.isRequired,
+  const isSymptomEdited = editedSymptom === symptom
-  }
-
-  static defaultProps = {
-    isSymptomEdited: false,
-  }
-
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      isSymptomEdited: props.isSymptomEdited
-    }
-  }
-
-  onFinishEditing = () => {
-    const { date, updateCycleDayData } = this.props
-
-    updateCycleDayData(date)
-    this.setState({ isSymptomEdited: false })
-  }
-
-  onEditSymptom = () => {
-    this.setState({ isSymptomEdited: true })
-  }
-
-  render() {
-    const { date, symptom, symptomData, symptomDataToDisplay } = this.props
-    const { isSymptomEdited } = this.state
   const isSymptomDisabled = isDateInFuture(date) && symptom !== 'note'
   const isExcluded = symptomData !== null ? symptomData.exclude : false
 
@@ -57,28 +28,29 @@ class SymptomBox extends Component {
   const iconName = `drip-icon-${symptom}`
   const symptomNameStyle = [
     styles.symptomName,
-      (isSymptomDisabled && styles.symptomNameDisabled),
+    isSymptomDisabled && styles.symptomNameDisabled,
-      (isExcluded && styles.symptomNameExcluded)
+    isExcluded && styles.symptomNameExcluded,
   ]
   const textStyle = [
     styles.text,
-      (isSymptomDisabled && styles.textDisabled),
+    isSymptomDisabled && styles.textDisabled,
-      (isExcluded && styles.textExcluded)
+    isExcluded && styles.textExcluded,
   ]
 
   return (
-      <React.Fragment>
+    <>
-        {isSymptomEdited &&
+      {isSymptomEdited && (
         <SymptomEditView
+          date={date}
           symptom={symptom}
           symptomData={symptomData}
-            onClose={this.onFinishEditing}
+          onClose={() => setEditedSymptom('')}
         />
-        }
+      )}
 
       <TouchableOpacity
         disabled={isSymptomDisabled}
-          onPress={this.onEditSymptom}
+        onPress={() => setEditedSymptom(symptom)}
         style={styles.container}
         testID={iconName}
       >
@@ -86,83 +58,73 @@ class SymptomBox extends Component {
           color={iconColor}
           isActive={!isSymptomDisabled}
           name={iconName}
-            size={40}
+          size={Sizes.icon}
         />
         <View style={styles.textContainer}>
           <AppText style={symptomNameStyle}>
             {symptomTitles[symptom].toLowerCase()}
           </AppText>
-            {symptomDataToDisplay &&
+          {symptomDataToDisplay && (
             <AppText style={textStyle} numberOfLines={4}>
               {symptomDataToDisplay}
             </AppText>
-            }
+          )}
         </View>
       </TouchableOpacity>
-      </React.Fragment>
+    </>
   )
-  }
 }
 
-const hint = {
+SymptomBox.propTypes = {
-  fontSize: Sizes.small,
+  date: PropTypes.string.isRequired,
-  fontStyle: 'italic'
+  symptom: PropTypes.string.isRequired,
-}
+  symptomData: PropTypes.object,
-
+  symptomDataToDisplay: PropTypes.string,
-const main = {
+  editedSymptom: PropTypes.string.isRequired,
-  fontSize: Sizes.base,
+  setEditedSymptom: PropTypes.func.isRequired,
-  height: Sizes.base * 2,
-  lineHeight: Sizes.base,
-  marginBottom: (-1) * Sizes.tiny,
-  textAlignVertical: 'center'
 }
 
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     backgroundColor: 'white',
-    borderRadius: 10,
+    borderRadius: scale(10),
     elevation: 4,
     flexDirection: 'row',
-    height: 110,
+    height: scale(110),
     marginBottom: Spacing.base,
     paddingHorizontal: Spacing.small,
     paddingVertical: Spacing.base,
-    width: Spacing.symptomTileWidth
+    width: Spacing.symptomTileWidth,
   },
   symptomName: {
+    paddingTop: Sizes.tiny,
     color: Colors.purple,
-    ...main
+    fontSize: Sizes.base,
+    lineHeight: Sizes.base,
   },
   symptomNameDisabled: {
-    color: Colors.grey
+    color: Colors.grey,
   },
   symptomNameExcluded: {
     color: Colors.greyDark,
   },
   textContainer: {
     flexDirection: 'column',
-    marginLeft: Spacing.small,
+    justifyContent: 'center',
-    maxWidth: Spacing.textWidth
+    marginLeft: Spacing.tiny,
+    maxWidth: Spacing.textWidth,
   },
   text: {
-    ...hint
+    fontSize: Sizes.small,
+    fontStyle: 'italic',
   },
   textDisabled: {
-    color: Colors.greyLight
+    color: Colors.greyLight,
   },
   textExcluded: {
     color: Colors.grey,
-  }
+  },
 })
 
-const mapStateToProps = (state) => {
+export default SymptomBox
-  return({
-    date: getDate(state),
-  })
-}
-
-export default connect(
-  mapStateToProps,
-  null,
-)(SymptomBox)

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { Dimensions, ScrollView, StyleSheet, View } from 'react-native'
 
@@ -13,275 +13,245 @@ import SelectBoxGroup from './select-box-group'
 import SelectTabGroup from './select-tab-group'
 import Temperature from './temperature'
 
-import { connect } from 'react-redux'
-import { getDate } from '../../slices/date'
 import { blank, save, shouldShow, symtomPage } from '../helpers/cycle-day'
+import { showToast } from '../helpers/general'
 
 import { shared as sharedLabels } from '../../i18n/en/labels'
 import info from '../../i18n/en/symptom-info'
 import { Colors, Containers, Sizes, Spacing } from '../../styles'
 
-class SymptomEditView extends Component {
+const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
-
-  static propTypes = {
-    date: PropTypes.string.isRequired,
-    onClose: PropTypes.func.isRequired,
-    symptom: PropTypes.string.isRequired,
-    symptomData: PropTypes.object
-  }
-
-  constructor(props) {
-    super(props)
-
-    const { symptomData, symptom } = this.props
-    const data = symptomData ? symptomData : blank[symptom]
-
   const symptomConfig = symtomPage[symptom]
-    const shouldShowExclude = shouldShow(symptomConfig.excludeText)
+  const [data, setData] = useState(symptomData ? symptomData : blank[symptom])
-    const shouldShowNote = shouldShow(symptomConfig.note)
+  const [shouldShowInfo, setShouldShowInfo] = useState(false)
-    const shouldBoxGroup = shouldShow(symptomConfig.selectBoxGroups)
+  const getParsedData = () => JSON.parse(JSON.stringify(data))
-    const shouldTabGroup = shouldShow(symptomConfig.selectTabGroups)
+  const onPressLearnMore = () => setShouldShowInfo(!shouldShowInfo)
 
-    this.state = {
+  const onEditNote = (note) => {
-      data,
+    const parsedData = getParsedData()
-      shouldShowExclude,
-      shouldShowInfo: false,
-      shouldShowNote,
-      shouldBoxGroup,
-      shouldTabGroup
-    }
-  }
-
-  componentDidUpdate() {
-    this.saveData()
-  }
-
-  getParsedData = () => JSON.parse(JSON.stringify(this.state.data))
-
-  onEditNote = (note) => {
-    const data = this.getParsedData()
-    const { symptom } = this.props
 
     if (symptom === 'note') {
-      Object.assign(data, { value: note })
+      Object.assign(parsedData, { value: note })
     } else {
-      data['note'] = note
+      parsedData['note'] = note
     }
 
-    this.setState({ data })
+    setData(parsedData)
   }
 
-  onExcludeToggle = () => {
+  const onExcludeToggle = () => {
-    const data = this.getParsedData()
+    const parsedData = getParsedData()
-    Object.assign(data, { exclude: !data.exclude })
 
-    this.setState({ data })
+    Object.assign(parsedData, { exclude: !parsedData.exclude })
+
+    setData(parsedData)
   }
 
-  onPressLearnMore = () => {
+  const onRemove = () => {
-    this.setState({ shouldShowInfo: !this.state.shouldShowInfo })
+    save[symptom](data, date, true)
+    showToast(sharedLabels.dataDeleted)
+    onClose()
   }
 
-  onRemove = () => {
+  const onSave = () => {
-    this.saveData(true)
+    const hasDataChanged = () => {
-    this.props.onClose()
+      const initialData = symptomData ? symptomData : blank[symptom]
+
+      return JSON.stringify(data) !== JSON.stringify(initialData)
     }
 
-  onSave = () => {
+    if (hasDataChanged()) {
-    this.saveData()
+      save[symptom](data, date, false)
-    this.props.onClose()
+      showToast(sharedLabels.dataSaved)
     }
 
-  onSaveTemperature = (value, field) => {
+    onClose()
-    const data = this.getParsedData()
-    const dataToSave = field === 'value'
-      ? { [field]: Number(value) } : { [field]: value }
-    Object.assign(data, { ...dataToSave })
-
-    this.setState({ data })
   }
 
-  onSelectBox = (key) => {
+  const onSaveTemperature = (value, field) => {
-    const data = this.getParsedData()
+    const parsedData = getParsedData()
-    if (key === "other") {
+    const dataToSave =
-      Object.assign(data, {
+      field === 'value' ? { [field]: Number(value) } : { [field]: value }
+
+    Object.assign(parsedData, { ...dataToSave })
+
+    setData(parsedData)
+  }
+
+  const onSelectBox = (key) => {
+    const parsedData = getParsedData()
+    if (key === 'other') {
+      Object.assign(parsedData, {
         note: null,
-        [key]: !this.state.data[key]
+        [key]: !data[key],
       })
     } else {
-      Object.assign(data, { [key]: !this.state.data[key] })
+      Object.assign(parsedData, { [key]: !data[key] })
     }
 
-    this.setState({ data })
+    setData(parsedData)
   }
 
-  onSelectBoxNote= (value) => {
+  const onSelectBoxNote = (value) => {
-    const data = this.getParsedData()
+    const parsedData = getParsedData()
-    Object.assign(data, { note: value !== '' ? value : null })
 
-    this.setState({ data })
+    Object.assign(parsedData, { note: value !== '' ? value : null })
+
+    setData(parsedData)
   }
 
-  onSelectTab = (group, value) => {
+  const onSelectTab = (group, value) => {
-    const data = this.getParsedData()
+    const parsedData = getParsedData()
-    Object.assign(data, { [group.key]: value })
 
-    this.setState({ data })
+    Object.assign(parsedData, { [group.key]: value })
+
+    setData(parsedData)
   }
-
+  const iconName = shouldShowInfo ? 'chevron-up' : 'chevron-down'
-  saveData = (shouldDeleteData) => {
-    const { date, symptom } = this.props
-    const { data } = this.state
-    save[symptom](data, date, shouldDeleteData)
-  }
-
-  render() {
-    const { onClose, symptom } = this.props
-    const { data,
-      shouldShowExclude,
-      shouldShowInfo,
-      shouldShowNote,
-      shouldBoxGroup,
-      shouldTabGroup
-    } = this.state
-    const iconName = shouldShowInfo ? "chevron-down" : "chevron-up"
   const noteText = symptom === 'note' ? data.value : data.note
 
   return (
-      <AppModal onClose={onClose}>
+    <AppModal onClose={onSave}>
+      <View style={styles.modalWindow}>
+        <View style={styles.headerContainer}>
+          <CloseIcon onClose={onSave} />
+        </View>
         <ScrollView
           contentContainerStyle={styles.modalContainer}
-          style={styles.modalWindow}
+          keyboardDismissMode="on-drag"
         >
-          <View style={styles.headerContainer}>
+          {symptom === 'temperature' && (
-            <CloseIcon onClose={onClose} />
-          </View>
-          {symptom === 'temperature' &&
             <Temperature
+              date={date}
               data={data}
-              save={(value, field) => this.onSaveTemperature(value, field)}
+              save={(value, field) => onSaveTemperature(value, field)}
             />
-          }
+          )}
-          {shouldTabGroup && symtomPage[symptom].selectTabGroups.map(group => {
+          {shouldShow(symptomConfig.selectTabGroups) &&
+            symtomPage[symptom].selectTabGroups.map((group) => {
               return (
                 <Segment key={group.key} style={styles.segmentBorder}>
                   <AppText style={styles.title}>{group.title}</AppText>
                   <SelectTabGroup
                     activeButton={data[group.key]}
                     buttons={group.options}
-                  onSelect={value => this.onSelectTab(group, value)}
+                    onSelect={(value) => onSelectTab(group, value)}
                   />
                 </Segment>
               )
-          })
+            })}
-          }
+          {shouldShow(symptomConfig.selectBoxGroups) &&
-          {shouldBoxGroup && symtomPage[symptom].selectBoxGroups.map(group => {
+            symtomPage[symptom].selectBoxGroups.map((group) => {
               const isOtherSelected =
-              data['other'] !== null
+                data['other'] !== null &&
-              && data['other'] !== false
+                data['other'] !== false &&
-              && Object.keys(group.options).includes('other')
+                Object.keys(group.options).includes('other')
 
               return (
-              <Segment key={group.key} style={styles.segmentBorder} >
+                <Segment key={group.key} style={styles.segmentBorder}>
                   <AppText style={styles.title}>{group.title}</AppText>
                   <SelectBoxGroup
                     labels={group.options}
-                  onSelect={value => this.onSelectBox(value)}
+                    onSelect={(value) => onSelectBox(value)}
                     optionsState={data}
                   />
-                {isOtherSelected &&
+                  {isOtherSelected && (
                     <AppTextInput
                       multiline={true}
                       placeholder={sharedLabels.enter}
                       value={data.note}
-                    onChangeText={value => this.onSelectBoxNote(value)}
+                      onChangeText={(value) => onSelectBoxNote(value)}
                     />
-                }
+                  )}
                 </Segment>
               )
-          })
+            })}
-          }
+          {shouldShow(symptomConfig.excludeText) && (
-          {shouldShowExclude &&
+            <Segment style={styles.segmentBorder}>
-            <Segment style={styles.segmentBorder} >
               <AppSwitch
-                onToggle={this.onExcludeToggle}
+                onToggle={onExcludeToggle}
                 text={symtomPage[symptom].excludeText}
                 value={data.exclude}
               />
             </Segment>
-          }
+          )}
-          {shouldShowNote &&
+          {shouldShow(symptomConfig.note) && (
-            <Segment style={styles.segmentBorder} >
+            <Segment style={styles.segmentBorder}>
               <AppText>{symtomPage[symptom].note}</AppText>
               <AppTextInput
                 multiline={true}
                 numberOfLines={3}
-                onChangeText={this.onEditNote}
+                onChangeText={onEditNote}
                 placeholder={sharedLabels.enter}
-                testID='noteInput'
+                testID="noteInput"
                 value={noteText !== null ? noteText : ''}
               />
             </Segment>
-          }
+          )}
           <View style={styles.buttonsContainer}>
-            <Button iconName={iconName} isSmall onPress={this.onPressLearnMore}>
+            <Button iconName={iconName} isSmall onPress={onPressLearnMore}>
               {sharedLabels.learnMore}
             </Button>
-            <Button isSmall onPress={this.onRemove}>
+            <Button isSmall onPress={onRemove}>
               {sharedLabels.remove}
             </Button>
-            <Button isCTA isSmall onPress={this.onSave}>
+            <Button isCTA isSmall onPress={onSave}>
               {sharedLabels.save}
             </Button>
           </View>
-          {shouldShowInfo &&
+          {shouldShowInfo && (
-            <Segment last style={styles.segmentBorder} >
+            <Segment last style={styles.segmentBorder}>
               <AppText>{info[symptom].text}</AppText>
             </Segment>
-          }
+          )}
         </ScrollView>
+      </View>
     </AppModal>
   )
-  }
+}
+
+SymptomEditView.propTypes = {
+  date: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  symptom: PropTypes.string.isRequired,
+  symptomData: PropTypes.object,
 }
 
 const styles = StyleSheet.create({
   buttonsContainer: {
-    ...Containers.rowContainer
+    ...Containers.rowContainer,
+    paddingHorizontal: Spacing.base,
+    paddingBottom: Spacing.base,
   },
   headerContainer: {
     flexDirection: 'row',
     justifyContent: 'flex-end',
-    paddingVertical: Spacing.tiny,
+    paddingTop: Spacing.base,
+    paddingHorizontal: Spacing.base,
+    position: 'absolute',
+    width: '100%',
+    zIndex: 3, // works on ios
+    elevation: 3, // works on android
   },
   modalContainer: {
-    flex: 1,
+    paddingHorizontal: Spacing.base,
-    padding: Spacing.base,
   },
   modalWindow: {
     alignSelf: 'center',
     backgroundColor: 'white',
     borderRadius: 10,
-    marginVertical: Sizes.huge * 2,
+    marginTop: Sizes.huge * 2,
+    paddingTop: Spacing.large * 2,
     position: 'absolute',
     minHeight: '40%',
-    maxHeight: Dimensions.get('window').height * 0.7
+    maxHeight: Dimensions.get('window').height * 0.7,
   },
   segmentBorder: {
-    borderBottomColor: Colors.greyLight
+    borderBottomColor: Colors.greyLight,
   },
   title: {
-    fontSize: Sizes.subtitle
+    fontSize: Sizes.subtitle,
-  }
+  },
 })
 
-const mapStateToProps = (state) => {
+export default SymptomEditView
-  return({
-    date: getDate(state),
-  })
-}
-
-export default connect(
-  mapStateToProps,
-  null,
-)(SymptomEditView)

components/cycle-day/symptom-page-title.js

@@ -5,37 +5,34 @@ import { StyleSheet, TouchableOpacity, View } from 'react-native'
 import AppIcon from '../common/app-icon'
 import AppText from '../common/app-text'
 
-import { connect } from 'react-redux'
+import cycleModule from '../../lib/cycle'
-import { getDate, setDate } from '../../slices/date'
+import { dateToTitle } from '../helpers/format-date'
 
-import { nextDate, prevDate } from '../helpers/cycle-day'
+import { general as labels } from '../../i18n/en/cycle-day'
 import { Colors, Containers, Spacing, Typography } from '../../styles'
 import { HIT_SLOP } from '../../config'
 
-const SymptomPageTitle = ({
+const SymptomPageTitle = ({ date, onNextCycleDay, onPrevCycleDay }) => {
-  date,
+  const title = dateToTitle(date)
-  reloadSymptomData,
+
-  setDate,
+  const { getCycleDayNumber } = cycleModule()
-  subtitle,
+  const cycleDayNumber = getCycleDayNumber(date)
-  title,
+  const subtitle = cycleDayNumber && `${labels.cycleDayNumber}${cycleDayNumber}`
-}) => {
+
-  const navigate = (isForward) => {
+  const formattedTitle =
-    const nextDay = isForward ? nextDate(date) : prevDate(date)
+    title.length > 21 ? title.substring(0, 18) + '...' : title
-    reloadSymptomData(nextDay)
-    setDate(nextDay)
-  }
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity onPress={() => navigate(false)} hitSlop={HIT_SLOP}>
+      <TouchableOpacity onPress={onPrevCycleDay} hitSlop={HIT_SLOP}>
-        <AppIcon name='chevron-left' color={Colors.orange}/>
+        <AppIcon name="chevron-left" color={Colors.orange} />
       </TouchableOpacity>
       <View style={styles.textContainer}>
-        <AppText style={styles.title}>{title}</AppText>
+        <AppText style={styles.title}>{formattedTitle}</AppText>
         {subtitle && <AppText style={styles.subtitle}>{subtitle}</AppText>}
       </View>
-      <TouchableOpacity onPress={() => navigate(true)} hitSlop={HIT_SLOP}>
+      <TouchableOpacity onPress={onNextCycleDay} hitSlop={HIT_SLOP}>
-        <AppIcon name='chevron-right' color={Colors.orange}/>
+        <AppIcon name="chevron-right" color={Colors.orange} />
       </TouchableOpacity>
     </View>
   )
@@ -43,10 +40,8 @@ const SymptomPageTitle = ({
 
 SymptomPageTitle.propTypes = {
   date: PropTypes.string.isRequired,
-  reloadSymptomData: PropTypes.func.isRequired,
+  onNextCycleDay: PropTypes.func.isRequired,
-  setDate: PropTypes.func.isRequired,
+  onPrevCycleDay: PropTypes.func.isRequired,
-  subtitle: PropTypes.string,
-  title: PropTypes.string,
 }
 
 const styles = StyleSheet.create({
@@ -64,16 +59,4 @@ const styles = StyleSheet.create({
   },
 })
 
-const mapStateToProps = (state) => {
+export default SymptomPageTitle
-  return {
-    date: getDate(state),
-  }
-}
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    setDate: (date) => dispatch(setDate(date)),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(SymptomPageTitle)

components/cycle-day/temperature.js

@@ -1,96 +1,62 @@
-import React, { Component } from 'react'
+import React, { useEffect, useState } from 'react'
-import { StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 import { Keyboard } from 'react-native'
-import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
+import DateTimePicker from 'react-native-modal-datetime-picker'
 import moment from 'moment'
+import { useTranslation } from 'react-i18next'
 
 import AppText from '../common/app-text'
 import AppTextInput from '../common/app-text-input'
 import Segment from '../common/segment'
 
-import { connect } from 'react-redux'
+import {
-import { getDate } from '../../slices/date'
+  getTemperatureOutOfRangeMessage,
-import { isTemperatureOutOfRange, isPreviousTemperature } from '../helpers/cycle-day'
+  getPreviousTemperature,
+  formatTemperature,
+} from '../helpers/cycle-day'
 
 import { temperature as labels } from '../../i18n/en/cycle-day'
 
 import { Colors, Containers, Sizes, Spacing } from '../../styles'
 
-const formatTemperature = value => value === null
+const Temperature = ({ data, date, save }) => {
-  ? value
+  const { t } = useTranslation()
-  : Number.parseFloat(value).toFixed(2)
+  const [isTimePickerVisible, setIsTimePickerVisible] = useState(false)
+  const [temperature, setTemperature] = useState(
+    formatTemperature(data.value) || getPreviousTemperature(date)
+  )
 
-class Temperature extends Component {
+  // update state in parent component once to ensure
+  // that pre-filled values are saved on button click
+  useEffect(() => {
+    if (temperature) {
+      save(temperature, 'value')
+    }
+  }, [])
 
-  static propTypes = {
+  function onChangeTemperature(value) {
-    data: PropTypes.object,
+    const formattedValue = value.replace(',', '.').trim()
-    date: PropTypes.string.isRequired,
+    if (!Number(formattedValue) && value !== '') return false
-    save: PropTypes.func
+    setTemperature(formattedValue)
   }
 
-  constructor(props) {
+  function onShowTimePicker() {
-    super(props)
-
-    const { data, date } = this.props
-    const { value } = data
-    const { shouldShowSuggestion, suggestedTemperature } =
-      isPreviousTemperature(date)
-
-    this.state = {
-      isTimePickerVisible: false,
-      shouldShowSuggestion,
-      suggestedTemperature: formatTemperature(suggestedTemperature),
-      value: formatTemperature(value)
-    }
-  }
-
-  onCancelTimePicker = () => {
-    this.setState({ isTimePickerVisible: false })
-  }
-
-  onChangeTemperature = (value) => {
-    if (!Number(value)) return false
-
-    this.setState({
-      value: value.trim(),
-      shouldShowSuggestion: false
-    })
-  }
-
-  onShowTimePicker = () => {
     Keyboard.dismiss()
-    this.setState({ isTimePickerVisible: true })
+    setIsTimePickerVisible(true)
   }
 
-  setTemperature = () => {
+  function setTime(jsDate) {
-    const { value } = this.state
-    this.props.save(value, 'value')
-  }
-
-  setTime = (jsDate) => {
     const time = moment(jsDate).format('HH:mm')
-    const isTimePickerVisible = false
 
-    this.props.save(time, 'time')
+    save(time, 'time')
-    this.setState({ isTimePickerVisible })
+    setIsTimePickerVisible(false)
   }
 
-  render() {
+  const { time } = data
-    const { shouldShowSuggestion, suggestedTemperature, value } = this.state
-    const { time } = this.props.data
 
-    const inputStyle = (shouldShowSuggestion && value === null)
+  const inputStyle = { color: Colors.greyDark }
-      ? { color: Colors.grey }
+  const outOfRangeWarning = getTemperatureOutOfRangeMessage(temperature)
-      : {color: Colors.greyDark}
-    const outOfRangeWarning = isTemperatureOutOfRange(value)
-    let temperatureToShow = null
-
-    if (value) {
-      temperatureToShow = value
-    } else if (shouldShowSuggestion) {
-      temperatureToShow = suggestedTemperature
-    }
 
   return (
     <React.Fragment>
@@ -98,9 +64,9 @@ class Temperature extends Component {
         <AppText style={styles.title}>{labels.temperature.explainer}</AppText>
         <View style={styles.container}>
           <AppTextInput
-              value={temperatureToShow === null ? '' : temperatureToShow}
+            value={temperature}
-              onChangeText={this.onChangeTemperature}
+            onChangeText={onChangeTemperature}
-              onEndEditing={this.setTemperature}
+            onEndEditing={() => save(temperature, 'value')}
             keyboardType="numeric"
             maxLength={5}
             style={inputStyle}
@@ -109,55 +75,52 @@ class Temperature extends Component {
           />
           <AppText>°C</AppText>
         </View>
-          { outOfRangeWarning !== null &&
+        {!!outOfRangeWarning && (
           <View style={styles.hintContainer}>
             <AppText style={styles.hint}>{outOfRangeWarning}</AppText>
           </View>
-          }
+        )}
       </Segment>
       <Segment>
         <AppText style={styles.title}>{labels.time}</AppText>
         <AppTextInput
-            onFocus={this.onShowTimePicker}
+          onFocus={onShowTimePicker}
-            testID='timeInput'
+          testID="timeInput"
           value={time}
         />
         <DateTimePicker
-            isVisible={this.state.isTimePickerVisible}
+          isVisible={isTimePickerVisible}
           mode="time"
-            onConfirm={this.setTime}
+          onConfirm={setTime}
-            onCancel={this.onCancelTimePicker}
+          onCancel={() => setIsTimePickerVisible(false)}
+          display={Platform.OS === 'ios' ? 'spinner' : 'default'}
+          headerTextIOS={t('labels.shared.dateTimePickerTitle')}
         />
       </Segment>
     </React.Fragment>
   )
-  }
 }
 
 const styles = StyleSheet.create({
   container: {
-    ...Containers.rowContainer
+    ...Containers.rowContainer,
   },
   hint: {
     fontStyle: 'italic',
-    fontSize: Sizes.small
+    fontSize: Sizes.small,
   },
   hintContainer: {
-    marginVertical: Spacing.tiny
+    marginVertical: Spacing.tiny,
   },
   title: {
-    fontSize: Sizes.subtitle
+    fontSize: Sizes.subtitle,
-  }
+  },
 })
 
-
+Temperature.propTypes = {
-const mapStateToProps = (state) => {
+  data: PropTypes.object.isRequired,
-  return({
+  date: PropTypes.string.isRequired,
-    date: getDate(state),
+  save: PropTypes.func.isRequired,
-  })
 }
 
-export default connect(
+export default Temperature
-  mapStateToProps,
-  null,
-)(Temperature)

components/header/hamburger-menu.js

@@ -1,7 +1,15 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
-import { Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
+import {
+  Modal,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import PropTypes from 'prop-types'
 
 import AppIcon from '../common/app-icon'
+import CloseIcon from '../common/close-icon'
 import MenuItem from './menu-item'
 
 import { Colors, Sizes } from '../../styles'
@@ -14,60 +22,47 @@ const settingsMenuItems = [
   { name: menuItems.settings, component: 'SettingsMenu' },
   { name: menuItems.about, component: 'About' },
   { name: menuItems.license, component: 'License' },
+  { name: menuItems.privacyPolicy, component: 'PrivacyPolicy' },
 ]
 
-export default class HamburgerMenu extends Component {
+const HamburgerMenu = ({ navigate }) => {
-  constructor(props) {
+  const [isOpen, setIsOpen] = useState(false)
-    super(props)
+  const closeMenu = () => setIsOpen(false)
 
-    this.state = { shouldShowMenu: false }
+  if (!isOpen)
-  }
+    return (
-
+      <TouchableOpacity onPress={() => setIsOpen(true)} hitSlop={HIT_SLOP}>
-  toggleMenu = () => {
+        <AppIcon name="dots-three-vertical" color={Colors.orange} />
-    this.setState({ shouldShowMenu: !this.state.shouldShowMenu })
+      </TouchableOpacity>
-  }
+    )
-
-  render() {
-    const { shouldShowMenu } = this.state
 
   return (
-      <React.Fragment>
+    <Modal animationType="fade" onRequestClose={closeMenu} transparent={true}>
-        {!shouldShowMenu && (
-          <TouchableOpacity onPress={this.toggleMenu} hitSlop={HIT_SLOP}>
-            <AppIcon name='dots-three-vertical' color={Colors.orange} />
-          </TouchableOpacity>
-        )}
-        {shouldShowMenu && (
-          <Modal
-            animationType='fade'
-            onRequestClose={this.toggleMenu}
-            transparent={true}
-            visible={shouldShowMenu}
-          >
       <TouchableOpacity
-              onPress={this.toggleMenu}
+        onPress={closeMenu}
         style={styles.blackBackground}
       ></TouchableOpacity>
       <View style={styles.menu}>
-              <TouchableOpacity
+        <View style={styles.iconContainer}>
-                onPress={this.toggleMenu}
+          <CloseIcon color={'black'} onClose={closeMenu} />
-                style={styles.iconContainer}
+        </View>
-              >
-                <AppIcon name='cross' color='black' />
-              </TouchableOpacity>
         {settingsMenuItems.map((item) => (
           <MenuItem
             item={item}
             key={item.name}
-                  closeMenu={this.toggleMenu}
+            closeMenu={closeMenu}
+            navigate={navigate}
           />
         ))}
       </View>
     </Modal>
-        )}
-      </React.Fragment>
   )
-  }
+}
+
+export default HamburgerMenu
+
+HamburgerMenu.propTypes = {
+  navigate: PropTypes.func,
 }
 
 const styles = StyleSheet.create({
@@ -85,6 +80,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     height: '100%',
     padding: Sizes.base,
+    paddingTop: Platform.OS === 'ios' ? Sizes.huge : Sizes.base,
     position: 'absolute',
     width: '60%',
   },