Setting for ITSAppUsesNonExemptEncryption

Bump version number 1.2208.11
Merge branch 'fix/replace-app-restart' into 'release'
2022-08-11 08:29:26 +02:00 · 2022-08-11 08:20:25 +02:00 · 2022-08-11 06:16:17 +00:00 · 2022-08-10 14:35:36 +00:00 · 2022-08-10 16:24:37 +02:00 · 2022-08-10 16:24:37 +02:00
237 changed files with 16481 additions and 14795 deletions
@@ -0,0 +1,3 @@
+{
+  "presets": ["module:metro-react-native-babel-preset"],
+}
@@ -1,2 +0,0 @@
-BUNDLE_PATH: "vendor/bundle"
-BUNDLE_FORCE_RUBY_PLATFORM: 1
@@ -3,7 +3,7 @@ module.exports = {
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  env: {
    node: true,
-    jest: true,
+    mocha: true,
    es6: true,
  },
  parser: '@babel/eslint-parser',
@@ -23,6 +23,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
+xcshareddata
 ios/Index/DataStore

 # Android/IntelliJ
@@ -30,14 +31,14 @@ ios/Index/DataStore
 build/
 .idea
 .gradle
-*.properties
+local.properties
 *.iml
-*.hprof

 # node.js
 #
 node_modules/
 npm-debug.log
+yarn-error.log

 # BUCK
 buck-out/
@@ -59,9 +60,8 @@ buck-out/
 # Bundle artifact
 *.jsbundle

-# Ruby / CocoaPods
+# CocoaPods
 /ios/Pods/
-/vendor/bundle/

 # RN android release
 android/app/bin/
@@ -74,6 +74,7 @@ ios/Podfile.lock
 android/app/src/main/res/drawable-*
 android/app/src/main/assets/*

-# yarn
-.yarn/*
-yarn-error.log
+# nodejs-mobile creates these with every npm install
+nodejs-assets/nodejs-project/sample-*
+nodejs-assets/build-native-modules-MacOS-helper-script-node.sh
+nodejs-assets/build-native-modules-MacOS-helper-script-npm.sh
@@ -8,32 +8,5 @@ cache:

 test_async:
  script:
-    - npm install npm@7.0.1 -g
    - 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)/'
@@ -1,17 +1,16 @@
-# Configuration taken from this article:
-# https://paperless.blog/dependabot-on-gitlab
 version: 2
 updates:
-  - package-ecosystem: npm
-    directory: /
+  - package-ecosystem: "npm"
+    directory: "/"
    schedule:
-      interval: daily
+      interval: "monthly"
    open-pull-requests-limit: 3
-    ignore:
-      - dependency-name: '*'
-        update-types: ['version-update:semver-patch']
-      - dependency-name: 'realm'
-      - dependency-name: 'react'
-      - dependency-name: 'react-native'
-      - dependency-name: 'react-native-push-notifications'
-      - dependency-name: '@babel/core'
+    reviewers:
+      - "bl00dymarie"
+      - "mariyaz"
+      - "sdvig"
+      - "LisaHill"
+    allow:
+      - dependency-type: direct
+      - dependency-type: production
+    rebase-strategy: "auto"
@@ -1,29 +0,0 @@
-## 🐛 Oh no, a bug 🐛
-
-### What happened?
-
-Short overview of how the bug manifests.
-
-### What is the expected behaviour?
-
-_It's supposed to show ... and not ..._
-
-### Which OS + version is your device?
-
- [ ] Android _number_
- [ ] iOS _number_
- [ ] Simulator _number_
-
-### Which drip version number are you using?
-
-_On your phone, go to ➞ menu on the top right ➞ about, scroll to the very bottom, and find the version number_
-
-### How did it happen?
-
-_What triggered the bug/behavior, always/sometimes, is it reproducible(how)?_
-
-### Describe how it looks or add a screenshot
-
-Feel free to attach a file 📎
-
-### Any ideas on how to solve it? 💡
@@ -1,23 +0,0 @@
-## 🪠 This has to be done 🪠
-
-### What has to be done?
-
-Short overview
-
-### Is it urgent? ⏳
-
- [ ] Yes
- [ ] No
- [ ] Something in between
-
-_Explain the urgency if possible, e.g. is it a security vulnerability for potentially everyone?_
-If it is a security vulnerability for potentially everyone, please reach out ASAP to drip@mailbox.org.
-
-### Which OS?
-
- [ ] Android
- [ ] iOS
-
-### What should the ideal outcome be? 🎆
-
-_You can, e.g., specify the version number for a library update_
@@ -1,26 +0,0 @@
-## 🧩 Yeah, a feature idea! 🧩
-
-### This feature is a ...
-
- [ ] period tracking feature (add more data points etc.)
- [ ] technological feature (password, design, settings, etc.)
-
-### What should this feature do or solve? 🪄
-
-Please give a short overview so as many people as possible would be able to understand.
-
-### Who is this feature for?
-
-### What is particularly important to the people who would use this feature?
-
-### Where in the app should the feature be added?
-
-### Is it connected with or dependent on some other feature?
-
-### How should the feature look (sketch or mock-up)?
-
-Feel free to attach a file 📎
-
-### What could be difficulties (esp. integrating with other components)? 🪆
-
-### Do you want to work on this yourself?
@@ -1,30 +0,0 @@
-## Why this change?
-
-## 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
@@ -1 +0,0 @@
-2.7.4
@@ -2,184 +2,18 @@

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

-## v1.2410.7 Android & iOS
+## v1.2102.28

 ### Changes
-
- Updated dependencies:
-  - react-native v0.68.5
-
-### Adds
-
-A button that links to our FAQ page on the drip website
-
-## v1.2403.19 Android & iOS
-
-### Changes
-
- Disables temperature slider if temperature tracking off
- Disables secondary symptom if fertility and or cervix/cervical mucus are off
- Disables temperature reminder if temperature tracking off
- Disabled period reminder if period predictions off
- Return from sympto adapter if fertility off
- Restructure settings menu
- Unify wording to "sympto-thermal method"
- Format decimal to x.0 instead of x.00 used for standard deviation and average cycle in stats
- Use SelectTabGroup for secondary symptom customization
-
- Android changes after updating React Native to 0.68.3
- Update Android Gradle plugin from 7.0.3 to 7.0.4
- Update NDK to "24.0.8215888" only for M1 users which added support for aarch64
- Update metadata phone screenshots for Fdroid store listing
- Updated dependencies:
-  - @react-native-community/datetimepicker from 6.3.1 to 7.2.0
-  - @react-native-async-storage/async-storage from ^1.17.9 to ^1.18.2
-  - metro-react-native-babel-preset from ^0.66.2 to ^0.67.0
-
-### Adds
-
- Customization settings can turn on & off:
-
-  - Tracking categories
-  - Period predictions
-  - Fertility phases calculation
-
- Home displays text elements depending on customization settings
- Chart displays tracking category elements depending on customization settings
- CycleDay displays tracking category elements and exclude switch depending on customization settings
- Reminder can be disabled depending on customization settings
- Adds disabled and more styling to AppSwitch
- Adds TrackingCategorySwitch
- Adds disabled, more styling and alert to SelectTabGroup
- Adds more marginTop to License page
- Adds info text to Password menu item in Settings
-
-## v1.2401.17 iOS
-
-### Changes
-
- Updating React Native to 0.68.3
- Minor changes in temperature chart
-
-### Adds
-
- Temperature scale slider
- out of range warning messages for temperature values
-
-### Fixed
-
- Order of import buttons
-
-## v1.2312.11 iOS
-
-### Changes
-
- Chart: Improved readability
-  - Finer temperature lines and dots
-  - Enlarge screen space for temperature chart
-  - A very light grey background color for weekend days on the whole chart screen
- Homescreen: date displayed in new format
- Minor changes in "about" section
-
-See more under v1.2311.14 Android
-
-### Adds
-
- Stats: Show period details, including cycle start, cycle length and amount of days with bleeding
- Stats: Explainer text for standard deviation
- App asks for permissions for notifications right at the start, which allows you to set reminders (this is a new requirement for Android 13)
-
-## v1.2311.14 Android
-
-### Changes
-
- Make the app compatible with Android 13
-  - Update Android's targetSdkVersion to 33
-  - Update buildToolsVersion to 33.0.2
-  - Update Android Gradle plugin to 7.0.3
-  - Update Gradle to 7.3.3
-  - Update kotlinVersion to 1.3.40
- Chart: Improved readability
-  - Finer temperature lines and dots
-  - Enlarge screen space for temperature chart
-  - A very light grey background color for weekend days on the whole chart screen
- Reminders:
-  - Use new fork of react-native-push-notification: <https://github.com/github:bl00dymarie/react-native-push-notification> without google services
-  - Adding channels after breaking changes in react-native-push-notification
- Homescreen: date displayed in new format
- Minor changes in "about" section
- Updated dependencies:
-  - moment ^2.29.4,
-  - prop-types ^15.8.1,
-  - react v17.0.2,
-  - react-native v0.67.4,
-  - react-native-calendars ^1.1287.0,
-  - react-native-document-picker ^8.1.1,
-  - react-native-fs ^2.20.0,
-  - react-native-modal-datetime-picker v14.0.0,
-  - react-native-share ^7.9.0,
-  - react-native-vector-icons ^9.2.0,
-  - realm ^10.16.0,
-  - sympto v3.0.1
-
-### Adds
-
- Stats: Show period details, including cycle start, cycle length and amount of days with bleeding
- Stats: Explainer text for standard deviation
- Settings: Privacy Policy
- App asks for permissions for notifications right at the start, which allows you to set reminders (this is a new requirement for Android 13)
- Buttons can now be displayed as row
-
- Added dependencies:
-  - @js-joda/core ^5.3.0,
-  - @react-native-async-storage/async-storage ^1.17.9,
-  - @react-native-community/art ^1.2.0,
-  - @react-native-community/datetimepicker ^6.3.1,
-  - @react-native-community/push-notification-ios ^1.11.0,
-  - i18next ^22.0.2,
-  - react-i18next ^12.0.0,
-  - jshashes ^1.0.8,
-  - react-native-permissions ^3.10.0,
-  - react-native-push-notification: github:bl00dymarie/react-native-push-notification,
-  - react-native-simple-toast ^1.1.3,
-  - react-native-size-matters ^0.4.0,
-
-### Fixed
-
- Password: Disable setting empty passwords
- After updating the password the app will do a full restart
- Chart: Grid for symptoms
- Chart: Horizontal lines in temperature chart
-
-### Unreleased
-
- Partially implemented translations with react-i18next
-
-## v1.2208.11 iOS
-
-### Adds
-
- first iOS Release
-
-### Unreleased
-
- Temperature scale slider
- Warning message for out of scope temperature values
-
-## v1.2102.28 Android
-
-### Changes
-
 - Temperature range is now between 35 - 39°C and its default values are now set to 35.5 - 37.5°C

 ### Fixed
-
 - Blocks invalid input of temperature value
 - Error message for incorrect password on login screen
 - Phase text on home screen for last fertile day
 - Styling improvements

-## v1.2101.9 Android
+## v1.2101.9

 ### Adds

@@ -222,12 +56,12 @@ See more under v1.2311.14 Android
 - Fixed react-native-vector-icon
 - Fixed AppLoadingView component centering

-## v0.2007-12.beta Android
+## v0.2007-12.beta

 ### Adds

 - Allows chart not to show temperature part, when temperature is not tracked and corresponding refactoring
- Detox support for e2e testing and addition of the e2e tests
+- Detox support for e2e testing and addition of the e2e tests 
 - Introduces Redux global state (date and navigation are stored locally now)
 - Introduces clear.sh script to the project automising clearing project caches and packages reinstallation

@@ -246,7 +80,7 @@ See more under v1.2311.14 Android

 - Fixed adding notes to the future dates
 - Fixed app exiting with error when hitting back button on device
- Fixed Sex symptom showing on y axis of chart even though the contraception method was deleted
+- Fixed Sex symptom showing on y axis of chart even though the contraception method was deleted 
 - Fixed of the clear.sh file name in package.json
 - Fixed of navigation from chart to the cycle day overview
 - Bug fix for maximum value of mucus not showing on chart
@@ -257,7 +91,7 @@ See more under v1.2311.14 Android

 - Updates of node.js to fix security issue

-## v0.2005.3-beta Android
+## v0.2005.3-beta

 - Adds arm64-v8a and x86_64 for supporting 64-bit architecture
 - Adds Mariya & Sofiya as contributors &lt;3
@@ -357,7 +191,7 @@ See more under v1.2311.14 Android
 - Adds release wizard
 - Updates nodejs-mobile to fix security issue

-## v0.1905.29-beta Android
+## v0.1905.29-beta

 ### Changes

@@ -378,7 +212,7 @@ See more under v1.2311.14 Android
 - Line width in chart
 - Prediction range in drop on homescreen

-## v0.1905.28-beta Android
+## v0.1905.28-beta

 - Displays all the text for Home Elements; Shortens margin btw Home Elements; Adds missing "visit" to text
 - Adds donation section to about
@@ -453,7 +287,7 @@ See more under v1.2311.14 Android
 - Nicer formatting for past bleeding prediction
 - Fixed prediction range in drop on homescreen

-## v0.1905.10-beta Android
+## v0.1905.10-beta

 - Filter release commits from changelog
 - Adds update-changelog script
@@ -478,7 +312,7 @@ See more under v1.2311.14 Android
 - Delete password button bug fix
 - temperature screen styling update

-## v0.0.3 - 2019-04-17 Android
+## v0.0.3 - 2019-04-17

 ### Changes

@@ -488,9 +322,9 @@ See more under v1.2311.14 Android

 - Button functionality in settings for password

-## v0.0.2 - 2019-04-09 Android
+## v0.0.2 - 2019-04-09

-## Second updated beta release version Android
+## Second updated beta release version

 ### Changes

@@ -504,9 +338,9 @@ See more under v1.2311.14 Android
 - Delete button for sex, pain and mood
 - Dates on chart

-## v0.0.1 - 2019-02-15 Android
+## v0.0.1 - 2019-02-15

-## First beta release version Android
+## First beta release version

 ### Added (list of core functionality)

@@ -1,10 +1,10 @@
 # Contributing to drip aka CONDRIPUTING
+So good to see you here, hello :wave\_tone1: :wave\_tone2: :wave\_tone3: :wave\_tone4: :wave\_tone5:

-So good to see you here, hello :wave_tone1: :wave_tone2: :wave_tone3: :wave_tone4: :wave_tone5:

 ## Table Of Contents

-[TL;DR](#tldr)
+[TL;DR](#tl-dr)

 [What should I know before I get started?](#what-should-i-know-before-i-get-started)

@@ -14,44 +14,45 @@ So good to see you here, hello :wave_tone1: :wave_tone2: :wave_tone3: :wave_tone

 ## TL;DR

-You just want to say hello? Send us a [nice email](mailto:drip@mailbox.org?Subject=Nice%20incoming%20mail) :postbox:, toot :mammoth: [@dripapp@mastodon.social](https://mastodon.social/@dripapp) or tweet :bird: at us [@dripberlin](https://twitter.com/dripberlin).
+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?

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

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

 ## How can I condripute?

-We are an open source project and we highly appreciate contributions. At the same time please keep some things in mind: :heart:
+### Your First Code Condripution

- The drip maintainers are usually around 2-3 people and are responsible for everything from developing new features to answering press inquiries or fixing bugs. Most of this work is done unpaid. (If you write a nice email your chances to get an answer are much higher than if you behave like a tech bro.)
- We have a plan for the direction in which drip should evolve. This means that even if it isn't always transparent on gitlab, we have a list of features that we are building and more importantly, which bugs need to be fixed and which dependencies need to be updated.
- drips core values are:
-  - 🔮 open source
-  - 🩸 feminist and gender inclusive
-  - 🔒 secure: data entered stays with that person/on their device
-  - 🔬 science-based: we implemented the sympto-thermal method
+We are fans of labels, at least for our issues. You can find a list of `newbie` issues [here](https://gitlab.com/bloodyhealth/drip/issues?label_name%5B%5D=Newbie).
+If you decide to work on an issue, please click on `Create branch` based on that issue. You can find this as a dropdown option right under `Create merge request`.
+This allows us to keep track of the issues that are related to an existing branch and tells everyone "somebody is working on it".

-This means that we will never implement anything that contradicts these core values. Some examples: We will never build a cloud integration, we will never make an ovulation prediction.
+If you want to open a merge request, yeah :tada: exciting! We are using a template for merge requests to make sure we explain what we have done and why.
+Keep in mind that people who will review your merge request are more motivated to do so when the merge request is well explained and ideally not too big.

- If you would like to make a sustainable contribution to the project, we would be happy to join the game.
+### Reporting Bugs

-### Reporting Bugs or Making Suggestions
+You found a bug :bug:? Please feel free to investigate and save logs for more specific details.

-If you found a bug or have suggestions, please :one: first review the [list of existing issues](https://gitlab.com/bloodyhealth/drip/issues) to make sure the bug/suggestion is unknown; :two: after that, take time to investigate and write a detailed issue report. Best you use our [templates for bug /chore/ feature](https://gitlab.com/bloodyhealth/drip/-/tree/main/.gitlab/issue_templates) (you can choose when creating a new issue) in gitlab or send us an email to our [gitlab email](mailto:incoming+bloodyhealth/drip@incoming.gitlab.com). It will automagically add a new issue to the list with a description text taken from the body of your email. Please attach screenshots or other helpful things.
+Before creating a new issue, please review the [list of existing issues](https://gitlab.com/bloodyhealth/drip/issues) to make sure the bug is unknown. You are invited to describe the bug in all its details e.g. in what context/settings has it occurred?

-### Your First Condripution
+To send us a new issue you can also use our [gitlab email](mailto:incoming+bloodyhealth/drip@incoming.gitlab.com). It will automagically add a new issue to the list with a description text taken from the body of your email.

- If you want to contribute to drip's code or translation, please get in touch with us. We can tell you if someone is already working on something similar, if your idea does (not) match drip's core values, etc. Of course, you can always create a drip version for your private use with anything you want, but please don't expect us to review and merge code that has not been discussed before.
- If you want to open a merge request, yeah :tada: exciting! We are using a template for merge requests to make sure we explain what we have done and why.
- Keep in mind that people who will review your merge request are more motivated to do so when the merge request is well explained and ideally not too big.
+### Suggesting Enhancements
+
+Do you have suggestions for enhancing the app or for cleaning up some code? Fantastic!
+
+Before creating a new issue, please review the [list of existing issues](https://gitlab.com/bloodyhealth/drip/issues) to make sure nobody else had the same idea before you! You are then invited to open a new issue with a somewhat extensive description, you can use emojis or GIFs if it helps :)!
+
+To send us a new issue you can also use our [gitlab email](mailto:incoming+bloodyhealth/drip@incoming.gitlab.com). It will automagically add a new issue to the list with the title taken from the subject line and the description text for the issue taken from the body of your email.

 ### Thank you

 ![](https://media.giphy.com/media/kPA88elN9kYco/giphy.gif)

 Thank you for condriputing to open source, thank you for condriputing to drip!
-Much love from Bloody Health :heart_exclamation:
+Much love from Bloody Health :heart\_exclamation:
@@ -1,4 +0,0 @@
-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'
@@ -3,160 +3,102 @@
 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://dripapp.org/).

- [<img src="https://dripapp.org/assets/get.png"
+[<img src="https://dripapp.org/assets/get.png"
     alt="Get it here"
-     height="55">](https://dripapp.org/release/v1.2311.14.apk)
-[<img src="https://dripapp.org/assets/badge_google-play.png"
-     alt="Get it on Google Play"
-     height="55">](https://dripapp.org/android)
-[<img src="https://dripapp.org/assets/badge_app-store.png"
-    alt="Get drip on the App Store"
-    height="55">](https://dripapp.org/ios)
-[<img src="https://dripapp.org/assets/badge_f-droid.png"
+     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="55">](https://dripapp.org/fdroid)
+     height="80">](https://f-droid.org/packages/com.drip/)
+[<img src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png"
+     alt="Get it on Google Play"
+     height="80">](https://play.google.com/store/apps/details?id=com.drip)

-The app is built in React Native and developed for Android and iOS.
+The app is built in React Native and currently developed for Android.

-▶ [How to contribute to the project](https://gitlab.com/bloodyhealth/drip/blob/main/CONTRIBUTING.md)
+▶ [How to contribute to the project](https://gitlab.com/bloodyhealth/drip/blob/master/CONTRIBUTING.md)

-▶ [How to release a new version](https://gitlab.com/bloodyhealth/drip/blob/main/RELEASE.md)
+▶ [How to release a new version](https://gitlab.com/bloodyhealth/drip/blob/master/RELEASE.md)

 ## Development setup

-### 1. Get this repository
-
-Clone it with SSH
-
-    git clone git@gitlab.com:bloodyhealth/drip.git
-
-or clone it with HTTPS
-
-    git clone https://gitlab.com/bloodyhealth/drip.git
-
-### 2. Node version
-
-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. After installing nvm close the terminal and open it again to be able to use nvm.
-Once you have nvm running you can install node 14:
-
-    nvm install v14.19.3
-
-#### On Apple Silicon M1
-
-NodeJS 14 does not compile on the M1 architecture, so it has to be installed through Rosetta: https://devzilla.io/using-nodejs-14-with-mac-silicon-m1 . 
-To activate Rosetta and switch to intel emulation run: 
-
-    arch -x86_64 zsh
-
-Run 
-
-    arch 
-
-again to verify that it returns "i386".
-Now install node 14:
-
-    nvm install v14.19.3
-
-### 3. Yarn version
-
-use npm to install yarn:
-
-    npm install --global yarn
-
-## for Android
-
-### 3.1 Android Studio
+#### 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
+#### 2. Node & npm version

-Open Android Studio. If the message "SDK location not found" appears when you try to start it, edit `.bashrc` in your home directory by adding:
+Make sure you are running Node 14 and npm 6.14.17. It's easiest to switch Node versions using `nvm`, here's how to do it:

-    export ANDROID_SDK_ROOT="$HOME/Android/Sdk"
+    $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
+    $ nvm install v14.19.3

-Check by typing in your terminal:
+#### 3. Get this repository

-    echo $ANDROID_SDK_ROOT
+Clone it with SSH

-You should see the path of Sdk.
-If you haven't installed [adb tools](https://developer.android.com/tools/adb) before, you will also have to do so and add to the .bashrc
+    $ git clone git@gitlab.com:bloodyhealth/drip.git

-    PATH="$PATH:$HOME/Android/Sdk/platform-tools"
+or clone it with HTTPS

-In Android Studio 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.
+    $ git clone https://gitlab.com/bloodyhealth/drip.git

-### 3.3 Run the app on Android
+and run

-Either create and 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.
+    $ cd drip
+    $ npm install

-i. Open a terminal, navigate to the drip folder and run
+#### 4. More requirements from Android Studio

-    yarn install
+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.

-In a separate tab, that needs to keep running as long as you want to keep the app connected, run
-   
-    yarn start
+#### 5. Run the app on Android

-Also run in a new tab
-    
-    yarn 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.

-ii. To see logging output, run the following command in another tab:
+1. Open a terminal and run

-    yarn log
+   ```
+   $ npm run android
+   ```

-iii. If you had an older version of drip before and you are now trying to run a new drip version, clear cache by running
+2. To see logging output, run the following command in another tab:

-    yarn clear
+   ```
+   $ npm run log
+   ```

-iv. Run the following command and select enable hot reloading (see https://facebook.github.io/react-native/docs/debugging.html):
+3. Run the following command and select enable hot reloading (see https://facebook.github.io/react-native/docs/debugging.html):

-    adb shell input keyevent 82
+   ```
+   $ 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.
+4. 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
+#### 6. 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)
+- Xcode 12.3 (I assume, that only command line tools might be enough)

-i. Install XCode dependencies by running the following command from the root project directory:
+1. Install XCode dependencies by running the following command from the root project directory:

-    cd ios && pod install && cd ..
+```
+$ 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:
+2. To run app either open drip workspace ('drip.xcworkspace' file) with XCode and run "Build" or run the following command:

-    yarn ios
+```
+$ npm run ios
+```

-iii. If you are building the app with XCode make sure you are running this as well:
-
-    yarn start
+3. If you are building the app with XCode make sure you are running this as well:
+   `$ npm start`

 ### Troubleshooting

-#### [MacOS M1] Flipper problems
-
-If a bug in the currently used Flipper version prevents building the project, comment out the respective line in the podfile, like so:
-
-    #use_flipper!()
-
-Run 
-
-    pod install 
-
-from the ios directory again to reload the dependencies.
-
 #### [MacOS] Java problems

 Make sure that you have Java 1.8 by running `java -version`.
@@ -168,24 +110,31 @@ Now, `which java` should output `/Applications/Android Studio.app/Contents/jre/j

 #### [MacOS] Ninja

-If `yarn` says `CMake was unable to find a build program corresponding to "Ninja".`:
-
-    brew install ninja
+If `npm` says `CMake was unable to find a build program corresponding to "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
+### [MacOS] and XCode 12.5
+
+If you run XCode 12.5, more likely you'll have problems building app for iOS. Please use the following fix: https://stackoverflow.com/a/67320887.
+
+If you experience any further issues, please feel free to check out the following threads:
+
+- [react-native run-ios build failure on XCode 12.5 beta](https://github.com/react-native-community/cli/issues/1365)
+- [Xcode 12.5 troubleshooting guide (RN 0.61/0.62/0.63/0.64)](https://github.com/facebook/react-native/issues/31480)

 ### 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
+    $ npm run clear

 Script accepts the following options:
-"all" - script will delete all caches and re-install project libraries,
+"none" - 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
@@ -193,19 +142,18 @@ Script accepts the following options:

 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
+    $ npm run clear android npm

 ## Tests

 ### Unit tests

 You can run the tests with:
-
-    yarn test
+`$ npm test`

 ### End to end tests

-1. Check what testing device is specified in [package.json](https://gitlab.com/bloodyhealth/drip/blob/main/package.json) under:
+1. Check what testing device is specified in [package.json](https://gitlab.com/bloodyhealth/drip/blob/master/package.json) under:
   ```
   {"detox":
     {"configurations":
@@ -222,29 +170,18 @@ You can run the tests with:
 5. For the first time you need to get the app on the phone or if you run into this error:
   `'app-debug-androidTest.apk' could not be found`
   --> open a new 2nd tab and run (in your drip folder): `cd android and ./gradlew assembleAndroidTest`
-   Otherwise just open a new 2nd tab to run (in your drip folder) `yarn android`
+   Otherwise just open a new 2nd tab to run (in your drip folder) `npm run android`
 6. Open a new 3rd tab to run `./node_modules/.bin/detox test -c android.emu.debug`

 Hopefully you see the magic happening clicking through the app and happy test results on your console :sun_with_face: !

-### 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 `yarn 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 `npm run 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).
@@ -255,7 +192,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.
@@ -1,208 +1,33 @@
-# How to release
+# How to release a new version

-drip is developed in React Native for iOS and Android and is released on 4 different platforms:
+Note: You need the release-key to bundle a release that can be uploaded to Google Play Store.

-1. [Google Play Store](https://play.google.com/store/apps/details?id=com.drip)
-2. [Apple App Store](https://apps.apple.com/us/app/drip/id1584564949)
-3. [F-Droid](https://f-droid.org/packages/com.drip/)
-4. [drip Website](https://dripapp.org)
-
-In an ideal world the app version is the same across platforms. In the past this has never been the case. The release v1.2403.19 is the first to be up to date on all 4 platforms!
-
-Releasing a new version is very exciting and brings happy changes like fixing a bug, improving a feature, updating dependencies or adding a new functionality to the app. It is more than just pressing the button "publish new version".
-
-_Note_: You need the release-key for Android to bundle a signed release that can be uploaded and published via the Google Play Store. A similar process for Apple requires a certificate to upload and publish the app to the App Store.
-
-## Release steps
-
-### 1. [Code](#code)
- 1.1 [Version updating](#version-updating)
- 1.2 [Android builds](#android-builds)
- 1.3 [iOS builds](#ios-builds)
- 1.4 [User testing](#user-testing)
- 1.5 [Release tag](#release-tag)
-
-### 2. [Documentation](#documentation)
- 2.1 [Changelog](#changelog)
- 2.2 [Release notes](#release-notes)
- 2.3 [Releases on Gitlab](#releases-on-gitlab)
- 2.4 [Phone screenshots](#phone-screenshots)
-
-### 3. [Publishing](#publishing)
- 3.1 [Google Play Console](#google-play-console)
- 3.2 [Apple App Store Connect](#apple-app-store-connect)
- 3.3 [F-droid](#f-droid)
- 3.4 [drip website](#drip-website)
- 3.5 [Communication](#communication)
- 3.6 [Self care](#self-care)
-
-## Code
-
-### Version updating
-
-When you are done with a chore, a feature or a bugfix, you may want to share it with testers and eventually publish a release. In order to identify a specific app version we can update the version name, which is created based on the following format: `1.yymm.d` e.g. `1.2311.7`. If you want to upload a new app version to Google Play you also need to update the version code.
-
-The following command will:
-
- create a new versionName and a new higher versionCode (+1)
- create a commit including a tag named after the new release version name.
+Run the release wizard that takes you through all the steps necessary to prepare a new release:

 ```
-yarn release
+npm run release
 ```
+This will trigger the following:
+* update version number
+* create a new tag for the release
+* update the changelog
+* make a release commit

-The versionName and versionCode [are defined here](https://gitlab.com/bloodyhealth/drip/-/blob/5401789c46f4a02915ab900ef284581be420451c/android/app/build.gradle#L137-138) and in [package.json](https://gitlab.com/bloodyhealth/drip/-/blob/5401789c46f4a02915ab900ef284581be420451c/package.json#L3).
-
-**Note for iOS**
-
-Update the version number for iOS in `ios/drip/Info.plist` under:
+To then bundle a release run the following command on your branch:

 ```
-<key>CFBundleShortVersionString</key>
-<string>1.2403.19</string>
+cd android && ./gradlew bundleRelease
 ```

-### Android builds
+This command creates an `app.aab` file in the folder `/android/app/build/outputs/bundle/release`.

-APK versus AAB
+[More on Android App Bundle](https://blog.swmansion.com/make-your-react-native-app-3x-smaller-44c993eda2c9)

-> Android App Bundles (AAB) include all your app’s compiled code and resources, but defer APK generation and signing to Google Play. Unlike an APK, you can't deploy an app bundle directly to a device. So, if you want to quickly test or share an APK with someone else, you should instead build an APK.
-
-(https://developer.android.com/build/building-cmdline)
-
-#### APK
-
-To build a release apk file, run the following command:
+You need to manually push the created tag to Gitlab:

 ```
-yarn build-android-apk-release
+git push origin <tagname>
 ```
+Also don't forget to push your branch to Gitlab and review and merge it if ready!

-_which is a shortcut for:_ `cd android && ./gradlew clean && ./gradlew assembleRelease && cd ..`
-
-This will create a new apk file named `app-release.apk` under `./android/app/build/outputs/apk/release/`.
-
-For signing an apk you can run this command:
-
-```
-yarn sign-android-apk-release
-```
-
-_which is a shortcut for:_ `zipalign -v -p 4 ./android/app/build/outputs/apk/release/app-release.apk ./android/app/build/outputs/apk/release/app-release_signed.apk`
-
-It adds a file name `app-release_signed.apk` in the same folder in `./android/app/build/outputs/apk/release/`
-
-#### AAB
-
-To build a release aab file, run:
-
-```
-yarn build-android-aab-release
-```
-
-_which is a shortcut for:_ `cd android && ./gradlew clean && ./gradlew :app:bundleRelease && cd ..`
-
-It creates a new aab file named `app-release.aab` under `./android/app/build/outputs/bundle/release`
-
-For signing an aab you first need to configure the base module’s build.gradle file with your app’s signing information. You can then run this command:
-
-```
-yarn sign-android-aab-release
-```
-
-_which is a shortcut for:_ `jarsigner -keystore ./android/app/drip-release-key.keystore ./android/app/build/outputs/bundle/release/app-release.aab drip-release-key`
-
-### iOS builds
-
-To build an .ipa archive file for an upload to the AppStore you need to go to xCode and select Build -> "Any iOS Device" and under "Product" -> "Archive".
-
-Once the archiving process has completed you can chose to do the following:
-
-"Distribute the app"
-
- TestFlight & App Store for when you want to upload it for external testing and/or production release
- TestFlight Internal Only for when you want to upload it for internal testing
-
-### User testing
-
-To enable external testing you need to remember that Google Play and Apple App Store might take up to 1 day for their review process. "External testing" for iOS allows testing drip on Testflight anonymously via a public link. "Open testing" for Android allows testing drip on Google Play as beta tester below the normal production listing.
-
-For a quick and easy way to share an apk to testers who are willing to sideload drip onto their Android phones, do this: Upload a signed apk to the Gitlab repository of the drip website under `/release` https://gitlab.com/bloodyhealth/bloodyhealth.gitlab.io/-/tree/main/release and maybe adapt the name of the apk with a more specific name than "app-release.apk". Now you can simply share a direct link to download your newly bundled apk, e.g. [a download link for v1.2311.14](https://gitlab.com/bloodyhealth/bloodyhealth.gitlab.io/-/blob/main/release/v1.2311.14.apk).
-
-### Release tag
-
-[Tags](https://gitlab.com/bloodyhealth/drip/-/tags) can mark a specific point in the coding/commmit history and helps us identify the version status of a released app. They are named "iOS-v1.2401.17" or "Release-v1.yymm.d".
-
-Any tag starting with "Release" or "Android" will be checked by https://gitlab.com/fdroidci
-
-## Documentation
-
-### Changelog
-
-The [changelog](https://gitlab.com/bloodyhealth/drip/-/blob/main/CHANGELOG.md) should reflect the technical / code changes between a previous and the new version. Please update the changelog file with any relevant additions, fixes and changes in the following format:
-
->**v1.yymm.d**
->
->**Changes**
->
->Changing the color of funky button
->Updating a library from 1.2.3 to 2.3.4
->
->**Adds**
->
->New feature for calendar
->
->**Fixed**
->
->Small bug in chart
-
-### Release notes
-
-These notes are for the users and curious ones who may want to start using drip. They should be based on the changelog but written in a friendly and easy to understand way. The focus is on the user perspective and the impact of the changes for the user. Behind the scenes and in depth code changes are less relevant.
-
-Google Play limits these notes to 500 characters, whereas Apple's App Store limits these notes to 4.000 characters. In Fdroid there are no release notes.
-
-### Releases on Gitlab
-
-Under [Releases](https://gitlab.com/bloodyhealth/drip/-/releases) we keep track of all drip releases. 
-
-### Phone screenshots
-
-If there are visual changes in the app you may want to update the screenshots for the Google Play Store listing, which allows up to 8 and for Apple's App Store, which allows up to 10 screenshots. Keep in mind that both Google Play and Apple have specific resolution requirements. You'll find Google's in Grow -> Store presence -> Main Store Listing -> Phone screenshots and Apple's on the main App Store Connect site. Here is a link for [Apple's screenshot specifications](https://developer.apple.com/help/app-store-connect/reference/screenshot-specifications).
-
-Please also update [phone screenshots for the website](https://gitlab.com/bloodyhealth/bloodyhealth.gitlab.io/-/tree/main/assets) and set links on [/index](https://gitlab.com/bloodyhealth/bloodyhealth.gitlab.io/-/blob/f3da9776b1943ffa32458e74ef86eeca98c1891c/index.html#L47) and [/media](https://gitlab.com/bloodyhealth/bloodyhealth.gitlab.io/-/blob/c7f999bb7ad736345321537cbffa3f4c24eeee6d/media.html#L33) that can then also be attached to a social media post.
-
-## Publishing
-
-### Google Play Console
-
-Upload a signed aab to the [Google Play Console for developers](https://play.google.com/console/) and add it to the "App bundle explorer". This requires a higher versionCode and a different version name compared to previously uploaded aab or apk files.
-You can decide if you want the new app version to get released for testing (internal, closed or open) or for production. Keep in mind that any track other than "internal testing" triggers an external review by Google and might take a few hours.
-
-### Apple App Store Connect
-
-Upload a new version and submit it for review, before it can be published.
-
-### F-droid
-
-This account runs automated checks for drip looking at new `Release` or `Android` [tags](https://gitlab.com/bloodyhealth/drip/-/tags/) and updates the app's metadata yaml file in Fdroid without further ado.
-
-However this is not the full story. Please have a look at previous commits to see what necessary changes got pushed, [see here](https://gitlab.com/fdroid/fdroiddata/-/commits/master/metadata/com.drip.yml).
-
-### drip website
-
-After a new version has been published on Google Play (or F-Droid) the apk version that is downloadable directly from the [drip website](https://dripapp.org) needs to get updated as well. Therefore you upload a signed apk to the [repository](https://gitlab.com/bloodyhealth/bloodyhealth.gitlab.io/) as [we did in this commit](https://gitlab.com/bloodyhealth/bloodyhealth.gitlab.io/-/commit/f8c0f90c1ae9f23bf8e1bc311790b85443149a4d), and adapt the name and link on /index.html [as we did in this commit](https://gitlab.com/bloodyhealth/bloodyhealth.gitlab.io/-/commit2f8850ff5fa78615a4f335b625ea4a67d4acf03a) and [this commit](https://gitlab.com/bloodyhealth/bloodyhealth.gitlab.io/-/commit/f3da9776b1943ffa32458e74ef86eeca98c1891c). Last time I checked it was [here](f3da9776b1943ffa32458e74ef86eeca98c1891c/index.html#L114).
-
-### Communication
-
-You probably want to share the app update by posting on one or more of these platforms:
-
- [Twitter](twitter.com/dripberlin)
- [Mastodon](mastodon.social/@dripapp)
- [Ko-fi](https://ko-fi.com/dripapp)
- [Linkedin](https://www.linkedin.com/company/34899684/)
- Different tech, privacy, feminist oriented slacks
-
-### Self care
-
-Congratulations. Take a break, eat some chocolate, go see a live show of your favorite band, masturbate <3!
+Yay, done (have a scoop of ice cream, I suggest coconut 🍦)!
@@ -1,8 +1,6 @@
 apply plugin: "com.android.application"

 import com.android.build.OutputFile
-import java.util.Properties
-import java.io.FileInputStream

 /**
 * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
@@ -17,12 +15,10 @@ import java.io.FileInputStream
 *   // the name of the generated asset file containing your JS bundle
 *   bundleAssetName: "index.android.bundle",
 *
- *   // 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.
+ *   // the entry file for bundle generation
 *   entryFile: "index.android.js",
 *
- *   // https://reactnative.dev/docs/performance#enable-the-ram-format
+*   // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format
 *   bundleCommand: "ram-bundle",
 *
 *   // whether to bundle JS and assets in debug mode
@@ -80,6 +76,7 @@ import java.io.FileInputStream
 */

 project.ext.react = [
+    entryFile: "index.js",
    enableHermes: false,  // clean and rebuild if changing
 ]

@@ -116,40 +113,29 @@ 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
+ * This should be set on project.ext.react and mirrored 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")
-
-// Create a variable called keystorePropertiesFile, and initialize it to your
-// keystore.properties file, in the rootProject folder.
-def keystorePropertiesFile = rootProject.file("keystore.properties")
-
-// Initialize a new Properties() object called keystoreProperties.
-def keystoreProperties = new Properties()
-
-// Load your keystore.properties file into the keystoreProperties object.
-keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
-
 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
        targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 35
-        versionName "1.2410.7"
+        versionCode 8
+        versionName "1.2102.28"
        ndk {
-            abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+            abiFilters "armeabi-v7a", "x86"
        }
        testBuildType System.getProperty('testBuildType', 'debug')  // This will later be used to control the test apk build type
        testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
@@ -162,10 +148,6 @@ android {
            keyPassword 'android'
        }
        release {
-            storeFile file('drip-release-key.keystore')
-            keyAlias keystoreProperties['keyAlias']
-            keyPassword keystoreProperties['keyPassword']
-            storePassword keystoreProperties['storePassword']
            if (project.hasProperty('DRIP_RELEASE_STORE_FILE')) {
                storeFile file(DRIP_RELEASE_STORE_FILE)
                storePassword DRIP_RELEASE_STORE_PASSWORD
@@ -185,40 +167,26 @@ 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.
+            // see https://facebook.github.io/react-native/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:
            // https://developer.android.com/studio/build/configure-apk-splits.html
-            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
-            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
+            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 =
-                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
+                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
@@ -226,23 +194,9 @@ android {

 dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
-    //noinspection GradleDynamicVersion
-    implementation "androidx.appcompat:appcompat:1.0.0"
-    implementation "androidx.annotation:annotation:1.1.0"
-    implementation "androidx.work:work-runtime-ktx:2.7.1"
+    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/";
@@ -259,7 +213,7 @@ 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.implementation
+    from configurations.compile
    into 'libs'
 }

@@ -4,10 +4,5 @@

    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

-    <application
-        android:usesCleartextTraffic="true"
-        tools:targetApi="28"
-        tools:ignore="GoogleAppIndexingWarning">
-        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false" />
-    </application>    
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
 </manifest>
@@ -1,68 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and 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.drip;
-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.ReactInstanceEventListener;
-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 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());
-      }
-    }
-  }
-}
@@ -5,81 +5,75 @@
 >

    <uses-permission android:name="android.permission.INTERNET" />
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.WAKE_LOCK" />
-    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
-    <uses-permission android:name="android.permission.SCHEDULE_EXACT_ALARM" />
-    <uses-permission android:name="android.permission.USE_EXACT_ALARM" />
-    <uses-permission android:name="android.permission.VIBRATE" />
-    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
    <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"
        android:protectionLevel="signature" />

+    <uses-permission android:name="${applicationId}.permission.C2D_MESSAGE" />
+    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
+
+
    <application
-        android:name=".MainApplication"
+      android:name=".MainApplication"
+      android:label="@string/app_name"
+      android:icon="@mipmap/ic_launcher"
+      android:roundIcon="@mipmap/ic_launcher_round"
+      android:allowBackup="false"
+      android:theme="@style/AppTheme">
+      <activity
+        android:name=".MainActivity"
        android:label="@string/app_name"
-        android:icon="@mipmap/ic_launcher"
-        android:roundIcon="@mipmap/ic_launcher_round"
-        android:allowBackup="false"
-        android:theme="@style/AppTheme">
-
-        <meta-data
-            android:name="com.dieam.reactnativepushnotification.notification_foreground"
-            android:value="false" />
-        <meta-data
-            android:name="com.dieam.reactnativepushnotification.notification_color"
-            android:resource="@color/purple" /> 
-        <meta-data
-            android:name="com.dieam.reactnativepushnotification.default_notification_channel_id"
-            android:value="..." />
-
-        <receiver 
-            android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions"
-            android:exported="false"
-            tools:ignore="MissingClass" />
-        <receiver 
-            android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher"
-            android:exported="false" />
-        <receiver
-            android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver"
-            android:exported="false" >
-            <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>
-
-        <activity
-            android:name=".MainActivity"
-            android:label="@string/app_name"
-            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
-            android:launchMode="singleTask"
-            android:windowSoftInputMode="adjustPan"
-            android:screenOrientation="sensorPortrait"
-            android:exported="true">
-
-            <intent-filter>
-                <action android:name="android.intent.action.MAIN" />
-                <category android:name="android.intent.category.LAUNCHER" />
-            </intent-filter>
-        </activity>
-
-        <provider
+        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+        android:windowSoftInputMode="adjustResize"
+        android:screenOrientation="sensorPortrait">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN" />
+            <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"
            android:grantUriPermissions="true"
-            android:exported="false" >
+            android:exported="false">
            <meta-data
                tools:replace="android:resource"
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/filepaths" />
-        </provider>
+      </provider>

+        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_foreground"
+                    android:value="false"/>
+        <!-- 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"/> <!-- 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>
+
+        <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>
@@ -1,8 +1,6 @@
 package com.drip;

 import com.facebook.react.ReactActivity;
-import com.facebook.react.ReactActivityDelegate;
-import com.facebook.react.ReactRootView;

 public class MainActivity extends ReactActivity {

@@ -14,27 +12,4 @@ public class MainActivity extends ReactActivity {
  protected String getMainComponentName() {
    return "drip";
  }
-
-  /**
-   * Returns the instance of the {@link ReactActivityDelegate}. There the RootView is created and
-   * you can specify the rendered you wish to use (Fabric or the older renderer).
-   */
-  @Override
-  protected ReactActivityDelegate createReactActivityDelegate() {
-    return new MainActivityDelegate(this, getMainComponentName());
-  }
- 
-  public static class MainActivityDelegate extends ReactActivityDelegate {
-    public MainActivityDelegate(ReactActivity activity, String mainComponentName) {
-      super(activity, mainComponentName);
-    }
- 
-    @Override
-    protected ReactRootView createRootView() {
-      ReactRootView reactRootView = new ReactRootView(getContext());
-      // If you opted-in for the New Architecture, we enable the Fabric Renderer.
-      return reactRootView;
-    }
-  }
 }
-
@@ -4,11 +4,9 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
-import com.facebook.react.ReactInstanceManager;
 import cl.json.ShareApplication;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
-import com.facebook.react.config.ReactFeatureFlags;
 import com.facebook.soloader.SoLoader;
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
@@ -46,27 +44,22 @@ public class MainApplication extends Application implements ReactApplication, Sh
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
-    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+    initializeFlipper(this); // Remove this line if you don't want Flipper enabled
  }
  /**
-   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
-   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+   * Loads Flipper in React Native templates.
   *
   * @param context
-   * @param reactInstanceManager   
   */
-  private static void initializeFlipper(
-      Context context, ReactInstanceManager reactInstanceManager) {
+  private static void initializeFlipper(Context context) {
    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.drip.ReactNativeFlipper");
-        aClass
-            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
-            .invoke(null, context, reactInstanceManager);
+        Class<?> aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper");
+        aClass.getMethod("initializeFlipper", Context.class).invoke(null, context);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
@@ -1,29 +0,0 @@
-<?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>
@@ -14,5 +14,4 @@
    <color name="grey">#A5A5A5</color>
    <color name="orange">#F38337</color>
    <color name="purple">#3A2671</color>
-    <color name="turquoiseDark">#69CBC1</color>
 </resources>
@@ -1,9 +1,9 @@
 <resources>

    <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
-        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+        <item name="android:textColor">#000000</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
@@ -1,25 +1,23 @@
-import org.apache.tools.ant.taskdefs.condition.Os
-
 // Top-level build file where you can add configuration options common to all sub-projects/modules.

 buildscript {
    repositories {
+        jcenter()
        google()
-        mavenCentral()
    }
-    ext.kotlinVersion = '1.3.40'
+    ext.kotlinVersion = '1.3.10'
    dependencies {
-        classpath('com.android.tools.build:gradle:7.0.4')
-        classpath("com.facebook.react:react-native-gradle-plugin")
-        classpath("de.undercouch:gradle-download-task:4.1.2")
+        classpath("com.android.tools.build:gradle:3.4.2")
+
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
-        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
    }
 }

 allprojects {
    repositories {
+        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
@@ -28,15 +26,9 @@ allprojects {
            // 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' }
+        jcenter()
+        maven { url 'https://jitpack.io' }
        maven {
            url 'https://maven.google.com/'
            name 'Google'
@@ -49,16 +41,22 @@ allprojects {
 }

 ext {
-    buildToolsVersion = "33.0.2"
-    minSdkVersion = 21
-    compileSdkVersion = 33
-    targetSdkVersion = 33
+    googlePlayServicesVersion = "+" // default: "+"
+    firebaseMessagingVersion = "21.1.0" // default: "+"

-    if (System.properties['os.arch'] == "aarch64") {
-        // For M1 Users we need to use the NDK 24 which added support for aarch64
-        ndkVersion = "24.0.8215888"
-    } else {
-        // Otherwise we default to the side-by-side NDK version from AGP.
-        ndkVersion = "21.4.7075529"
+    buildToolsVersion = "29.0.3"
+    minSdkVersion = 23
+    compileSdkVersion = 29
+    targetSdkVersion = 29
+}
+
+subprojects {
+    afterEvaluate {project ->
+        if (project.hasProperty("android")) {
+            android {
+                compileSdkVersion 29
+                buildToolsVersion '29.0.3'
+            }
+        }
    }
 }
@@ -9,32 +9,12 @@

 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
-# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
-org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
+# Default value: -Xmx10248m -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
-
-# 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.125.0
-
-# Use this property to specify which architecture you want to build.
-# You can also override it from the CLI using
-# ./gradlew <task> -PreactNativeArchitectures=x86_64
-reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
-
-# Use this property to enable support to the new architecture.
-# This will allow you to use TurboModules and the Fabric render in
-# your application. You should enable this flag either if you want
-# to write custom TurboModules/Fabric components OR use libraries that
-# are providing them.
-newArchEnabled=false
+android.useAndroidX=true
@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-all.zip
 distributionPath=wrapper/dists
-zipStorePath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip
 zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
@@ -1,13 +1,13 @@
-#!/bin/sh
+#!/usr/bin/env bash

 #
-# Copyright © 2015-2021 the original authors.
+# Copyright 2015 the original author or authors.
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
 # You may obtain a copy of the License at
 #
-#      https://www.apache.org/licenses/LICENSE-2.0
+#      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,
@@ -17,113 +17,79 @@
 #

 ##############################################################################
-#
-#   Gradle start up script for POSIX generated by Gradle.
-#
-#   Important for running:
-#
-#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
-#       noncompliant, but you have some other compliant shell such as ksh or
-#       bash, then to run this script, type that shell name before the whole
-#       command line, like:
-#
-#           ksh Gradle
-#
-#       Busybox and similar reduced shells will NOT work, because this script
-#       requires all of these POSIX shell features:
-#         * functions;
-#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
-#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
-#         * compound commands having a testable exit status, especially «case»;
-#         * various built-in commands including «command», «set», and «ulimit».
-#
-#   Important for patching:
-#
-#   (2) This script targets any POSIX shell, so it avoids extensions provided
-#       by Bash, Ksh, etc; in particular arrays are avoided.
-#
-#       The "traditional" practice of packing multiple parameters into a
-#       space-separated string is a well documented source of bugs and security
-#       problems, so this is (mostly) avoided, by progressively accumulating
-#       options in "$@", and eventually passing that to Java.
-#
-#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
-#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
-#       see the in-line comments for details.
-#
-#       There are tweaks for specific operating systems such as AIX, CygWin,
-#       Darwin, MinGW, and NonStop.
-#
-#   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
-#       within the Gradle project.
-#
-#       You can find Gradle at https://github.com/gradle/gradle/.
-#
+##
+##  Gradle start up script for UN*X
+##
 ##############################################################################

-# Attempt to set APP_HOME
-
-# Resolve links: $0 may be a link
-app_path=$0
-
-# Need this for daisy-chained symlinks.
-while
-    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
-    [ -h "$app_path" ]
-do
-    ls=$( ls -ld "$app_path" )
-    link=${ls#*' -> '}
-    case $link in             #(
-      /*)   app_path=$link ;; #(
-      *)    app_path=$APP_HOME$link ;;
-    esac
-done
-
-APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
-
-APP_NAME="Gradle"
-APP_BASE_NAME=${0##*/}
-
 # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'

+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
 # Use the maximum available, or set MAX_FD != -1 to use that value.
-MAX_FD=maximum
+MAX_FD="maximum"

-warn () {
+warn ( ) {
    echo "$*"
-} >&2
+}

-die () {
+die ( ) {
    echo
    echo "$*"
    echo
    exit 1
-} >&2
+}

 # OS specific support (must be 'true' or 'false').
 cygwin=false
 msys=false
 darwin=false
-nonstop=false
-case "$( uname )" in                #(
-  CYGWIN* )         cygwin=true  ;; #(
-  Darwin* )         darwin=true  ;; #(
-  MSYS* | MINGW* )  msys=true    ;; #(
-  NONSTOP* )        nonstop=true ;;
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
 esac

-CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+# For Cygwin, ensure paths are in UNIX format before anything is touched.
+if $cygwin ; then
+    [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"`
+fi

+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >&-
+APP_HOME="`pwd -P`"
+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
        # IBM's JDK on AIX uses strange locations for the executables
-        JAVACMD=$JAVA_HOME/jre/sh/java
+        JAVACMD="$JAVA_HOME/jre/sh/java"
    else
-        JAVACMD=$JAVA_HOME/bin/java
+        JAVACMD="$JAVA_HOME/bin/java"
    fi
    if [ ! -x "$JAVACMD" ] ; then
        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
@@ -132,7 +98,7 @@ Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
    fi
 else
-    JAVACMD=java
+    JAVACMD="java"
    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.

 Please set the JAVA_HOME variable in your environment to match the
@@ -140,95 +106,75 @@ location of your Java installation."
 fi

 # Increase the maximum file descriptors if we can.
-if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
-    case $MAX_FD in #(
-      max*)
-        MAX_FD=$( ulimit -H -n ) ||
-            warn "Could not query maximum file descriptor limit"
-    esac
-    case $MAX_FD in  #(
-      '' | soft) :;; #(
-      *)
-        ulimit -n "$MAX_FD" ||
-            warn "Could not set maximum file descriptor limit to $MAX_FD"
-    esac
-fi
-
-# Collect all arguments for the java command, stacking in reverse order:
-#   * args from the command line
-#   * the main class name
-#   * -classpath
-#   * -D...appname settings
-#   * --module-path (only if needed)
-#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
-
-# For Cygwin or MSYS, switch paths to Windows format before running java
-if "$cygwin" || "$msys" ; then
-    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
-    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
-
-    JAVACMD=$( cygpath --unix "$JAVACMD" )
-
-    # Now convert the arguments - kludge to limit ourselves to /bin/sh
-    for arg do
-        if
-            case $arg in                                #(
-              -*)   false ;;                            # don't mess with options #(
-              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
-                    [ -e "$t" ] ;;                      #(
-              *)    false ;;
-            esac
-        then
-            arg=$( cygpath --path --ignore --mixed "$arg" )
+if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
        fi
-        # Roll the args list around exactly as many times as the number of
-        # args, so each arg winds up back in the position where it started, but
-        # possibly modified.
-        #
-        # NB: a `for` loop captures its iteration list before it begins, so
-        # changing the positional parameters here affects neither the number of
-        # iterations, nor the values presented in `arg`.
-        shift                   # remove old arg
-        set -- "$@" "$arg"      # push replacement arg
-    done
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
 fi

-# Collect all arguments for the java command;
-#   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
-#     shell script including quotes and variable substitutions, so put them in
-#     double quotes to make sure that they get re-expanded; and
-#   * put everything else in single quotes, so that it's not re-expanded.
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi

-set -- \
-        "-Dorg.gradle.appname=$APP_BASE_NAME" \
-        -classpath "$CLASSPATH" \
-        org.gradle.wrapper.GradleWrapperMain \
-        "$@"
+# For Cygwin, switch paths to Windows format before running java
+if $cygwin ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`

-# Use "xargs" to parse quoted args.
-#
-# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
-#
-# In Bash we could simply go:
-#
-#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
-#   set -- "${ARGS[@]}" "$@"
-#
-# but POSIX shell has neither arrays nor command substitution, so instead we
-# post-process each arg (as a line of input to sed) to backslash-escape any
-# character that might be a shell metacharacter, then use eval to reverse
-# that process (while maintaining the separation between arguments), and wrap
-# the whole thing up as a single "set" statement.
-#
-# This will of course break if any of these variables contains a newline or
-# an unmatched quote.
-#
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option

-eval "set -- $(
-        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
-        xargs -n1 |
-        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
-        tr '\n' ' '
-    )" '"$@"'
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi

-exec "$JAVACMD" "$@"
+# Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules
+function splitJvmOpts() {
+    JVM_OPTS=("$@")
+}
+eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS
+JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME"
+
+exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@"
@@ -32,15 +32,12 @@ 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 execute
+if "%ERRORLEVEL%" == "0" goto init

 echo.
 echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
@@ -54,7 +51,7 @@ goto fail
 set JAVA_HOME=%JAVA_HOME:"=%
 set JAVA_EXE=%JAVA_HOME%/bin/java.exe

-if exist "%JAVA_EXE%" goto execute
+if exist "%JAVA_EXE%" goto init

 echo.
 echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
@@ -64,14 +61,34 @@ 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 %*
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%

 :end
@rem End local scope for the variables with windows NT shell
@@ -1,12 +1,4 @@
 rootProject.name = 'drip'
-
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

 include ':app'
-
-includeBuild('../node_modules/react-native-gradle-plugin')
-
-if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
-    include(":ReactAndroid")
-    project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
-}
@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
-}
@@ -1,43 +0,0 @@
-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,
-  },
-})
@@ -3,27 +3,23 @@ import { ScrollView, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 import moment from 'moment'

+import { connect } from 'react-redux'
+import { navigate } from '../slices/navigation'
+import { getDate, setDate } from '../slices/date'
+
 import AppText from './common/app-text'
-import Asterisk from './common/Asterisk'
 import Button from './common/button'
-import Footnote from './common/Footnote'

 import cycleModule from '../lib/cycle'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
-import {
-  determinePredictionText,
-  formatWithOrdinalSuffix,
-} from './helpers/home'
-import {
-  fertilityTrackingObservable,
-  periodPredictionObservable,
-} from '../local-storage'
+import { determinePredictionText, formatWithOrdinalSuffix } from './helpers/home'

 import { Colors, Fonts, Sizes, Spacing } from '../styles'
-import { LocalDate } from '@js-joda/core'
+import { LocalDate } from 'js-joda'
 import { useTranslation } from 'react-i18next'

 const Home = ({ navigate, setDate }) => {
+
  const { t } = useTranslation()

  function navigateToCycleDayView() {
@@ -31,38 +27,29 @@ const Home = ({ navigate, setDate }) => {
    navigate('CycleDay')
  }

-  const isFertilityTrackingEnabled = fertilityTrackingObservable.value
  const todayDateString = LocalDate.now().toString()
  const { getCycleDayNumber, getPredictedMenses } = cycleModule()
  const cycleDayNumber = getCycleDayNumber(todayDateString)
  const { status, phase, statusText } =
-    isFertilityTrackingEnabled && getFertilityStatusForDay(todayDateString)
-  const isPeriodPredictionEnabled = periodPredictionObservable.value
+    getFertilityStatusForDay(todayDateString)
  const prediction = determinePredictionText(getPredictedMenses(), t)

-  const cycleDayText = cycleDayNumber
-    ? formatWithOrdinalSuffix(cycleDayNumber)
-    : ''
+  const cycleDayText = cycleDayNumber ? formatWithOrdinalSuffix(cycleDayNumber) : ''

  return (
    <ScrollView
      style={styles.container}
      contentContainerStyle={styles.contentContainer}
    >
-      <AppText style={styles.title}>{moment().format('MMM Do YYYY')}</AppText>
+      <AppText style={styles.title}>{moment().format("MMM Do YYYY")}</AppText>

-      {/* display if at least 1 bleeding day has been entered */}
-      {cycleDayNumber && (
+      {cycleDayNumber &&
        <View style={styles.line}>
          <AppText style={styles.whiteSubtitle}>{cycleDayText}</AppText>
-          <AppText style={styles.turquoiseText}>
-            {t('labels.home.cycleDay')}
-          </AppText>
+          <AppText style={styles.turquoiseText}>{t('labels.home.cycleDay')}</AppText>
        </View>
-      )}
-
-      {/* display if fertility tracking enabled and if phase 1, 2 or 3 has been identified  */}
-      {isFertilityTrackingEnabled && phase && (
+      }
+      {phase &&
        <View style={styles.line}>
          <AppText style={styles.whiteSubtitle}>
            {formatWithOrdinalSuffix(phase)}
@@ -73,24 +60,33 @@ const Home = ({ navigate, setDate }) => {
          <AppText style={styles.turquoiseText}>{status}</AppText>
          <Asterisk />
        </View>
-      )}
-
-      {isPeriodPredictionEnabled && (
-        <View style={styles.line}>
-          <AppText style={styles.turquoiseText}>{prediction}</AppText>
-        </View>
-      )}
-
-      {!isFertilityTrackingEnabled && <View style={styles.largePadding}></View>}
+      }
+      <View style={styles.line}>
+        <AppText style={styles.turquoiseText}>{prediction}</AppText>
+      </View>
      <Button isCTA isSmall={false} onPress={navigateToCycleDayView}>
        {t('labels.home.addDataForToday')}
      </Button>
-      {phase && <Footnote colorLabel="greyLight">{statusText}</Footnote>}
+      {phase && (
+        <View style={styles.asteriskLine}>
+          <Asterisk />
+          <AppText linkStyle={styles.whiteText} style={styles.greyText}>
+            {statusText}
+          </AppText>
+        </View>
+      )}
    </ScrollView>
  )
 }

+const Asterisk = () => {
+  return <AppText style={styles.asterisk}>*</AppText>
+}
+
 const styles = StyleSheet.create({
+  asterisk: {
+    color: Colors.orange,
+  },
  container: {
    backgroundColor: Colors.purple,
    flex: 1,
@@ -106,6 +102,12 @@ const styles = StyleSheet.create({
    marginBottom: Spacing.tiny,
    marginTop: Spacing.small,
  },
+  asteriskLine: {
+    flexDirection: 'row',
+    alignContent: 'flex-start',
+    marginBottom: Spacing.tiny,
+    marginTop: Spacing.small,
+  },
  title: {
    color: Colors.purpleLight,
    fontFamily: Fonts.bold,
@@ -120,14 +122,34 @@ const styles = StyleSheet.create({
    color: 'white',
    fontSize: Sizes.subtitle,
  },
-  largePadding: {
-    padding: Spacing.large,
+  whiteText: {
+    color: 'white',
  },
+  greyText: {
+    color: Colors.greyLight,
+    paddingLeft: Spacing.base,
+  }
 })

+const mapStateToProps = (state) => {
+  return ({
+    date: getDate(state),
+  })
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return ({
+    navigate: (page) => dispatch(navigate(page)),
+    setDate: (date) => dispatch(setDate(date)),
+  })
+}
+
 Home.propTypes = {
  navigate: PropTypes.func,
-  setDate: PropTypes.func,
+  setDate: PropTypes.func
 }

-export default Home
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Home)
@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { BackHandler, StyleSheet, View } from 'react-native'
+import { useTranslation } from 'react-i18next'
+
+import AppPage from './common/app-page'
+import AppText from './common/app-text'
+import Button from './common/button'
+import Segment from './common/segment'
+
+import { saveLicenseFlag } from '../local-storage'
+
+import { Containers } from '../styles'
+
+export default function License({ setLicense }) {
+  const onAcceptLicense = async () => {
+    await saveLicenseFlag()
+    setLicense()
+  }
+
+  const { t } = useTranslation()
+  const currentYear = new Date().getFullYear()
+
+  return (
+    <AppPage testID="licensePage">
+      <Segment last testID="test" title={t("settings.license.title")}>
+        <AppText testID="test">{t("settings.license.text", { currentYear })}</AppText>
+        <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>
+      </Segment>
+    </AppPage>
+  )
+}
+
+License.propTypes = {
+  setLicense: PropTypes.func.isRequired
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.rowContainer
+  }
+})
@@ -1,4 +1,7 @@
-import React, { useState, useEffect } from 'react'
+import React, { Component } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Provider } from 'react-redux'
+import nodejs from 'nodejs-mobile-react-native'

 import { getLicenseFlag, saveEncryptionFlag } from '../local-storage'
 import { openDb } from '../db'
@@ -6,47 +9,96 @@ import { openDb } from '../db'
 import App from './app'
 import AppLoadingView from './common/app-loading'
 import AppStatusBar from './common/app-status-bar'
-import AcceptLicense from './AcceptLicense'
+import License from './License'
 import PasswordPrompt from './password-prompt'

-export default function AppWrapper() {
-  const [isLoading, setIsLoading] = useState(true)
-  const [isLicenseAccepted, setIsLicenseAccepted] = useState(false)
-  const [isDbEncrypted, setIsDbEncrypted] = useState(false)
+import store from '../store'

-  const checkIsLicenseAccepted = async () => {
+export default class AppWrapper extends Component {
+  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()
-    setIsLicenseAccepted(isLicenseFlagSet)
-    setIsLoading(false)
+    if (!isLicenseFlagSet) {
+      this.enableShowLicenseAgreement()
+    } else {
+      this.setState({ isCheckingLicenseAgreement: false })
+    }
  }

-  const checkIsDbEncrypted = async () => {
-    const isEncrypted = !(await openDb())
-    if (isEncrypted) setIsDbEncrypted(true)
-    await saveEncryptionFlag(isEncrypted)
+  async checkDbPasswordSet() {
+    const canConnectToDb = await openDb()
+    if (canConnectToDb) {
+      this.enableShowApp()
+      await saveEncryptionFlag(false)
+      return false
+    }
+    this.setState({ shouldShowPasswordPrompt: true })
+    await saveEncryptionFlag(true)
  }

-  useEffect(() => {
-    checkIsLicenseAccepted()
-    checkIsDbEncrypted()
-  }, [])
-
-  if (isLoading) {
-    return <AppLoadingView />
+  enableShowLicenseAgreement = () => {
+    this.setState({
+      shouldShowLicenseAgreement: true,
+      isCheckingLicenseAgreement: false,
+    })
  }

-  if (!isLicenseAccepted) {
-    return <AcceptLicense setLicense={() => setIsLicenseAccepted(true)} />
+  disableShowLicenseAgreement = () => {
+    this.setState({ shouldShowLicenseAgreement: false })
  }

-  return (
-    <>
-      <AppStatusBar />
-      {isDbEncrypted ? (
-        <PasswordPrompt enableShowApp={() => setIsDbEncrypted(false)} />
-      ) : (
-        <App restartApp={() => checkIsDbEncrypted()} />
-      )}
-    </>
-  )
+  enableShowApp = () => {
+    this.setState({
+      shouldShowApp: true,
+      shouldShowPasswordPrompt: false,
+    })
+  }
+
+  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 restartApp={() => this.checkDbPasswordSet()} />
+    }
+
+    return (
+      <Provider store={store}>
+        <View style={styles.container}>
+          <AppStatusBar />
+          {initialView}
+        </View>
+      </Provider>
+    )
+  }
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+})
@@ -1,65 +1,91 @@
-import React, { useState, useEffect } from 'react'
+import React, { Component } from 'react'
 import { BackHandler, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'

-import { LocalDate } from '@js-joda/core'
+import { connect } from 'react-redux'
+
+import { getDate } from '../slices/date'
+import { getNavigation, navigate, goBack } from '../slices/navigation'

 import Header from './header'
 import Menu from './menu'
 import { viewsList } from './views'
-import { pages } from './pages'
+import { isSettingsView } from './pages'

+import { headerTitles } from '../i18n/en/labels'
 import setupNotifications from '../lib/notifications'
-import { closeDb } from '../db'
+import { getCycleDay, closeDb } from '../db'
+
+class App extends Component {
+  static propTypes = {
+    date: PropTypes.string,
+    navigation: PropTypes.object.isRequired,
+    navigate: PropTypes.func,
+    goBack: PropTypes.func,
+    restartApp: 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 {
-      const { parent } = pages.find((p) => p.component === currentPage)
-
-      setCurrentPage(parent)
+      this.props.goBack()
    }

    return true
  }

-  useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      goBack
-    )
-
-    return () => backHandler.remove()
-  })
-
-  useEffect(() => setupNotifications(setCurrentPage, setDate), [])
-
-  const Page = viewsList[currentPage]
-  const isTemperatureEditView = currentPage === 'TemperatureEditView'
-  const headerProps = { navigate: setCurrentPage }
-  const pageProps = {
-    date,
-    setDate,
-    isTemperatureEditView,
-    navigate: setCurrentPage,
+  componentWillUnmount() {
+    this.backHandler.remove()
  }

-  return (
-    <View style={styles.container}>
-      <Header {...headerProps} />
-      <Page {...pageProps} restartApp={restartApp} />
-      <Menu currentPage={currentPage} navigate={setCurrentPage} />
-    </View>
-  )
-}
+  render() {
+    const { date, navigation, goBack, restartApp } = this.props
+    const { currentPage } = navigation

-App.propTypes = {
-  restartApp: PropTypes.func,
+    if (!currentPage) {
+      return false
+    }
+
+    const Page = viewsList[currentPage]
+    const title = headerTitles[currentPage]
+
+    const isSettingsSubView = isSettingsView(currentPage)
+    const isTemperatureEditView = currentPage === 'TemperatureEditView'
+
+    const headerProps = {
+      title,
+      handleBack: isSettingsSubView ? goBack : null,
+    }
+
+    const pageProps = {
+      cycleDay: date && getCycleDay(date),
+      date,
+      isTemperatureEditView,
+    }
+
+    return (
+      <View style={styles.container}>
+        <Header {...headerProps} />
+        <Page {...pageProps} restartApp={restartApp} />
+        <Menu />
+      </View>
+    )
+  }
 }

 const styles = StyleSheet.create({
@@ -68,4 +94,18 @@ const styles = StyleSheet.create({
  },
 })

-export default App
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+    navigation: getNavigation(state),
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    navigate: (page) => dispatch(navigate(page)),
+    goBack: () => dispatch(goBack()),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(App)
@@ -1,10 +1,15 @@
-import React from 'react'
+import React, { Component } 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,
@@ -12,45 +17,83 @@ import {
  todayToCalFormat,
 } from './helpers/calendar'

-const CalendarView = ({ setDate, navigate }) => {
-  const bleedingDays = getBleedingDaysSortedByDate()
-  const predictedMenses = cycleModule().getPredictedMenses()
-
-  const passDateToDayView = ({ dateString }) => {
-    setDate(dateString)
-    navigate('CycleDay')
+class CalendarView extends Component {
+  static propTypes = {
+    setDate: PropTypes.func.isRequired,
+    navigate: PropTypes.func.isRequired,
  }

-  const markedDates = Object.assign(
-    {},
-    todayToCalFormat(),
-    toCalFormat(bleedingDays),
-    predictionToCalFormat(predictedMenses)
-  )
+  constructor(props) {
+    super(props)
+    this.bleedingDays = getBleedingDaysSortedByDate()
+    const predictedMenses = cycleModule().getPredictedMenses()
+    this.state = {
+      bleedingDaysInCalFormat: toCalFormat(this.bleedingDays),
+      predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
+      todayInCalFormat: todayToCalFormat(),
+    }

-  return (
-    <View style={styles.container}>
-      <CalendarList
-        // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
-        firstDay={1}
-        onDayPress={passDateToDayView}
-        markedDates={markedDates}
-        markingType="custom"
-        theme={calendarTheme}
-        // Max amount of months allowed to scroll to the past.
-        pastScrollRange={120}
-      />
-    </View>
-  )
+    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,
+      bleedingDaysInCalFormat,
+      predictedBleedingDaysInCalFormat
+    )
+
+    return (
+      <View style={styles.container}>
+        <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)}
+          markedDates={markedDates}
+          markingType='custom'
+          theme={calendarTheme}
+          // Max amount of months allowed to scroll to the past.
+          pastScrollRange={120}
+        />
+      </View>
+    )
+  }
 }

 const styles = StyleSheet.create({
  container: { flex: 1 },
 })

-CalendarView.propTypes = {
-  setDate: PropTypes.func.isRequired,
-  navigate: PropTypes.func.isRequired,
+const mapDispatchToProps = (dispatch) => {
+  return {
+    setDate: (date) => dispatch(setDate(date)),
+    navigate: (page) => dispatch(navigate(page)),
+  }
 }

-export default CalendarView
+export default connect(null, mapDispatchToProps)(CalendarView)
@@ -4,44 +4,35 @@ import { StyleSheet, View } from 'react-native'

 import AppText from '../common/app-text'

-import { Sizes, Typography } from '../../styles'
+import { Typography } from '../../styles'
 import { CHART_YAXIS_WIDTH } from '../../config'
 import { shared as labels } from '../../i18n/en/labels'

 const ChartLegend = ({ height }) => {
  return (
    <View style={[styles.container, { height }]}>
-      <View style={[styles.singleLabelContainer, { height: height / 2 }]}>
-        <AppText style={styles.textBold}>#</AppText>
-      </View>
-      <View style={[styles.singleLabelContainer, { height: height / 2 }]}>
-        <AppText style={styles.text}>{labels.date}</AppText>
-      </View>
+      <AppText style={styles.textBold}>#</AppText>
+      <AppText style={styles.text}>{labels.date}</AppText>
    </View>
  )
 }

 ChartLegend.propTypes = {
-  height: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired
 }

 const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'flex-end',
-    width: CHART_YAXIS_WIDTH,
-  },
-  singleLabelContainer: {
-    justifyContent: 'space-around',
-    alignItems: 'center',
+    width: CHART_YAXIS_WIDTH
  },
  text: {
    ...Typography.label,
-    fontSize: Sizes.footnote,
  },
  textBold: {
-    ...Typography.labelBold,
-  },
+    ...Typography.labelBold
+  }
 })

 export default ChartLegend
@@ -1,21 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'

-import { Shape } from '@react-native-community/art'
+import { Shape } from 'react-native/Libraries/ART/ReactNativeART'

 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 <Shape d={path} stroke={color} strokeWidth={width} />
+  return (
+    <Shape d={path} stroke={color} strokeWidth={width} />
+  )
 }

 ChartLine.propTypes = {
@@ -24,7 +22,7 @@ ChartLine.propTypes = {
 }

 ChartLine.defaultProps = {
-  isNfpLine: false,
+  isNfpLine: false
 }

 export default ChartLine
@@ -1,193 +1,267 @@
-import React, { useEffect, useState } from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Dimensions, PixelRatio, StyleSheet, View } from 'react-native'
+import {
+  ActivityIndicator,
+  Dimensions,
+  FlatList,
+  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 Tutorial from './tutorial'
 import YAxis from './y-axis'

+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
+
 import { getCycleDaysSortedByDate } from '../../db'
-import {
-  getChartFlag,
-  setChartFlag,
-  desireTrackingCategoryObservable,
-  moodTrackingCategoryObservable,
-  noteTrackingCategoryObservable,
-  painTrackingCategoryObservable,
-  sexTrackingCategoryObservable,
-  temperatureTrackingCategoryObservable,
-  mucusTrackingCategoryObservable,
-  cervixTrackingCategoryObservable,
-} from '../../local-storage'
-import { makeColumnInfo } from '../helpers/chart'
+import nothingChanged from '../../db/db-unchanged'
+import { getChartFlag, scaleObservable, setChartFlag } from '../../local-storage'
+import { makeColumnInfo, nfpLines } from '../helpers/chart'

 import {
  CHART_COLUMN_WIDTH,
  CHART_GRID_LINE_HORIZONTAL_WIDTH,
  CHART_SYMPTOM_HEIGHT_RATIO,
  CHART_XAXIS_HEIGHT_RATIO,
-  SYMPTOMS,
+  SYMPTOMS
 } from '../../config'
-import { Spacing } from '../../styles'
+import { shared } from '../../i18n/en/labels'
+import { Colors, Spacing } from '../../styles'

-const getSymptomsFromCycleDays = (cycleDays) =>
-  SYMPTOMS.filter((symptom) => cycleDays.some((cycleDay) => cycleDay[symptom]))
-
-const CycleChart = ({ navigate, setDate }) => {
-  const [shouldShowHint, setShouldShowHint] = useState(false)
-
-  useEffect(() => {
-    let isMounted = true
-
-    async function checkShouldShowHint() {
-      const flag = await getChartFlag()
-      if (isMounted) {
-        setShouldShowHint(flag === 'true')
-      }
-    }
-
-    checkShouldShowHint()
-
-    return () => {
-      isMounted = false
-    }
-  }, [])
-
-  const hideHint = () => {
-    setShouldShowHint(false)
-    setChartFlag()
+class CycleChart extends Component {
+  static propTypes = {
+    navigate: PropTypes.func,
+    end: PropTypes.bool
  }

-  const cycleDaysSortedByDate = getCycleDaysSortedByDate()
+  constructor(props) {
+    super(props)

-  const chartSymptoms = getSymptomsFromCycleDays(cycleDaysSortedByDate)
-  const symptomRowSymptoms = chartSymptoms.filter(
-    (symptom) => symptom !== 'temperature'
-  )
+    this.state = {}
+    this.cycleDaysSortedByDate = getCycleDaysSortedByDate()
+    this.getFhmAndLtlInfo = nfpLines()
+    this.shouldShowTemperatureColumn = false

-  const symptomRowEnabledSymptoms = symptomRowSymptoms.filter((symptom) => {
-    if (symptom === 'sex') {
-      return sexTrackingCategoryObservable.value ? symptom : null
-    } else if (symptom === 'mucus') {
-      return mucusTrackingCategoryObservable.value ? symptom : null
-    } else if (symptom === 'cervix') {
-      return cervixTrackingCategoryObservable.value ? symptom : null
-    } else if (symptom === 'desire') {
-      return desireTrackingCategoryObservable.value ? symptom : null
-    } else if (symptom === 'pain') {
-      return painTrackingCategoryObservable.value ? symptom : null
-    } else if (symptom === 'mood') {
-      return moodTrackingCategoryObservable.value ? symptom : null
-    } else if (symptom === 'note') {
-      return noteTrackingCategoryObservable.value ? symptom : null
-    } else {
-      return symptom
+    this.checkShouldShowHint()
+    this.prepareSymptomData()
+  }
+
+  componentWillUnmount() {
+    this.cycleDaysSortedByDate.removeListener(this.handleDbChange)
+    this.removeObvListener()
+  }
+
+  checkShouldShowHint = async () => {
+    const flag = await getChartFlag()
+    const shouldShowHint = flag === 'true' ? true : false
+    this.setState({ shouldShowHint })
+  }
+
+  setShouldShowHint = async () => {
+    await setChartFlag()
+    this.setState({ shouldShowHint: false })
+  }
+
+  onLayout = () => {
+    if (this.state.chartHeight) return false
+
+    this.reCalculateChartInfo()
+    this.updateListeners(this.reCalculateChartInfo)
+  }
+
+  prepareSymptomData = () => {
+    this.symptomRowSymptoms = SYMPTOMS.filter((symptomName) => {
+      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
    }
-  })
+  }

-  const isTemperatureEnabled = temperatureTrackingCategoryObservable.value
-  const shouldShowTemperatureColumn =
-    isTemperatureEnabled && chartSymptoms.indexOf('temperature') > -1
-  const shouldShowNoDataWarning =
-    isTemperatureEnabled && chartSymptoms.indexOf('temperature') <= -1
-
-  const { width, height } = Dimensions.get('window')
-  const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
-
-  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(
-      symptomRowEnabledSymptoms.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 }) => {
+  renderColumn = ({ item, index }) => {
    return (
      <DayColumn
-        setDate={setDate}
        dateString={item}
-        navigate={navigate}
-        symptomHeight={symptomHeight}
-        columnHeight={columnHeight}
-        symptomRowSymptoms={symptomRowEnabledSymptoms}
-        chartSymptoms={chartSymptoms}
-        shouldShowTemperatureColumn={shouldShowTemperatureColumn}
-        xAxisHeight={xAxisHeight}
+        index={index}
+        navigate={this.props.navigate}
+        symptomHeight={this.symptomHeight}
+        columnHeight={this.columnHeight}
+        symptomRowSymptoms={this.symptomRowSymptoms}
+        chartSymptoms={this.chartSymptoms}
+        shouldShowTemperatureColumn={this.shouldShowTemperatureColumn}
+        getFhmAndLtlInfo={this.getFhmAndLtlInfo}
+        xAxisHeight={this.xAxisHeight}
      />
    )
  }

-  const hasDataToDisplay = chartSymptoms.length > 0
+  reCalculateChartInfo = () => {
+    const { width, height } = Dimensions.get('window')

-  if (!hasDataToDisplay) {
-    return <NoData navigate={navigate} />
+    this.xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
+    const remainingHeight = height * 0.7 - this.xAxisHeight
+    this.symptomHeight = PixelRatio.roundToNearestPixel(
+      remainingHeight
+      * CHART_SYMPTOM_HEIGHT_RATIO
+    )
+    this.symptomRowHeight = PixelRatio.roundToNearestPixel(
+      this.symptomRowSymptoms.length * this.symptomHeight
+    ) + CHART_GRID_LINE_HORIZONTAL_WIDTH
+    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 })
  }

-  return (
-    <AppPage
-      contentContainerStyle={styles.pageContainer}
-      scrollViewStyle={styles.page}
-    >
-      <View style={styles.chartContainer}>
-        {shouldShowHint && <Tutorial onClose={hideHint} />}
-        {shouldShowNoDataWarning && <NoTemperature />}
-        <View style={styles.chartArea}>
-          <YAxis
-            height={columnHeight}
-            symptomsToDisplay={symptomRowEnabledSymptoms}
-            symptomsSectionHeight={symptomRowHeight}
-            shouldShowTemperatureColumn={shouldShowTemperatureColumn}
-            xAxisHeight={xAxisHeight}
-          />
-          <MainGrid
-            data={columns}
-            renderItem={renderColumn}
-            initialNumToRender={numberOfColumnsToRender}
-            contentContainerStyle={{ height: chartHeight }}
-          />
-          {shouldShowTemperatureColumn && (
-            <HorizontalGrid height={columnHeight} />
+  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 &&
+            <Tutorial onClose={this.setShouldShowHint} />
+          }
+          {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}
+                  symptomsToDisplay={this.symptomRowSymptoms}
+                  symptomsSectionHeight={this.symptomRowHeight}
+                  shouldShowTemperatureColumn=
+                    {this.shouldShowTemperatureColumn}
+                  xAxisHeight={this.xAxisHeight}
+                />
+              )}
+
+              {chartHeight &&
+               <FlatList
+                 horizontal={true}
+                 inverted={true}
+                 showsHorizontalScrollIndicator={false}
+                 data={this.state.columns}
+                 renderItem={this.renderColumn}
+                 keyExtractor={item => item}
+                 initialNumToRender={numberOfColumnsToRender}
+                 windowSize={30}
+                 onLayout={() => this.setState({chartLoaded: true})}
+                 onEndReached={() => this.setState({end: true})}
+                 ListFooterComponent={<LoadingMoreView end={this.state.end}/>}
+                 updateCellsBatchingPeriod={800}
+                 contentContainerStyle={{ height: chartHeight }}
+               />
+              }
+              {chartHeight && chartLoaded && (
+                <React.Fragment>
+                  {this.shouldShowTemperatureColumn &&
+                    <HorizontalGrid height={this.columnHeight} />
+                  }
+                </React.Fragment>
+              )}
+            </View>
          )}
        </View>
-      </View>
-    </AppPage>
+      </AppPage>
+    )
+  }
+}
+
+function LoadingMoreView({ end }) {
+  return (
+    <View style={styles.loadingContainer}>
+      {!end && <ActivityIndicator size={'large'} color={Colors.orange}/>}
+    </View>
  )
 }

-CycleChart.propTypes = {
-  navigate: PropTypes.func,
-  setDate: PropTypes.func,
+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
+  }
 })

-export default CycleChart
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(CycleChart)
@@ -19,20 +19,11 @@ const CycleDayLabel = ({ height, date }) => {

  return (
    <View style={[styles.container, { height }]}>
-      <View style={{ ...styles.labelRow, height: height / 2 }}>
-        <AppText style={styles.textBold}>{cycleDayLabel}</AppText>
-      </View>
-
-      <View style={{ ...styles.labelRow, height: height / 2 }}>
-        {isFirstDayOfMonth && (
-          <AppText style={styles.textFootnote}>
-            {momentDate.format('MMM')}
-          </AppText>
-        )}
-
-        {!isFirstDayOfMonth && (
-          <AppText style={styles.textSmall}>{dayOfMonth}</AppText>
-        )}
+      <AppText style={styles.textBold}>{cycleDayLabel}</AppText>
+      <View style={styles.dateLabel}>
+        <AppText style={styles.text}>
+          {isFirstDayOfMonth ? momentDate.format('MMM') : dayOfMonth}
+        </AppText>
        {!isFirstDayOfMonth && (
          <AppText style={styles.textLight}>
            {getOrdinalSuffix(dayOfMonth)}
@@ -54,21 +45,17 @@ const styles = StyleSheet.create({
    justifyContent: 'flex-end',
    left: 4,
  },
-  textSmall: {
+  text: {
    ...Typography.label,
    fontSize: Sizes.small,
  },
-  textFootnote: {
-    ...Typography.label,
-    fontSize: Sizes.footnote,
-  },
  textBold: {
    ...Typography.labelBold,
  },
  textLight: {
    ...Typography.labelLight,
  },
-  labelRow: {
+  dateLabel: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
@@ -1,7 +1,10 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { TouchableOpacity } from 'react-native'
-import moment from 'moment'
+import { connect } from 'react-redux'
+
+import { setDate } from '../../slices/date'
+import { navigate } from '../../slices/navigation'

 import { getCycleDay } from '../../db'

@@ -12,109 +15,125 @@ import CycleDayLabel from './cycle-day-label'
 import {
  symptomColorMethods,
  getTemperatureProps,
-  isSymptomDataComplete,
-  nfpLines,
+  isSymptomDataComplete
 } from '../helpers/chart'

-const DayColumn = ({
-  dateString,
-  chartSymptoms,
-  columnHeight,
-  setDate,
-  navigate,
-  shouldShowTemperatureColumn,
-  symptomHeight,
-  symptomRowSymptoms,
-  xAxisHeight,
-}) => {
-  const momentDate = moment(dateString)
-  const isWeekend = momentDate.day() == 0 || momentDate.day() == 6
-  const cycleDayData = getCycleDay(dateString)
-  let data = {}
+class DayColumn extends Component {
+  static propTypes = {
+    dateString: PropTypes.string.isRequired,
+    chartSymptoms: PropTypes.array,
+    columnHeight: PropTypes.number.isRequired,
+    getFhmAndLtlInfo: PropTypes.func.isRequired,
+    navigate: PropTypes.func.isRequired,
+    setDate: PropTypes.func.isRequired,
+    shouldShowTemperatureColumn: PropTypes.bool,
+    symptomHeight: PropTypes.number.isRequired,
+    symptomRowSymptoms: PropTypes.array,
+    xAxisHeight: PropTypes.number,
+  }

-  if (cycleDayData) {
-    data = chartSymptoms.reduce((symptomDataToDisplay, symptom) => {
-      const symptomData = cycleDayData[symptom]
+  constructor(props) {
+    super()

-      if (symptomData && symptom === 'temperature') {
-        symptomDataToDisplay[symptom] = getTemperatureProps(
-          symptomData,
-          columnHeight,
-          dateString
-        )
-      } else {
-        if (symptomData && !symptomData.exclude) {
-          // if symptomColorMethods entry doesn't exist for given symptom,
-          // use 'default'
-          const getSymptomColorIndex =
-            symptomColorMethods[symptom] || symptomColorMethods['default']
+    const { dateString, chartSymptoms, columnHeight } = props
+    const cycleDayData = getCycleDay(dateString)
+    this.data = {}

-          symptomDataToDisplay[symptom] = getSymptomColorIndex(symptomData)
+    if (cycleDayData) {
+      this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom, ) => {
+        const symptomData = cycleDayData[symptom]
+
+        if (symptomData && symptom === 'temperature') {
+          symptomDataToDisplay[symptom] =
+           getTemperatureProps(symptomData, columnHeight, dateString)
+        } else {
+          if (symptomData && ! symptomData.exclude) {
+            // if symptomColorMethods entry doesn't exist for given symptom,
+            // use 'default'
+            const getSymptomColorIndex =
+              symptomColorMethods[symptom] || symptomColorMethods['default']
+
+            symptomDataToDisplay[symptom] = getSymptomColorIndex(symptomData)
+          }
        }
-      }

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

-  const fhmAndLtl = nfpLines()(
-    dateString,
-    data.temperature ? data.temperature.value : null,
-    columnHeight
-  )
-
-  const onDaySelect = (date) => {
-    setDate(date)
-    navigate('CycleDay')
+  onDaySelect = (date) => {
+    this.props.setDate(date)
+    this.props.navigate('CycleDay')
  }

-  return (
-    <TouchableOpacity onPress={() => onDaySelect(dateString)} activeOpacity={1}>
-      {shouldShowTemperatureColumn && (
-        <TemperatureColumn
-          horizontalLinePosition={fhmAndLtl.drawLtlAt}
-          isVerticalLine={fhmAndLtl.drawFhmLine}
-          data={data && data.temperature}
+  shouldComponentUpdate() {
+    return false
+  }
+
+  render() {
+    const { columnHeight,
+      dateString,
+      shouldShowTemperatureColumn,
+      symptomHeight,
+      symptomRowSymptoms,
+      xAxisHeight
+    } = this.props
+
+    return (
+      <TouchableOpacity
+        onPress={() => this.onDaySelect(dateString)}
+        activeOpacity={1}
+      >
+
+        {shouldShowTemperatureColumn && <TemperatureColumn
+          horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
+          isVerticalLine={this.fhmAndLtl.drawFhmLine}
+          data={this.data && this.data.temperature}
          columnHeight={columnHeight}
-          isWeekend={isWeekend}
+        />}
+
+        <CycleDayLabel
+          height={xAxisHeight}
+          date={dateString}
        />
-      )}

-      <CycleDayLabel height={xAxisHeight} date={dateString} />
+        { symptomRowSymptoms.map((symptom, i) => {
+          const hasSymptomData =
+            Object.prototype.hasOwnProperty.call(this.data, symptom)
+          return (
+            <SymptomCell
+              index={i}
+              key={symptom}
+              symptom={symptom}
+              symptomValue={hasSymptomData && this.data[symptom]}
+              isSymptomDataComplete={
+                hasSymptomData && isSymptomDataComplete(symptom, dateString)
+              }
+              height={symptomHeight}
+            />)
+        }
+        )}

-      {symptomRowSymptoms.map((symptom, i) => {
-        const hasSymptomData = Object.prototype.hasOwnProperty.call(
-          data,
-          symptom
-        )
-        return (
-          <SymptomCell
-            index={i}
-            key={symptom}
-            symptom={symptom}
-            symptomValue={hasSymptomData && data[symptom]}
-            isSymptomDataComplete={
-              hasSymptomData && isSymptomDataComplete(symptom, dateString)
-            }
-            isWeekend={isWeekend}
-            height={symptomHeight}
-          />
-        )
-      })}
-    </TouchableOpacity>
-  )
+      </TouchableOpacity>
+    )
+  }
 }

-DayColumn.propTypes = {
-  dateString: PropTypes.string.isRequired,
-  chartSymptoms: PropTypes.array,
-  columnHeight: PropTypes.number.isRequired,
-  navigate: PropTypes.func.isRequired,
-  setDate: PropTypes.func.isRequired,
-  shouldShowTemperatureColumn: PropTypes.bool,
-  symptomHeight: PropTypes.number.isRequired,
-  symptomRowSymptoms: PropTypes.array,
-  xAxisHeight: PropTypes.number,
+const mapDispatchToProps = (dispatch) => {
+  return({
+    setDate: (date) => dispatch(setDate(date)),
+    navigate: (page) => dispatch(navigate(page)),
+  })
 }

-export default DayColumn
+export default connect(
+  null,
+  mapDispatchToProps,
+)(DayColumn)
@@ -1,84 +1,87 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Path, Shape } from '@react-native-community/art'
+import { Path, Shape } from 'react-native/Libraries/ART/ReactNativeART'

 import { Colors } from '../../styles'

 import {
  CHART_COLUMN_WIDTH,
  CHART_COLUMN_MIDDLE,
-  CHART_DOT_RADIUS_SYMPTOM,
-  CHART_DOT_RADIUS_TEMPERATURE,
-  CHART_STROKE_WIDTH,
+  CHART_DOT_RADIUS,
+  CHART_STROKE_WIDTH
 } from '../../config'

-const DotAndLine = ({
-  exclude,
-  leftTemperatureExclude,
-  leftY,
-  rightTemperatureExclude,
-  rightY,
-  y,
-}) => {
-  let excludeLeftLine, excludeRightLine, lineLeft, lineRight
-
-  if (leftY) {
-    const middleY = (leftY - y) / 2 + y
-    excludeLeftLine = leftTemperatureExclude || exclude
-    lineLeft = new Path().moveTo(CHART_COLUMN_MIDDLE, y).lineTo(0, middleY)
-  }
-  if (rightY) {
-    const middleY = (y - rightY) / 2 + rightY
-    excludeRightLine = rightTemperatureExclude || exclude
-    lineRight = new Path()
-      .moveTo(CHART_COLUMN_MIDDLE, y)
-      .lineTo(CHART_COLUMN_WIDTH, middleY)
+export default class DotAndLine extends Component {
+  static propTypes = {
+    exclude: PropTypes.bool,
+    leftY: PropTypes.number,
+    leftTemperatureExclude: PropTypes.bool,
+    rightY: PropTypes.number,
+    rightTemperatureExclude: PropTypes.bool,
+    y: PropTypes.number.isRequired
  }

-  const dot = new Path()
-    .moveTo(CHART_COLUMN_MIDDLE, y - CHART_DOT_RADIUS_TEMPERATURE)
-    .arc(0, CHART_DOT_RADIUS_TEMPERATURE * 2, CHART_DOT_RADIUS_TEMPERATURE)
-    .arc(0, CHART_DOT_RADIUS_TEMPERATURE * -2, CHART_DOT_RADIUS_TEMPERATURE)
-  const dotColor = exclude ? Colors.turquoise : Colors.turquoiseDark
-  const lineColorLeft = excludeLeftLine
-    ? Colors.turquoise
-    : Colors.turquoiseDark
-  const lineColorRight = excludeRightLine
-    ? Colors.turquoise
-    : Colors.turquoiseDark
+  shouldComponentUpdate(newProps) {
+    return Object.keys(newProps).some(key => newProps[key] != this.props[key])
+  }

-  return (
-    <React.Fragment>
-      <Shape
-        d={lineLeft}
-        stroke={lineColorLeft}
-        strokeWidth={CHART_STROKE_WIDTH}
-        key={y}
-      />
-      <Shape
-        d={lineRight}
-        stroke={lineColorRight}
-        strokeWidth={CHART_STROKE_WIDTH}
-        key={y + CHART_DOT_RADIUS_SYMPTOM}
-      />
-      <Shape
-        d={dot}
-        stroke={dotColor}
-        strokeWidth={CHART_STROKE_WIDTH}
-        fill={dotColor}
-        key="dot"
-      />
-    </React.Fragment>
-  )
+  render() {
+    const {
+      exclude,
+      leftTemperatureExclude,
+      leftY,
+      rightTemperatureExclude,
+      rightY,
+      y
+    } = this.props
+    let excludeLeftLine, excludeRightLine, lineLeft, lineRight
+
+    if (leftY) {
+      const middleY = ((leftY - y) / 2) + y
+      excludeLeftLine = leftTemperatureExclude || exclude
+      lineLeft = new Path()
+        .moveTo(CHART_COLUMN_MIDDLE, y)
+        .lineTo(0, middleY)
+    }
+    if (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)
+      .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 ?
+      Colors.turquoise : Colors.turquoiseDark
+    const lineColorRight = excludeRightLine ?
+      Colors.turquoise : Colors.turquoiseDark
+
+    return(
+      <React.Fragment>
+        <Shape
+          d={lineLeft}
+          stroke={lineColorLeft}
+          strokeWidth={CHART_STROKE_WIDTH}
+          key={y}
+        />
+        <Shape
+          d={lineRight}
+          stroke={lineColorRight}
+          strokeWidth={CHART_STROKE_WIDTH}
+          key={y + CHART_DOT_RADIUS}
+        />
+        <Shape
+          d={dot}
+          stroke={dotColor}
+          strokeWidth={CHART_STROKE_WIDTH}
+          fill="white"
+          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
@@ -5,19 +5,18 @@ 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 <View key={tick} top={tick} {...styles.line} />
+  return getTickPositions(height).map(tick => {
+    return (
+      <View key={tick} top={tick} {...styles.line}/>
+    )
  })
 }

 HorizontalGrid.propTypes = {
-  height: PropTypes.number,
+  height: PropTypes.number
 }

 const styles = StyleSheet.create({
@@ -26,9 +25,9 @@ const styles = StyleSheet.create({
    borderBottomColor: Colors.grey,
    borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
    left: CHART_YAXIS_WIDTH,
-    position: 'absolute',
-    right: 0,
-  },
+    position:'absolute',
+    right: 0
+  }
 })

 export default HorizontalGrid
@@ -1,27 +0,0 @@
-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
@@ -1,32 +0,0 @@
-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
@@ -5,6 +5,9 @@ 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'

@@ -12,12 +15,7 @@ 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>
@@ -30,8 +28,17 @@ NoData.propTypes = {

 const styles = StyleSheet.create({
  container: {
-    ...Containers.centerItems,
-  },
+    ...Containers.centerItems
+  }
 })

-export default NoData
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(NoData)
@@ -1,19 +0,0 @@
-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
@@ -5,8 +5,8 @@ import { StyleSheet, View } from 'react-native'
 import { Colors, Containers } from '../../styles'
 import {
  CHART_COLUMN_WIDTH,
-  CHART_DOT_RADIUS_SYMPTOM,
-  CHART_GRID_LINE_HORIZONTAL_WIDTH,
+  CHART_DOT_RADIUS,
+  CHART_GRID_LINE_HORIZONTAL_WIDTH
 } from '../../config'

 const SymptomCell = ({
@@ -14,39 +14,22 @@ const SymptomCell = ({
  index,
  symptom,
  symptomValue,
-  isSymptomDataComplete,
-  isWeekend,
+  isSymptomDataComplete
 }) => {
+
  const shouldDrawDot = symptomValue !== false
-  // Determine the background color based on isWeekend prop
-  const backgroundColor = isWeekend ? Colors.greyVeryLight : 'white'
-  const styleCell =
-    index !== 0
-      ? [
-          styles.cell,
-          {
-            height,
-            width: CHART_COLUMN_WIDTH,
-            backgroundColor: backgroundColor,
-          },
-        ]
-      : [
-          styles.cell,
-          {
-            height,
-            width: CHART_COLUMN_WIDTH,
-            backgroundColor: backgroundColor,
-          },
-          styles.topBorder,
-        ]
+  const styleCell = index !== 0
+    ? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
+    : [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder]
  let styleDot
+
  if (shouldDrawDot) {
    const styleSymptom = Colors.iconColors[symptom]
    const symptomColor = styleSymptom.shades[symptomValue]
-    const isMucusOrCervix = symptom === 'mucus' || symptom === 'cervix'
-    const backgroundColor =
-      isMucusOrCervix && !isSymptomDataComplete ? 'white' : symptomColor
-    const borderWidth = isMucusOrCervix && !isSymptomDataComplete ? 2 : 0
+    const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix')
+    const backgroundColor = (isMucusOrCervix && !isSymptomDataComplete) ?
+      'white' : symptomColor
+    const borderWidth = (isMucusOrCervix && !isSymptomDataComplete) ? 2 : 0
    const borderColor = symptomColor
    styleDot = [styles.dot, { backgroundColor, borderColor, borderWidth }]
  }
@@ -62,27 +45,30 @@ SymptomCell.propTypes = {
  height: PropTypes.number,
  index: PropTypes.number.isRequired,
  symptom: PropTypes.string,
-  symptomValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+  symptomValue: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number,
+  ]),
  isSymptomDataComplete: PropTypes.bool,
-  isWeekend: PropTypes.bool,
 }

 const styles = StyleSheet.create({
  cell: {
+    backgroundColor: 'white',
    borderBottomColor: Colors.grey,
    borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
    borderLeftColor: Colors.grey,
    borderLeftWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
-    ...Containers.centerItems,
+    ...Containers.centerItems
  },
  topBorder: {
    borderTopColor: Colors.grey,
    borderTopWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
  },
  dot: {
-    width: CHART_DOT_RADIUS_SYMPTOM * 2,
-    height: CHART_DOT_RADIUS_SYMPTOM * 2,
-    borderRadius: 50,
-  },
+    width: CHART_DOT_RADIUS * 2,
+    height: CHART_DOT_RADIUS * 2,
+    borderRadius: 50
+  }
 })
 export default SymptomCell
@@ -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
@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Colors } from '../../styles'
+import { StyleSheet } from 'react-native'

-import { Surface, Path } from '@react-native-community/art'
+import { Surface , Path } from 'react-native/Libraries/ART/ReactNativeART'

 import ChartLine from './chart-line'
 import DotAndLine from './dot-and-line'
@@ -13,49 +13,44 @@ const TemperatureColumn = ({
  horizontalLinePosition,
  isVerticalLine,
  data,
-  columnHeight,
-  isWeekend,
+  columnHeight
 }) => {
  const x = CHART_STROKE_WIDTH / 2

-  const backgroundColor = isWeekend ? Colors.greyVeryLight : 'white'
  return (
    <Surface
      width={CHART_COLUMN_WIDTH}
      height={columnHeight}
-      style={{ backgroundColor: backgroundColor }}
+      style={styles.container}
    >
-      <ChartLine path={new Path().lineTo(0, columnHeight)} />

-      {horizontalLinePosition && (
-        <ChartLine
-          path={new Path()
-            .moveTo(0, horizontalLinePosition)
-            .lineTo(CHART_COLUMN_WIDTH, horizontalLinePosition)}
-          isNfpLine={true}
-          key="ltl"
-        />
-      )}
+      <ChartLine path={new Path().lineTo(0, columnHeight)}/>

-      {isVerticalLine && (
-        <ChartLine
-          path={new Path().moveTo(x, x).lineTo(x, columnHeight)}
-          isNfpLine={true}
-          key="fhm"
-        />
-      )}
+      {horizontalLinePosition && <ChartLine
+        path={new Path()
+          .moveTo(0, horizontalLinePosition)
+          .lineTo(CHART_COLUMN_WIDTH, horizontalLinePosition)
+        }
+        isNfpLine={true}
+        key='ltl'
+      />}
+
+      {isVerticalLine && <ChartLine
+        path={new Path().moveTo(x, x).lineTo(x, columnHeight)}
+        isNfpLine={true}
+        key='fhm'
+      />}
+
+      {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'
+      />}

-      {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"
-        />
-      )}
    </Surface>
  )
 }
@@ -65,7 +60,12 @@ TemperatureColumn.propTypes = {
  isVerticalLine: PropTypes.bool,
  data: PropTypes.object,
  columnHeight: PropTypes.number,
-  isWeekend: PropTypes.bool,
 }

+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white'
+  }
+})
+
 export default TemperatureColumn
@@ -7,22 +7,24 @@ import Tick from './tick'
 import { getTickList } from '../helpers/chart'

 const TickList = ({ height }) => {
+
  return (
    <View style={[styles.container, height]}>
-      {getTickList(height).map(
-        ({ isBold, label, position, shouldShowLabel, tickHeight }) => {
-          return (
-            <Tick
-              height={tickHeight}
-              isBold={isBold}
-              key={label}
-              label={label}
-              shouldShowLabel={shouldShowLabel}
-              yPosition={position}
-            />
-          )
-        }
-      )}
+      {
+        getTickList(height)
+          .map(({ isBold, label, position, shouldShowLabel, tickHeight}) => {
+            return (
+              <Tick
+                height={tickHeight}
+                isBold={isBold}
+                key={label}
+                label={label}
+                shouldShowLabel={shouldShowLabel}
+                yPosition={position}
+              />
+            )
+          })
+      }
    </View>
  )
 }
@@ -33,8 +35,8 @@ TickList.propTypes = {

 const styles = StyleSheet.create({
  container: {
-    flex: 1,
-  },
+    flex: 1
+  }
 })

 export default TickList
@@ -8,15 +8,13 @@ import { Sizes } from '../../styles'
 import { CHART_TICK_WIDTH } from '../../config'

 const Tick = ({ yPosition, height, isBold, shouldShowLabel, label }) => {
-  const top = yPosition - height / 2 - 4
-  const containerStyle = [styles.container, { flexBasis: height, height, top }]
+  const top = yPosition - height / 2
+  const containerStyle = [ styles.container, { flexBasis: height, height, top }]
  const textStyle = isBold ? styles.textBold : styles.textNormal

-  if (!shouldShowLabel) return null
-
-  return (
+  return(
    <View style={containerStyle}>
-      <AppText style={textStyle}>{label}</AppText>
+      <AppText style={textStyle}>{shouldShowLabel && label}</AppText>
    </View>
  )
 }
@@ -29,6 +27,7 @@ Tick.propTypes = {
  label: PropTypes.string,
 }

+
 const text = {
  textAlign: 'right',
 }
@@ -37,18 +36,17 @@ const styles = StyleSheet.create({
    justifyContent: 'center',
    position: 'absolute',
    right: 0,
-    width: CHART_TICK_WIDTH,
-    minHeight: Sizes.base + 2,
+    width: CHART_TICK_WIDTH
  },
  textBold: {
    fontSize: Sizes.base,
    fontWeight: 'bold',
-    ...text,
+    ...text
  },
  textNormal: {
    fontSize: Sizes.small,
-    ...text,
-  },
+    ...text
+  }
 })

 export default Tick
@@ -6,17 +6,16 @@ import AppText from '../common/app-text'
 import CloseIcon from '../common/close-icon'

 import { Containers, Spacing } from '../../styles'
-import { useTranslation } from 'react-i18next'
+import { chart } from '../../i18n/en/labels'

 const image = require('../../assets/swipe.png')

 const Tutorial = ({ onClose }) => {
-  const { t } = useTranslation()
  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>{t('chart.tutorial')}</AppText>
+        <AppText>{chart.tutorial}</AppText>
      </View>
      <CloseIcon onClose={onClose} />
    </View>
@@ -24,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
+export default Tutorial
@@ -13,7 +13,7 @@ const YAxis = ({
  symptomsToDisplay,
  symptomsSectionHeight,
  shouldShowTemperatureColumn,
-  xAxisHeight,
+  xAxisHeight
 }) => {
  const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length

@@ -21,14 +21,15 @@ const YAxis = ({
    <View>
      {shouldShowTemperatureColumn && <TickList height={height} />}
      <ChartLegend height={xAxisHeight} />
-      <View style={[styles.yAxis, { height: symptomsSectionHeight }]}>
-        {symptomsToDisplay.map((symptom) => (
+      <View style={[styles.yAxis, {height: symptomsSectionHeight}]}>
+        {symptomsToDisplay.map(symptom => (
          <SymptomIcon
            key={symptom}
            symptom={symptom}
            height={symptomIconHeight}
          />
-        ))}
+        )
+        )}
      </View>
    </View>
  )
@@ -39,13 +40,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
@@ -1,28 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { StyleSheet, Text, Linking } from 'react-native'
-
-import { Colors, Typography } from '../../styles'
-
-const AppLink = ({ children, url, ...props }) => {
-  return (
-    <Text style={styles.link} {...props} onPress={() => Linking.openURL(url)}>
-      {children}
-    </Text>
-  )
-}
-
-AppLink.propTypes = {
-  children: PropTypes.node,
-  url: PropTypes.string,
-}
-
-const styles = StyleSheet.create({
-  link: {
-    ...Typography.mainText,
-    color: Colors.purple,
-    textDecorationLine: 'underline',
-  },
-})
-
-export default AppLink
@@ -1,16 +0,0 @@
-import React from 'react'
-import { StyleSheet } from 'react-native'
-
-import AppText from './app-text'
-
-import { Colors } from '../../styles'
-
-const Asterisk = () => <AppText style={styles.asterisk}>*</AppText>
-
-const styles = StyleSheet.create({
-  asterisk: {
-    color: Colors.orange,
-  },
-})
-
-export default Asterisk
@@ -1,50 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { StyleSheet, View } from 'react-native'
-
-import AppText from '../common/app-text'
-import Asterisk from '../common/Asterisk'
-
-import { Colors, Spacing } from '../../styles'
-
-const Footnote = ({ children, colorLabel }) => {
-  if (!children) return false
-
-  return (
-    <View style={styles.container}>
-      <Asterisk />
-      <AppText
-        linkStyle={styles.link}
-        style={{ ...styles.text, color: Colors[colorLabel] }}
-      >
-        {children}
-      </AppText>
-    </View>
-  )
-}
-
-Footnote.propTypes = {
-  children: PropTypes.node,
-  colorLabel: PropTypes.string,
-}
-
-Footnote.defaultProps = {
-  colorLabel: 'greyDark',
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignContent: 'flex-start',
-    marginBottom: Spacing.tiny,
-    marginTop: Spacing.base,
-  },
-  link: {
-    color: 'white',
-  },
-  text: {
-    paddingLeft: Spacing.small,
-  },
-})
-
-export default Footnote
@@ -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
+export default AppIcon
@@ -17,8 +17,8 @@ const AppLoadingView = () => {

 const styles = StyleSheet.create({
  container: {
-    ...Containers.centerItems,
-  },
+    ...Containers.centerItems
+  }
 })

 export default AppLoadingView
@@ -1,37 +1,24 @@
 import React from 'react'
-import {
-  Dimensions,
-  Modal,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native'
+import { Modal, StyleSheet, TouchableOpacity } from 'react-native'
 import PropTypes from 'prop-types'

-import CloseIcon from './close-icon'
-
-import { Sizes, Spacing } from '../../styles'
-
-const AppModal = ({ children, onClose }) => (
-  <Modal
-    animationType="fade"
-    onRequestClose={onClose}
-    transparent={true}
-    visible={true}
-  >
-    <TouchableOpacity onPress={onClose} style={styles.blackBackground} />
-    <View style={styles.modalWindow}>
-      <View style={styles.headerContainer}>
-        <CloseIcon onClose={onClose} />
-      </View>
+const AppModal = ({ children, onClose }) => {
+  return(
+    <Modal
+      animationType='fade'
+      onRequestClose={onClose}
+      transparent={true}
+      visible={true}
+    >
+      <TouchableOpacity onPress={onClose} style={styles.blackBackground} />
      {children}
-    </View>
-  </Modal>
-)
+    </Modal>
+  )
+}

 AppModal.propTypes = {
  children: PropTypes.node,
-  onClose: PropTypes.func,
+  onClose: PropTypes.func
 }

 const styles = StyleSheet.create({
@@ -39,29 +26,7 @@ const styles = StyleSheet.create({
    backgroundColor: 'black',
    flex: 1,
    opacity: 0.5,
-  },
-  headerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    paddingTop: Spacing.base,
-    paddingHorizontal: Spacing.base,
-    position: 'absolute',
-    width: '100%',
-    zIndex: 3, // works on ios
-    elevation: 3, // works on android
-  },
-  modalWindow: {
-    alignSelf: 'center',
-    backgroundColor: 'white',
-    borderRadius: 10,
-    marginTop: Sizes.huge * 2,
-    paddingVertical: Spacing.large * 2,
-    position: 'absolute',
-    maxHeight: Dimensions.get('window').height * 0.7,
-    zIndex: 2, // works on ios
-    elevation: 2, // works on android
-    minWidth: '80%',
-  },
+  }
 })

 export default AppModal
@@ -4,7 +4,7 @@ import { ScrollView, StyleSheet, View } from 'react-native'

 import AppText from '../common/app-text'

-import { Colors, Containers, Typography } from '../../styles'
+import { Colors, Typography } from '../../styles'

 const AppPage = ({
  children,
@@ -13,7 +13,7 @@ const AppPage = ({
  title,
  ...props
 }) => {
-  return (
+  return(
    <View style={styles.container}>
      <ScrollView
        contentContainerStyle={[styles.scrollView, contentContainerStyle]}
@@ -31,18 +31,21 @@ AppPage.propTypes = {
  children: PropTypes.node,
  contentContainerStyle: PropTypes.object,
  scrollViewStyle: PropTypes.object,
-  title: PropTypes.string,
+  title: PropTypes.string
 }

 const styles = StyleSheet.create({
-  container: { ...Containers.pageContainer },
+  container: {
+    backgroundColor: Colors.turquoiseLight,
+    flex: 1
+  },
  scrollView: {
    backgroundColor: Colors.turquoiseLight,
-    flexGrow: 1,
+    flexGrow: 1
  },
  title: {
-    ...Typography.title,
-  },
+    ...Typography.title
+  }
 })

-export default AppPage
+export default AppPage
@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
  statusBar: {
    backgroundColor: Colors.purple,
    height: STATUSBAR_HEIGHT,
-  },
+  }
 })

 export default AppStatusBar
@@ -1,25 +1,18 @@
 import React from 'react'
-import { Platform, StyleSheet, Switch, View } from 'react-native'
+import { StyleSheet, Switch, View } from 'react-native'
 import PropTypes from 'prop-types'

 import AppText from './app-text'

-import { Colors, Containers, Spacing } from '../../styles'
+import { Containers } from '../../styles'

-const AppSwitch = ({ onToggle, text, value, disabled }) => {
-  const trackColor = { true: Colors.turquoiseDark }
+const AppSwitch = ({ onToggle, text, value }) => {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <AppText>{text}</AppText>
      </View>
-      <Switch
-        onValueChange={onToggle}
-        style={styles.switch}
-        value={value}
-        trackColor={trackColor}
-        disabled={disabled}
-      />
+      <Switch onValueChange={onToggle} style={styles.switch} value={value} />
    </View>
  )
 }
@@ -27,25 +20,19 @@ const AppSwitch = ({ onToggle, text, value, disabled }) => {
 AppSwitch.propTypes = {
  onToggle: PropTypes.func.isRequired,
  text: PropTypes.string,
-  value: PropTypes.bool,
-  disabled: PropTypes.bool,
+  value: PropTypes.bool
 }

 const styles = StyleSheet.create({
  container: {
-    ...Containers.rowContainer,
-    marginTop: Spacing.tiny,
+    ...Containers.rowContainer
  },
  switch: {
    flex: 1,
-    transform:
-      Platform.OS === 'ios'
-        ? [{ scaleX: 0.8 }, { scaleY: 0.8 }]
-        : [{ scaleX: 1 }, { scaleY: 1 }],
  },
  textContainer: {
    flex: 4,
-  },
+  }
 })

-export default AppSwitch
+export default AppSwitch
@@ -1,15 +1,30 @@
 import React from 'react'
-import { StyleSheet, TextInput } from 'react-native'
+import { KeyboardAvoidingView, StyleSheet, TextInput } from 'react-native'
 import PropTypes from 'prop-types'

 import { Colors, Spacing, Typography } from '../../styles'

-const AppTextInput = ({ style, ...props }) => (
-  <TextInput style={[styles.input, style]} {...props} />
-)
+const AppTextInput = ({ style, isKeyboardOffset, ...props }) => {
+  const behavior = isKeyboardOffset ? "padding" : "height"
+  const keyboardVerticalOffset = isKeyboardOffset ? 300 : 0
+
+  return (
+    <KeyboardAvoidingView
+      behavior={behavior}
+      keyboardVerticalOffset={keyboardVerticalOffset}
+    >
+      <TextInput style={[styles.input, style]} {...props} />
+    </KeyboardAvoidingView>
+  )
+}

 AppTextInput.propTypes = {
  style: PropTypes.object,
+  isKeyboardOffset: PropTypes.bool,
+}
+
+AppTextInput.defultProps = {
+  isKeyboardOffset: true,
 }

 const styles = StyleSheet.create({
@@ -24,8 +39,8 @@ const styles = StyleSheet.create({
    minWidth: '80%',
    paddingHorizontal: Spacing.base,
    paddingVertical: Spacing.tiny,
-    ...Typography.mainText,
-  },
+    ...Typography.mainText
+  }
 })

 export default AppTextInput
@@ -2,26 +2,32 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, Text } from 'react-native'

+import Link from './link'
+
 import { Colors, Typography } from '../../styles'

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

 AppText.propTypes = {
  children: PropTypes.node,
+  linkStyle: PropTypes.object,
  style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
 }

 const styles = StyleSheet.create({
  text: {
    color: Colors.greyDark,
-    ...Typography.mainText,
-  },
+    ...Typography.mainText
+  }
 })

-export default AppText
+export default AppText
@@ -4,7 +4,7 @@ import { StyleSheet, TouchableOpacity } from 'react-native'

 import AppIcon from './app-icon'

-import { HIT_SLOP } from '../../config'
+import { HIT_SLOP} from '../../config'
 import { Colors, Sizes } from '../../styles'

 const CloseIcon = ({ onClose, color, ...props }) => {
@@ -15,21 +15,21 @@ const CloseIcon = ({ onClose, color, ...props }) => {
      style={styles.container}
      {...props}
    >
-      <AppIcon name="cross" color={color ? color : Colors.orange} />
+      <AppIcon name='cross' color={color ? color : Colors.orange} />
    </TouchableOpacity>
  )
 }

 CloseIcon.propTypes = {
  onClose: PropTypes.func.isRequired,
-  color: PropTypes.string,
+  color: PropTypes.string
 }

 const styles = StyleSheet.create({
  container: {
    alignSelf: 'flex-start',
    marginBottom: Sizes.base,
-  },
+  }
 })

 export default CloseIcon
@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Hyperlink from 'react-native-hyperlink'
+import { StyleSheet } from 'react-native'
+
+import { Colors, Typography } from '../../styles'
+
+import links from '../../i18n/en/links'
+
+const Link = ({ children, style }) => {
+  return (
+    <Hyperlink
+      linkStyle={[styles.link, style]}
+      linkText={replaceUrlWithText}
+      linkDefault
+    >
+      {children}
+    </Hyperlink>
+  )
+}
+
+Link.propTypes = {
+  children: PropTypes.node,
+  style: PropTypes.object
+}
+
+const styles = StyleSheet.create({
+  link: {
+    color: Colors.purple,
+    textDecorationLine: 'underline',
+    ...Typography.mainText,
+  }
+})
+
+function replaceUrlWithText(url) {
+  const link = Object.values(links).find(l => l.url === url)
+  return (link && link.text) || url
+}
+
+export default Link
@@ -15,7 +15,7 @@ const MenuIcon = ({ isActive, name }) => {

 MenuIcon.propTypes = {
  isActive: PropTypes.bool,
-  name: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired
 }

-export default MenuIcon
+export default MenuIcon
@@ -4,16 +4,15 @@ import { StyleSheet, View } from 'react-native'

 import AppText from './app-text'

-import { Colors, Containers, Spacing, Typography } from '../../styles'
+import { Colors, Spacing, Typography } from '../../styles'

-const Segment = ({ children, last, title, subheader }) => {
+const Segment = ({ children, last, title }) => {
  const containerStyle = last ? styles.containerLast : styles.container
  const commonStyle = Object.assign({}, containerStyle)

  return (
    <View style={commonStyle}>
      {title && <AppText style={styles.title}>{title}</AppText>}
-      {subheader && <AppText style={styles.subheader}>{subheader}</AppText>}
      {children}
    </View>
  )
@@ -24,7 +23,11 @@ Segment.propTypes = {
  last: PropTypes.bool,
  style: PropTypes.object,
  title: PropTypes.string,
-  subheader: PropTypes.string,
+}
+
+const segmentContainer = {
+  marginHorizontal: Spacing.base,
+  marginBottom: Spacing.base,
 }

 const styles = StyleSheet.create({
@@ -33,19 +36,14 @@ const styles = StyleSheet.create({
    borderBottomWidth: 1,
    borderBottomColor: Colors.greyLight,
    paddingBottom: Spacing.base,
-    ...Containers.segmentContainer,
+    ...segmentContainer,
  },
  containerLast: {
-    ...Containers.segmentContainer,
+    ...segmentContainer,
  },
  title: {
    ...Typography.subtitle,
-  },
-  subheader: {
-    ...Typography.subtitle,
-    fontWeight: 'bold',
-    marginBottom: Spacing.zero,
-  },
+  }
 })

-export default Segment
+export default Segment
@@ -2,42 +2,40 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'

-import AppText from '../common/app-text'
-import { formatDecimal } from '../helpers/cycle-day'
+import AppText from './app-text'
+
 import { Sizes, Spacing, Typography } from '../../styles'

-const StatsOverview = ({ data }) => {
-  return data.map((rowContent, i) => <Row key={i} rowContent={rowContent} />)
+const Table = ({ tableContent }) => {
+  return (
+    tableContent.map((rowContent, i) => <Row key={i} rowContent={rowContent} />)
+  )
 }

-StatsOverview.propTypes = {
-  data: PropTypes.array.isRequired,
+Table.propTypes = {
+  tableContent: PropTypes.array.isRequired
 }

 const Row = ({ rowContent }) => {
-  const isStandardDeviation = rowContent[1].includes('deviation')
-  if (isStandardDeviation && rowContent[0] !== '—') {
-    rowContent[0] = formatDecimal(rowContent[0], 1)
-  }
-  return (
+  return(
    <View style={styles.row}>
      <Cell content={rowContent[0]} isLeft />
-      <Cell content={rowContent[1]} hasAsterisk={isStandardDeviation} />
+      <Cell content={rowContent[1]} />
    </View>
  )
 }

 Row.propTypes = {
-  rowContent: PropTypes.array.isRequired,
+  rowContent: PropTypes.array.isRequired
 }

-const Cell = ({ content, isLeft, hasAsterisk }) => {
+const Cell = ({ content, isLeft }) => {
  const styleContainer = isLeft ? styles.cellLeft : styles.cellRight
  const styleText = isLeft ? styles.accentPurpleBig : styles.accentOrange
  const numberOfLines = isLeft ? 1 : 2
  const ellipsizeMode = isLeft ? 'clip' : 'tail'

-  return (
+  return(
    <View style={styleContainer}>
      <AppText
        numberOfLines={numberOfLines}
@@ -45,7 +43,6 @@ const Cell = ({ content, isLeft, hasAsterisk }) => {
        style={styleText}
      >
        {content}
-        {hasAsterisk && <AppText style={styles.accentOrange}>*</AppText>}
      </AppText>
    </View>
  )
@@ -54,7 +51,6 @@ const Cell = ({ content, isLeft, hasAsterisk }) => {
 Cell.propTypes = {
  content: PropTypes.node.isRequired,
  isLeft: PropTypes.bool,
-  hasAsterisk: PropTypes.bool,
 }

 const styles = StyleSheet.create({
@@ -65,15 +61,22 @@ const styles = StyleSheet.create({
  },
  accentPurpleBig: {
    ...Typography.accentPurpleBig,
-    marginRight: Spacing.tiny,
+    marginRight: Spacing.tiny
  },
  cellLeft: {
    alignItems: 'flex-end',
-    flex: 3,
+    flex: 5,
    justifyContent: 'center',
  },
-  cellRight: { flex: 5 },
-  row: { flexDirection: 'row' },
+  cellRight: {
+    flex: 5,
+    justifyContent: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    marginBottom: Spacing.tiny,
+    marginLeft: Spacing.tiny
+  }
 })

-export default StatsOverview
+export default Table
@@ -1,63 +0,0 @@
-import React from 'react'
-import { Platform, StyleSheet, Switch, View } from 'react-native'
-import PropTypes from 'prop-types'
-
-import AppText from './app-text'
-
-import DripIcon from '../../assets/drip-icons'
-import { Colors, Containers, Sizes, Spacing } from '../../styles'
-
-const TrackingCategorySwitch = ({ onToggle, symptom, text, value }) => {
-  const trackColor = { true: Colors.turquoiseDark }
-  const iconColor = value ? Colors.iconColors[symptom].color : Colors.grey
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.iconContainer}>
-        <DripIcon
-          color={iconColor}
-          name={`drip-icon-${symptom}`}
-          size={Sizes.title}
-        />
-      </View>
-      <View style={styles.textContainer}>
-        <AppText>{text}</AppText>
-      </View>
-      <Switch
-        onValueChange={onToggle}
-        style={styles.appSwitch}
-        value={value}
-        trackColor={trackColor}
-      />
-    </View>
-  )
-}
-
-TrackingCategorySwitch.propTypes = {
-  onToggle: PropTypes.func.isRequired,
-  symptom: PropTypes.string,
-  text: PropTypes.string,
-  value: PropTypes.bool,
-}
-
-const styles = StyleSheet.create({
-  container: {
-    ...Containers.rowContainer,
-    marginVertical: Spacing.tiny,
-  },
-  iconContainer: {
-    marginRight: Spacing.tiny,
-    flex: 1,
-  },
-  textContainer: {
-    flex: 5,
-  },
-  appSwitch: {
-    flex: 2,
-    transform:
-      Platform.OS === 'ios'
-        ? [{ scaleX: 0.8 }, { scaleY: 0.8 }]
-        : [{ scaleX: 1 }, { scaleY: 1 }],
-  },
-})
-export default TrackingCategorySwitch
@@ -1,99 +1,87 @@
-import React, { useState } from 'react'
+import React, { Component } 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 { getCycleDay } from '../../db'
-import { getData, nextDate, prevDate } from '../helpers/cycle-day'
+import { connect } from 'react-redux'
+import { getDate, setDate } from '../../slices/date'
+import { navigate } from '../../slices/navigation'

-import {
-  desireTrackingCategoryObservable,
-  moodTrackingCategoryObservable,
-  noteTrackingCategoryObservable,
-  painTrackingCategoryObservable,
-  sexTrackingCategoryObservable,
-  temperatureTrackingCategoryObservable,
-  mucusTrackingCategoryObservable,
-  cervixTrackingCategoryObservable,
-} from '../../local-storage'
+import cycleModule from '../../lib/cycle'
+import { dateToTitle } from '../helpers/format-date'
+import { getCycleDay } from '../../db'
+import { getData } from '../helpers/cycle-day'
+
+import { general as labels} from '../../i18n/en/cycle-day'
 import { Spacing } from '../../styles'
 import { SYMPTOMS } from '../../config'

-const CycleDayOverView = ({ date, setDate, isTemperatureEditView }) => {
-  const cycleDay = getCycleDay(date)
+class CycleDayOverView extends Component {

-  const [editedSymptom, setEditedSymptom] = useState(
-    isTemperatureEditView ? 'temperature' : ''
-  )
-
-  const showNextCycleDay = () => {
-    setDate(nextDate(date))
+  static propTypes = {
+    navigate: PropTypes.func,
+    setDate: PropTypes.func,
+    cycleDay: PropTypes.object,
+    date: PropTypes.string,
+    isTemperatureEditView: PropTypes.bool,
  }

-  const showPrevCycleDay = () => {
-    setDate(prevDate(date))
-  }
+  constructor(props) {
+    super(props)

-  const allEnabledSymptoms = SYMPTOMS.map((symptom) => {
-    if (symptom === 'temperature') {
-      return temperatureTrackingCategoryObservable.value ? symptom : null
-    } else if (symptom === 'sex') {
-      return sexTrackingCategoryObservable.value ? symptom : null
-    } else if (symptom === 'mucus') {
-      return mucusTrackingCategoryObservable.value ? symptom : null
-    } else if (symptom === 'cervix') {
-      return cervixTrackingCategoryObservable.value ? symptom : null
-    } else if (symptom === 'desire') {
-      return desireTrackingCategoryObservable.value ? symptom : null
-    } else if (symptom === 'pain') {
-      return painTrackingCategoryObservable.value ? symptom : null
-    } else if (symptom === 'mood') {
-      return moodTrackingCategoryObservable.value ? symptom : null
-    } else if (symptom === 'note') {
-      return noteTrackingCategoryObservable.value ? symptom : null
-    } else {
-      return symptom
+    this.state = { cycleDay: getCycleDay(props.date), data: null }
+    if (props.isTemperatureEditView) {
+      const todayDateString = LocalDate.now().toString()
+      props.setDate(todayDateString)
    }
-  })
-  const cleanSymptoms = allEnabledSymptoms.filter(Boolean)
+  }

-  return (
-    <AppPage>
-      <SymptomPageTitle
-        date={date}
-        onNextCycleDay={showNextCycleDay}
-        onPrevCycleDay={showPrevCycleDay}
-      />
-      <View style={styles.container}>
-        {cleanSymptoms.map((symptom) => {
-          const symptomData =
-            cycleDay && cycleDay[symptom] ? cycleDay[symptom] : null
+  updateCycleDay = (date) => {
+    this.props.setDate(date)
+    this.setState({ cycleDay: getCycleDay(date) })
+  }

-          return (
-            <SymptomBox
-              date={date}
-              key={symptom}
-              symptom={symptom}
-              symptomData={symptomData}
-              symptomDataToDisplay={getData(symptom, symptomData)}
-              editedSymptom={editedSymptom}
-              setEditedSymptom={setEditedSymptom}
-            />
-          )
-        })}
-      </View>
-    </AppPage>
-  )
-}
+  render() {
+    const { cycleDay } = this.state
+    const { date, isTemperatureEditView } = this.props

-CycleDayOverView.propTypes = {
-  cycleDay: PropTypes.object,
-  date: PropTypes.string,
-  setDate: PropTypes.func,
-  isTemperatureEditView: PropTypes.bool,
+    const { getCycleDayNumber } = cycleModule()
+    const cycleDayNumber = getCycleDayNumber(date)
+    const subtitle = cycleDayNumber && `${labels.cycleDayNumber}${cycleDayNumber}`
+
+    return (
+      <AppPage>
+        <SymptomPageTitle
+          reloadSymptomData={this.updateCycleDay}
+          subtitle={subtitle}
+          title={dateToTitle(date)}
+        />
+        <View style={styles.container}>
+          {SYMPTOMS.map(symptom => {
+            const symptomData = cycleDay && cycleDay[symptom]
+              ? cycleDay[symptom] : null
+
+            const isSymptomEdited = isTemperatureEditView && symptom === 'temperature'
+
+            return(
+              <SymptomBox
+                key={symptom}
+                symptom={symptom}
+                symptomData={symptomData}
+                symptomDataToDisplay={getData(symptom, symptomData)}
+                updateCycleDayData={this.updateCycleDay}
+                isSymptomEdited={isSymptomEdited}
+              />
+            )
+          })}
+        </View>
+      </AppPage>
+    )
+  }
 }

 const styles = StyleSheet.create({
@@ -101,8 +89,24 @@ const styles = StyleSheet.create({
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
-    padding: Spacing.base,
-  },
+    padding: Spacing.base
+  }
 })

-export default CycleDayOverView
+const mapStateToProps = (state) => {
+  return({
+    date: getDate(state),
+  })
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    setDate: (date) => dispatch(setDate(date)),
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(CycleDayOverView)
@@ -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
@@ -1,68 +1,31 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Alert, StyleSheet, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'

 import AppText from '../common/app-text'

 import { Colors, Containers } from '../../styles'
-import labels from '../../i18n/en/settings'
-
-export default function SelectTabGroup({
-  activeButton,
-  buttons,
-  onSelect,
-  disabled,
-}) {
-  // TODO https://gitlab.com/bloodyhealth/drip/-/issues/707
-  const oneTimeTransformIntoNumber =
-    typeof activeButton === 'boolean' && Number(activeButton)
-  const isSecondarySymptomSwitch =
-    buttons[0]['label'] === labels.secondarySymptom.mucus
-
-  // Disable is only used for secondarySymptom in customization, if more come up maybe consider more tidy solution
-  const showDisabledAlert = (label) => {
-    if (
-      label === labels.secondarySymptom.cervix ||
-      label === labels.secondarySymptom.mucus
-    ) {
-      Alert.alert(
-        labels.secondarySymptom.disabled.title,
-        labels.secondarySymptom.disabled.message
-      )
-    }
-  }

+export default function SelectTabGroup({ activeButton, buttons, onSelect }) {
  return (
    <View style={styles.container}>
-      {buttons.map(({ label, value }, i) => {
-        const isActive =
-          value === activeButton || value === oneTimeTransformIntoNumber
-        const boxStyle = [
-          styles.box,
-          isActive && styles.boxActive,
-          isSecondarySymptomSwitch && styles.purpleBox,
-          isSecondarySymptomSwitch && isActive && styles.activePurpleBox,
-          disabled && styles.disabledBox,
-        ]
-        const textStyle = [
-          styles.text,
-          isSecondarySymptomSwitch && styles.purpleText,
-          isActive && styles.textActive,
-          disabled && styles.greyText,
-        ]
+      {
+        buttons.map(({ label, value }, i) => {
+          const isActive = value === activeButton
+          const boxStyle = [styles.box, isActive && styles.boxActive]
+          const textStyle = [styles.text, isActive && styles.textActive]

-        return (
-          <TouchableOpacity
-            onPress={() =>
-              !disabled ? onSelect(value) : showDisabledAlert(label)
-            }
-            key={i}
-            style={boxStyle}
-          >
-            <AppText style={textStyle}>{label}</AppText>
-          </TouchableOpacity>
-        )
-      })}
+          return (
+            <TouchableOpacity
+              onPress={() => onSelect(value)}
+              key={i}
+              style={boxStyle}
+            >
+              <AppText style={textStyle}>{label}</AppText>
+            </TouchableOpacity>
+          )
+        })
+      }
    </View>
  )
 }
@@ -70,40 +33,23 @@ export default function SelectTabGroup({
 SelectTabGroup.propTypes = {
  activeButton: PropTypes.number,
  buttons: PropTypes.array.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
+  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',
-  },
-  purpleBox: {
-    borderColor: Colors.purple,
-  },
-  activePurpleBox: {
-    backgroundColor: Colors.purple,
-  },
-  purpleText: {
-    color: Colors.purple,
-  },
-  greyText: {
-    color: Colors.grey,
-  },
-  disabledBox: {
-    borderColor: Colors.grey,
-    backgroundColor: Colors.turquoiseLight,
-  },
-})
+    color: 'white'
+  }
+})
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View, TouchableOpacity } from 'react-native'
 import { scale } from 'react-native-size-matters'
@@ -7,80 +7,101 @@ 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 { useTranslation } from 'react-i18next'
+import { headerTitles as symptomTitles } from '../../i18n/en/labels'

-const SymptomBox = ({
-  date,
-  symptom,
-  symptomData,
-  symptomDataToDisplay,
-  editedSymptom,
-  setEditedSymptom,
-}) => {
-  const { t } = useTranslation(null, { keyPrefix: 'symptoms' })
-  const isSymptomEdited = editedSymptom === symptom
-  const isSymptomDisabled = isDateInFuture(date) && symptom !== 'note'
-  const isExcluded = symptomData !== null ? symptomData.exclude : false
+class SymptomBox extends Component {
+  static propTypes = {
+    date: PropTypes.string.isRequired,
+    isSymptomEdited: PropTypes.bool,
+    symptom: PropTypes.string.isRequired,
+    symptomData: PropTypes.object,
+    symptomDataToDisplay: PropTypes.string,
+    updateCycleDayData: PropTypes.func.isRequired,
+  }

-  const iconColor = isSymptomDisabled ? Colors.greyLight : Colors.grey
-  const iconName = `drip-icon-${symptom}`
-  const symptomNameStyle = [
-    styles.symptomName,
-    isSymptomDisabled && styles.symptomNameDisabled,
-    isExcluded && styles.symptomNameExcluded,
-  ]
-  const textStyle = [
-    styles.text,
-    isSymptomDisabled && styles.textDisabled,
-    isExcluded && styles.textExcluded,
-  ]
+  static defaultProps = {
+    isSymptomEdited: false,
+  }

-  return (
-    <>
-      {isSymptomEdited && (
-        <SymptomEditView
-          date={date}
-          symptom={symptom}
-          symptomData={symptomData}
-          onClose={() => setEditedSymptom('')}
-        />
-      )}
+  constructor(props) {
+    super(props)

-      <TouchableOpacity
-        disabled={isSymptomDisabled}
-        onPress={() => setEditedSymptom(symptom)}
-        style={styles.container}
-        testID={iconName}
-      >
-        <DripIcon
-          color={iconColor}
-          isActive={!isSymptomDisabled}
-          name={iconName}
-          size={Sizes.icon}
-        />
-        <View style={styles.textContainer}>
-          <AppText style={symptomNameStyle}>{t(symptom)}</AppText>
-          {symptomDataToDisplay && (
-            <AppText style={textStyle} numberOfLines={4}>
-              {symptomDataToDisplay}
+    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
+
+    const iconColor = isSymptomDisabled ? Colors.greyLight : Colors.grey
+    const iconName = `drip-icon-${symptom}`
+    const symptomNameStyle = [
+      styles.symptomName,
+      isSymptomDisabled && styles.symptomNameDisabled,
+      isExcluded && styles.symptomNameExcluded,
+    ]
+    const textStyle = [
+      styles.text,
+      isSymptomDisabled && styles.textDisabled,
+      isExcluded && styles.textExcluded,
+    ]
+
+    return (
+      <React.Fragment>
+        {isSymptomEdited && (
+          <SymptomEditView
+            symptom={symptom}
+            symptomData={symptomData}
+            onClose={this.onFinishEditing}
+          />
+        )}
+
+        <TouchableOpacity
+          disabled={isSymptomDisabled}
+          onPress={this.onEditSymptom}
+          style={styles.container}
+          testID={iconName}
+        >
+          <DripIcon
+            color={iconColor}
+            isActive={!isSymptomDisabled}
+            name={iconName}
+            size={Sizes.icon}
+          />
+          <View style={styles.textContainer}>
+            <AppText style={symptomNameStyle}>
+              {symptomTitles[symptom].toLowerCase()}
            </AppText>
-          )}
-        </View>
-      </TouchableOpacity>
-    </>
-  )
-}
-
-SymptomBox.propTypes = {
-  date: PropTypes.string.isRequired,
-  symptom: PropTypes.string.isRequired,
-  symptomData: PropTypes.object,
-  symptomDataToDisplay: PropTypes.string,
-  editedSymptom: PropTypes.string.isRequired,
-  setEditedSymptom: PropTypes.func.isRequired,
+            {symptomDataToDisplay && (
+              <AppText style={textStyle} numberOfLines={4}>
+                {symptomDataToDisplay}
+              </AppText>
+            )}
+          </View>
+        </TouchableOpacity>
+      </React.Fragment>
+    )
+  }
 }

 const styles = StyleSheet.create({
@@ -126,4 +147,10 @@ const styles = StyleSheet.create({
  },
 })

-export default SymptomBox
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+  }
+}
+
+export default connect(mapStateToProps, null)(SymptomBox)
@@ -1,237 +1,281 @@
-import React, { useState } from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { ScrollView, StyleSheet, View } from 'react-native'
+import { Dimensions, ScrollView, StyleSheet, View } from 'react-native'
+import { connect } from 'react-redux'

 import AppModal from '../common/app-modal'
 import AppSwitch from '../common/app-switch'
 import AppText from '../common/app-text'
 import AppTextInput from '../common/app-text-input'
 import Button from '../common/button'
+import CloseIcon from '../common/close-icon'
 import Segment from '../common/segment'
 import SelectBoxGroup from './select-box-group'
 import SelectTabGroup from './select-tab-group'
 import Temperature from './temperature'

+import { getDate } from '../../slices/date'
 import { blank, save, shouldShow, symtomPage } from '../helpers/cycle-day'
 import { showToast } from '../helpers/general'

-import { fertilityTrackingObservable } from '../../local-storage'
 import { shared as sharedLabels } from '../../i18n/en/labels'
 import info from '../../i18n/en/symptom-info'
 import { Colors, Containers, Sizes, Spacing } from '../../styles'

-const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
-  const symptomConfig = symtomPage[symptom]
-  const [data, setData] = useState(symptomData ? symptomData : blank[symptom])
-  const [shouldShowInfo, setShouldShowInfo] = useState(false)
-  const getParsedData = () => JSON.parse(JSON.stringify(data))
-  const onPressLearnMore = () => setShouldShowInfo(!shouldShowInfo)
-  const isFertilityTrackingEnabled = fertilityTrackingObservable.value
+class SymptomEditView extends Component {
+  static propTypes = {
+    date: PropTypes.string.isRequired,
+    onClose: PropTypes.func.isRequired,
+    symptom: PropTypes.string.isRequired,
+    symptomData: PropTypes.object,
+  }

-  const onEditNote = (note) => {
-    const parsedData = getParsedData()
+  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 shouldShowNote = shouldShow(symptomConfig.note)
+    const shouldBoxGroup = shouldShow(symptomConfig.selectBoxGroups)
+    const shouldTabGroup = shouldShow(symptomConfig.selectTabGroups)
+
+    this.state = {
+      data,
+      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(parsedData, { value: note })
+      Object.assign(data, { value: note })
    } else {
-      parsedData['note'] = note
+      data['note'] = note
    }

-    setData(parsedData)
+    this.setState({ data })
  }

-  const onExcludeToggle = () => {
-    const parsedData = getParsedData()
+  onExcludeToggle = () => {
+    const data = this.getParsedData()
+    Object.assign(data, { exclude: !data.exclude })

-    Object.assign(parsedData, { exclude: !parsedData.exclude })
-
-    setData(parsedData)
+    this.setState({ data })
  }

-  const onRemove = () => {
-    save[symptom](data, date, true)
+  onPressLearnMore = () => {
+    this.setState({ shouldShowInfo: !this.state.shouldShowInfo })
+  }
+
+  onRemove = () => {
+    this.saveData(true)
    showToast(sharedLabels.dataDeleted)
-    onClose()
+    this.props.onClose()
  }

-  const onSave = () => {
-    const hasDataChanged = () => {
-      const initialData = symptomData ? symptomData : blank[symptom]
-
-      return JSON.stringify(data) !== JSON.stringify(initialData)
-    }
-
-    if (hasDataChanged()) {
-      save[symptom](data, date, false)
-      showToast(sharedLabels.dataSaved)
-    }
-
-    onClose()
+  onSave = () => {
+    this.saveData()
+    showToast(sharedLabels.dataSaved)
+    this.props.onClose()
  }

-  const onSaveTemperature = (value, field) => {
-    const parsedData = getParsedData()
+  onSaveTemperature = (value, field) => {
+    const data = this.getParsedData()
    const dataToSave =
      field === 'value' ? { [field]: Number(value) } : { [field]: value }
+    Object.assign(data, { ...dataToSave })

-    Object.assign(parsedData, { ...dataToSave })
-
-    setData(parsedData)
+    this.setState({ data })
  }

-  const onSelectBox = (key) => {
-    const parsedData = getParsedData()
+  onSelectBox = (key) => {
+    const data = this.getParsedData()
    if (key === 'other') {
-      Object.assign(parsedData, {
+      Object.assign(data, {
        note: null,
-        [key]: !data[key],
+        [key]: !this.state.data[key],
      })
    } else {
-      Object.assign(parsedData, { [key]: !data[key] })
+      Object.assign(data, { [key]: !this.state.data[key] })
    }

-    setData(parsedData)
+    this.setState({ data })
  }

-  const onSelectBoxNote = (value) => {
-    const parsedData = getParsedData()
+  onSelectBoxNote = (value) => {
+    const data = this.getParsedData()
+    Object.assign(data, { note: value !== '' ? value : null })

-    Object.assign(parsedData, { note: value !== '' ? value : null })
-
-    setData(parsedData)
+    this.setState({ data })
  }

-  const onSelectTab = (group, value) => {
-    const parsedData = getParsedData()
+  onSelectTab = (group, value) => {
+    const data = this.getParsedData()
+    Object.assign(data, { [group.key]: value })

-    parsedData[group.key] = parsedData[group.key] !== value ? value : null
-    setData(parsedData)
-  }
-  const iconName = shouldShowInfo ? 'chevron-up' : 'chevron-down'
-  const noteText = symptom === 'note' ? data.value : data.note
-  const inputProps = {
-    multiline: true,
-    numberOfLines: 3,
-    scrollEnabled: false,
-    style: styles.input,
-    textAlignVertical: 'top',
+    this.setState({ data })
  }

-  return (
-    <AppModal onClose={onSave}>
-      <ScrollView
-        contentContainerStyle={styles.modalContainer}
-        keyboardDismissMode="on-drag"
-      >
-        {symptom === 'temperature' && (
-          <Temperature
-            date={date}
-            data={data}
-            save={(value, field) => onSaveTemperature(value, field)}
-          />
-        )}
-        {shouldShow(symptomConfig.selectTabGroups) &&
-          symtomPage[symptom].selectTabGroups.map((group) => {
-            return (
-              <Segment key={group.key} style={styles.segmentBorder}>
-                <AppText style={styles.title}>{group.title}</AppText>
-                <SelectTabGroup
-                  activeButton={data[group.key]}
-                  buttons={group.options}
-                  onSelect={(value) => onSelectTab(group, value)}
-                />
-              </Segment>
-            )
-          })}
-        {shouldShow(symptomConfig.selectBoxGroups) &&
-          symtomPage[symptom].selectBoxGroups.map((group) => {
-            const isOtherSelected =
-              data['other'] !== null &&
-              data['other'] !== false &&
-              Object.keys(group.options).includes('other')
+  saveData = (shouldDeleteData) => {
+    const { date, symptom } = this.props
+    const { data } = this.state
+    save[symptom](data, date, shouldDeleteData)
+  }

-            return (
-              <Segment key={group.key} style={styles.segmentBorder}>
-                <AppText style={styles.title}>{group.title}</AppText>
-                <SelectBoxGroup
-                  labels={group.options}
-                  onSelect={(value) => onSelectBox(value)}
-                  optionsState={data}
-                />
-                {isOtherSelected && (
-                  <AppTextInput
-                    {...inputProps}
-                    placeholder={sharedLabels.enter}
-                    value={data.note}
-                    onChangeText={(value) => onSelectBoxNote(value)}
+  closeView = () => {
+    const { onClose } = this.props
+
+    showToast(sharedLabels.dataSaved)
+    onClose()
+  }
+
+  render() {
+    const { symptom } = this.props
+    const {
+      data,
+      shouldShowExclude,
+      shouldShowInfo,
+      shouldShowNote,
+      shouldBoxGroup,
+      shouldTabGroup,
+    } = this.state
+    const iconName = shouldShowInfo ? 'chevron-up' : 'chevron-down'
+    const noteText = symptom === 'note' ? data.value : data.note
+
+    return (
+      <AppModal onClose={this.closeView}>
+        <ScrollView
+          contentContainerStyle={styles.modalContainer}
+          style={styles.modalWindow}
+        >
+          <View style={styles.headerContainer}>
+            <CloseIcon onClose={this.closeView} />
+          </View>
+          {symptom === 'temperature' && (
+            <Temperature
+              data={data}
+              save={(value, field) => this.onSaveTemperature(value, field)}
+            />
+          )}
+          {shouldTabGroup &&
+            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)}
                  />
-                )}
-              </Segment>
-            )
-          })}
-        {/* show exclude AppSwitch for bleeding, mucus, cervix, temperature */}
-        {/* but if fertility is off only for bleeding */}
-        {shouldShow(symptomConfig.excludeText) &&
-          (symptom === 'bleeding' || isFertilityTrackingEnabled) && (
+                </Segment>
+              )
+            })}
+          {shouldBoxGroup &&
+            symtomPage[symptom].selectBoxGroups.map((group) => {
+              const isOtherSelected =
+                data['other'] !== null &&
+                data['other'] !== false &&
+                Object.keys(group.options).includes('other')
+
+              return (
+                <Segment key={group.key} style={styles.segmentBorder}>
+                  <AppText style={styles.title}>{group.title}</AppText>
+                  <SelectBoxGroup
+                    labels={group.options}
+                    onSelect={(value) => this.onSelectBox(value)}
+                    optionsState={data}
+                  />
+                  {isOtherSelected && (
+                    <AppTextInput
+                      multiline={true}
+                      placeholder={sharedLabels.enter}
+                      value={data.note}
+                      onChangeText={(value) => this.onSelectBoxNote(value)}
+                    />
+                  )}
+                </Segment>
+              )
+            })}
+          {shouldShowExclude && (
            <Segment style={styles.segmentBorder}>
              <AppSwitch
-                onToggle={onExcludeToggle}
+                onToggle={this.onExcludeToggle}
                text={symtomPage[symptom].excludeText}
                value={data.exclude}
              />
            </Segment>
          )}
-        {shouldShow(symptomConfig.note) && (
-          <Segment style={styles.segmentBorder}>
-            <AppText>{symtomPage[symptom].note}</AppText>
-            <AppTextInput
-              {...inputProps}
-              onChangeText={onEditNote}
-              placeholder={sharedLabels.enter}
-              testID="noteInput"
-              value={noteText !== null ? noteText : ''}
-            />
-          </Segment>
-        )}
-        <View style={styles.buttonsContainer}>
-          <Button iconName={iconName} isSmall onPress={onPressLearnMore}>
-            {sharedLabels.learnMore}
-          </Button>
-          <Button isSmall onPress={onRemove}>
-            {sharedLabels.remove}
-          </Button>
-          <Button isCTA isSmall onPress={onSave}>
-            {sharedLabels.save}
-          </Button>
-        </View>
-        {shouldShowInfo && (
-          <Segment last style={styles.segmentBorder}>
-            <AppText>{info[symptom].text}</AppText>
-          </Segment>
-        )}
-      </ScrollView>
-    </AppModal>
-  )
-}
-
-SymptomEditView.propTypes = {
-  date: PropTypes.string.isRequired,
-  onClose: PropTypes.func.isRequired,
-  symptom: PropTypes.string.isRequired,
-  symptomData: PropTypes.object,
+          {shouldShowNote && (
+            <Segment style={styles.segmentBorder}>
+              <AppText>{symtomPage[symptom].note}</AppText>
+              <AppTextInput
+                multiline={true}
+                numberOfLines={3}
+                onChangeText={this.onEditNote}
+                placeholder={sharedLabels.enter}
+                testID="noteInput"
+                value={noteText !== null ? noteText : ''}
+              />
+            </Segment>
+          )}
+          <View style={styles.buttonsContainer}>
+            <Button iconName={iconName} isSmall onPress={this.onPressLearnMore}>
+              {sharedLabels.learnMore}
+            </Button>
+            <Button isSmall onPress={this.onRemove}>
+              {sharedLabels.remove}
+            </Button>
+            <Button isCTA isSmall onPress={this.onSave}>
+              {sharedLabels.save}
+            </Button>
+          </View>
+          {shouldShowInfo && (
+            <Segment last style={styles.segmentBorder}>
+              <AppText>{info[symptom].text}</AppText>
+            </Segment>
+          )}
+        </ScrollView>
+      </AppModal>
+    )
+  }
 }

 const styles = StyleSheet.create({
  buttonsContainer: {
    ...Containers.rowContainer,
-    paddingHorizontal: Spacing.base,
-    paddingBottom: Spacing.base,
  },
-  input: {
-    height: Sizes.base * 5,
+  headerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingVertical: Spacing.tiny,
  },
  modalContainer: {
-    paddingHorizontal: Spacing.base,
+    flex: 1,
+    padding: Spacing.base,
+  },
+  modalWindow: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 10,
+    marginVertical: Sizes.huge * 2,
+    position: 'absolute',
+    minHeight: '40%',
+    maxHeight: Dimensions.get('window').height * 0.7,
  },
  segmentBorder: {
    borderBottomColor: Colors.greyLight,
@@ -241,4 +285,10 @@ const styles = StyleSheet.create({
  },
 })

-export default SymptomEditView
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+  }
+}
+
+export default connect(mapStateToProps, null)(SymptomEditView)
@@ -5,34 +5,40 @@ import { StyleSheet, TouchableOpacity, View } from 'react-native'
 import AppIcon from '../common/app-icon'
 import AppText from '../common/app-text'

-import cycleModule from '../../lib/cycle'
-import { dateToTitle } from '../helpers/format-date'
+import { connect } from 'react-redux'
+import { getDate, setDate } from '../../slices/date'

-import { general as labels } from '../../i18n/en/cycle-day'
+import { nextDate, prevDate } from '../helpers/cycle-day'
 import { Colors, Containers, Spacing, Typography } from '../../styles'
 import { HIT_SLOP } from '../../config'

-const SymptomPageTitle = ({ date, onNextCycleDay, onPrevCycleDay }) => {
-  const title = dateToTitle(date)
-
-  const { getCycleDayNumber } = cycleModule()
-  const cycleDayNumber = getCycleDayNumber(date)
-  const subtitle = cycleDayNumber && `${labels.cycleDayNumber}${cycleDayNumber}`
-
-  const formattedTitle =
-    title.length > 21 ? title.substring(0, 18) + '...' : title
+const SymptomPageTitle = ({
+  date,
+  reloadSymptomData,
+  setDate,
+  subtitle,
+  title,
+}) => {
+  const navigate = (isForward) => {
+    const nextDay = isForward ? nextDate(date) : prevDate(date)
+    reloadSymptomData(nextDay)
+    setDate(nextDay)
+  }
+  const formattedTitle = title.length > 21
+    ? title.substring(0, 18) + '...'
+    : title

  return (
    <View style={styles.container}>
-      <TouchableOpacity onPress={onPrevCycleDay} hitSlop={HIT_SLOP}>
-        <AppIcon name="chevron-left" color={Colors.orange} />
+      <TouchableOpacity onPress={() => navigate(false)} hitSlop={HIT_SLOP}>
+        <AppIcon name='chevron-left' color={Colors.orange}/>
      </TouchableOpacity>
      <View style={styles.textContainer}>
        <AppText style={styles.title}>{formattedTitle}</AppText>
        {subtitle && <AppText style={styles.subtitle}>{subtitle}</AppText>}
      </View>
-      <TouchableOpacity onPress={onNextCycleDay} hitSlop={HIT_SLOP}>
-        <AppIcon name="chevron-right" color={Colors.orange} />
+      <TouchableOpacity onPress={() => navigate(true)} hitSlop={HIT_SLOP}>
+        <AppIcon name='chevron-right' color={Colors.orange}/>
      </TouchableOpacity>
    </View>
  )
@@ -40,8 +46,10 @@ const SymptomPageTitle = ({ date, onNextCycleDay, onPrevCycleDay }) => {

 SymptomPageTitle.propTypes = {
  date: PropTypes.string.isRequired,
-  onNextCycleDay: PropTypes.func.isRequired,
-  onPrevCycleDay: PropTypes.func.isRequired,
+  reloadSymptomData: PropTypes.func.isRequired,
+  setDate: PropTypes.func.isRequired,
+  subtitle: PropTypes.string,
+  title: PropTypes.string,
 }

 const styles = StyleSheet.create({
@@ -59,4 +67,16 @@ const styles = StyleSheet.create({
  },
 })

-export default SymptomPageTitle
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    setDate: (date) => dispatch(setDate(date)),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SymptomPageTitle)
@@ -10,6 +10,8 @@ import AppText from '../common/app-text'
 import AppTextInput from '../common/app-text-input'
 import Segment from '../common/segment'

+import { connect } from 'react-redux'
+import { getDate } from '../../slices/date'
 import {
  getTemperatureOutOfRangeMessage,
  getPreviousTemperature,
@@ -108,7 +110,6 @@ const styles = StyleSheet.create({
  hint: {
    fontStyle: 'italic',
    fontSize: Sizes.small,
-    color: Colors.orange,
  },
  hintContainer: {
    marginVertical: Spacing.tiny,
@@ -124,4 +125,10 @@ Temperature.propTypes = {
  save: PropTypes.func.isRequired,
 }

-export default Temperature
+const mapStateToProps = (state) => {
+  return {
+    date: getDate(state),
+  }
+}
+
+export default connect(mapStateToProps, null)(Temperature)
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { Component } from 'react'
 import {
  Modal,
  Platform,
@@ -6,65 +6,73 @@ import {
  TouchableOpacity,
  View,
 } from 'react-native'
-import PropTypes from 'prop-types'
-import AppText from '../common/app-text'

 import AppIcon from '../common/app-icon'
 import CloseIcon from '../common/close-icon'
+import MenuItem from './menu-item'

-import { Colors, Sizes, Typography } from '../../styles'
+import { Colors, Sizes } from '../../styles'
+import settingsLabels from '../../i18n/en/settings'
 import { HIT_SLOP } from '../../config'
-import { useTranslation } from 'react-i18next'
+
+const { menuItems } = settingsLabels

 const settingsMenuItems = [
-  { labelKey: 'settings', componentName: 'SettingsMenu' },
-  { labelKey: 'about', componentName: 'About' },
-  { labelKey: 'license', componentName: 'License' },
-  { labelKey: 'privacyPolicy', componentName: 'PrivacyPolicy' },
+  { name: menuItems.settings, component: 'SettingsMenu' },
+  { name: menuItems.about, component: 'About' },
+  { name: menuItems.license, component: 'License' },
+  { name: menuItems.privacyPolicy, component: 'PrivacyPolicy' },
 ]

-const HamburgerMenu = ({ navigate }) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const closeMenu = () => setIsOpen(false)
+export default class HamburgerMenu extends Component {
+  constructor(props) {
+    super(props)

-  const { t } = useTranslation(null, { keyPrefix: 'hamburgerMenu.menuMain' })
-
-  if (!isOpen)
-    return (
-      <TouchableOpacity onPress={() => setIsOpen(true)} hitSlop={HIT_SLOP}>
-        <AppIcon name="dots-three-vertical" color={Colors.orange} />
-      </TouchableOpacity>
-    )
-
-  function onPress(componentName) {
-    closeMenu()
-    navigate(componentName)
+    this.state = { shouldShowMenu: false }
  }

-  return (
-    <Modal animationType="fade" onRequestClose={closeMenu} transparent>
-      <TouchableOpacity onPress={closeMenu} style={styles.blackBackground} />
-      <View style={styles.menu}>
-        <View style={styles.iconContainer}>
-          <CloseIcon color={'black'} onClose={closeMenu} />
-        </View>
-        {settingsMenuItems.map(({ labelKey, componentName }) => (
-          <TouchableOpacity
-            onPress={() => onPress(componentName)}
-            key={labelKey}
-          >
-            <AppText style={styles.menuItem}>{t(labelKey)}</AppText>
+  toggleMenu = () => {
+    this.setState({ shouldShowMenu: !this.state.shouldShowMenu })
+  }
+
+  render() {
+    const { shouldShowMenu } = this.state
+
+    return (
+      <React.Fragment>
+        {!shouldShowMenu && (
+          <TouchableOpacity onPress={this.toggleMenu} hitSlop={HIT_SLOP}>
+            <AppIcon name="dots-three-vertical" color={Colors.orange} />
          </TouchableOpacity>
-        ))}
-      </View>
-    </Modal>
-  )
-}
-
-export default HamburgerMenu
-
-HamburgerMenu.propTypes = {
-  navigate: PropTypes.func,
+        )}
+        {shouldShowMenu && (
+          <Modal
+            animationType="fade"
+            onRequestClose={this.toggleMenu}
+            transparent={true}
+            visible={shouldShowMenu}
+          >
+            <TouchableOpacity
+              onPress={this.toggleMenu}
+              style={styles.blackBackground}
+            ></TouchableOpacity>
+            <View style={styles.menu}>
+              <View style={styles.iconContainer}>
+                <CloseIcon color={'black'} onClose={() => this.toggleMenu()} />
+              </View>
+              {settingsMenuItems.map((item) => (
+                <MenuItem
+                  item={item}
+                  key={item.name}
+                  closeMenu={this.toggleMenu}
+                />
+              ))}
+            </View>
+          </Modal>
+        )}
+      </React.Fragment>
+    )
+  }
 }

 const styles = StyleSheet.create({
@@ -86,5 +94,4 @@ const styles = StyleSheet.create({
    position: 'absolute',
    width: '60%',
  },
-  menuItem: Typography.subtitle,
 })
@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'

 import Logo from './logo'
@@ -7,38 +7,30 @@ import HamburgerMenu from './hamburger-menu'

 import { Colors, Containers, Sizes } from '../../styles'

-const Header = ({ isStatic, navigate }) => {
+const Header = ({ isSideMenuEnabled }) => {
+
  return (
    <View style={styles.header}>
-      {isStatic ? (
-        <Logo />
-      ) : (
-        <>
-          <TouchableOpacity onPress={() => navigate('Home')}>
-            <Logo />
-          </TouchableOpacity>
-          <HamburgerMenu navigate={navigate} />
-        </>
-      )}
-    </View>
+      <Logo />
+      {isSideMenuEnabled && <HamburgerMenu />}
+    </View >
  )
 }

 Header.propTypes = {
-  isStatic: PropTypes.bool,
-  navigate: PropTypes.func,
+  isSideMenuEnabled: PropTypes.bool
 }

 Header.defaultProps = {
-  isStatic: false,
+  isSideMenuEnabled: true
 }

 const styles = StyleSheet.create({
  header: {
    backgroundColor: Colors.purple,
    padding: Sizes.base,
-    ...Containers.rowContainer,
-  },
+    ...Containers.rowContainer
+  }
 })

-export default Header
+export default Header
@@ -1,20 +1,41 @@
 import React from 'react'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import PropTypes from 'prop-types'

 import AppText from '../common/app-text'

+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
+
 import { Colors, Fonts, Sizes } from '../../styles'

-const Logo = () => {
-  return <AppText style={styles.logo}>drip.</AppText>
+const Logo = ({ navigate }) => {
+  return(
+    <TouchableOpacity onPress={() => navigate('Home')}>
+      <AppText style={styles.logo}>drip.</AppText>
+    </TouchableOpacity>
+  )
+}
+
+Logo.propTypes = {
+  navigate: PropTypes.func.isRequired
 }

 const styles = StyleSheet.create({
  logo: {
    color: Colors.turquoiseDark,
    fontFamily: Fonts.bold,
-    fontSize: Sizes.title,
-  },
+    fontSize: Sizes.title
+  }
 })

-export default Logo
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(Logo)
@@ -0,0 +1,47 @@
+import React from 'react'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import PropTypes from 'prop-types'
+
+import AppText from '../common/app-text'
+
+import { connect } from 'react-redux'
+import { navigate } from '../../slices/navigation'
+
+import { Typography } from '../../styles'
+
+const MenuItem = ({ item, navigate, closeMenu }) => {
+  const { component, name } = item
+  const onPress = () => {
+    closeMenu()
+    navigate(component)
+  }
+
+  return(
+    <TouchableOpacity onPress={onPress}>
+      <AppText style={styles.text}>{name}</AppText>
+    </TouchableOpacity>
+  )
+}
+
+MenuItem.propTypes = {
+  item: PropTypes.object.isRequired,
+  navigate: PropTypes.func.isRequired,
+  closeMenu: PropTypes.func.isRequired
+}
+
+const styles = StyleSheet.create({
+  text: {
+    ...Typography.subtitle
+  }
+})
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(MenuItem)
@@ -1,8 +1,7 @@
-import { LocalDate } from '@js-joda/core'
+import { LocalDate } from 'js-joda'
 import { verticalScale } from 'react-native-size-matters'

 import { Colors, Fonts, Sizes } from '../../styles'
-import { periodPredictionObservable } from '../../local-storage'

 const { shades } = Colors.iconColors.bleeding

@@ -27,7 +26,6 @@ export const toCalFormat = (bleedingDaysSortedByDate) => {
 }

 export const predictionToCalFormat = (predictedDays) => {
-  if (!periodPredictionObservable.value) return {}
  if (!predictedDays.length) return {}
  const todayDateString = LocalDate.now().toString()
  const middleIndex = (predictedDays[0].length - 1) / 2
@@ -67,7 +65,7 @@ const styles = {
  calendarToday: {
    fontFamily: 'Jost-Bold',
    fontWeight: 'bold',
-    color: Colors.purple,
+    color: Colors.purple
  },
 }

@@ -1,10 +1,6 @@
-import { LocalDate } from '@js-joda/core'
+import { LocalDate } from 'js-joda'

-import {
-  fertilityTrackingObservable,
-  scaleObservable,
-  unitObservable,
-} from '../../local-storage'
+import { scaleObservable, unitObservable } from '../../local-storage'
 import { getCycleStatusForDay } from '../../lib/sympto-adapter'
 import { getCycleDay, getAmountOfCycleDays } from '../../db'

@@ -49,6 +45,7 @@ export function getTickList(columnHeight) {
  const tickHeight = columnHeight / numberOfTicks

  return getTickPositions(columnHeight).map((tickPosition, i) => {
+
    const tick = scaleMax - i * unit
    const isBold = Number.isInteger(tick) ? true : false
    const label = tick.toFixed(1)
@@ -59,14 +56,14 @@ export function getTickList(columnHeight) {

    if (unit === 0.1) {
      // show label with step 0.2
-      shouldShowLabel = !((label * 10) % 2)
+      shouldShowLabel = !(label * 10 % 2)
    } else {
      // show label with step 0.5
-      shouldShowLabel = !((label * 10) % 5)
+      shouldShowLabel = !(label * 10 % 5)
    }

    // don't show label, if first or last tick
-    if (i === 0 || i === numberOfTicks - 1) {
+    if ( i === 0 || i === (numberOfTicks - 1) ) {
      shouldShowLabel = false
    }

@@ -75,7 +72,7 @@ export function getTickList(columnHeight) {
      label,
      isBold,
      shouldShowLabel,
-      tickHeight,
+      tickHeight
    }
  })
 }
@@ -87,17 +84,17 @@ export function isSymptomDataComplete(symptom, dateString) {
  const symptomData = cycleDayData[symptom]

  const dataCompletenessCheck = {
-    cervix: () => {
+    'cervix': () => {
      const { opening, firmness } = symptomData
-      return opening !== null && firmness !== null
+      return (opening !== null) && (firmness !== null)
    },
-    mucus: () => {
+    'mucus': () => {
      const { feeling, texture } = symptomData
-      return feeling !== null && texture !== null
+      return (feeling !== null) && (texture !== null)
    },
-    default: () => {
+    'default': () => {
      return true
-    },
+    }
  }
  return (dataCompletenessCheck[symptom] || dataCompletenessCheck['default'])()
 }
@@ -107,7 +104,7 @@ function getInfoForNeighborColumns(dateString, columnHeight) {
    rightY: null,
    rightTemperatureExclude: null,
    leftY: null,
-    leftTemperatureExclude: null,
+    leftTemperatureExclude: null
  }
  const target = LocalDate.parse(dateString)
  const dayBefore = target.minusDays(1).toString()
@@ -130,57 +127,53 @@ function getInfoForNeighborColumns(dateString, columnHeight) {
 export function getTemperatureProps(symptomData, columnHeight, dateString) {
  const extractedData = {}
  const { value, exclude } = symptomData
-  const neighborTemperatureGraphPoints = getInfoForNeighborColumns(
-    dateString,
-    columnHeight
-  )
+  const neighborTemperatureGraphPoints =
+    getInfoForNeighborColumns(dateString, columnHeight)

  for (const key in neighborTemperatureGraphPoints) {
    extractedData[key] = neighborTemperatureGraphPoints[key]
  }
-  return Object.assign(
-    {
-      value,
-      y: normalizeToScale(value, columnHeight),
-      temperatureExclude: exclude,
-    },
-    extractedData
-  )
+  return Object.assign({
+    value,
+    y: normalizeToScale(value, columnHeight),
+    temperatureExclude: exclude,
+  }, extractedData)
 }

 export const symptomColorMethods = {
-  mucus: (symptomData) => {
+  'mucus': (symptomData) => {
    const { feeling, texture } = symptomData
    const colorIndex = feeling + texture
    return colorIndex
  },
-  cervix: (symptomData) => {
+  'cervix': (symptomData) => {
    const { opening, firmness } = symptomData
    const isDataComplete = opening !== null && firmness !== null
-    const isClosedAndHard = isDataComplete && opening === 0 && firmness === 0
+    const isClosedAndHard =
+      isDataComplete &&
+      (opening === 0 && firmness === 0)
    const colorIndex = isClosedAndHard ? 0 : 2
    return colorIndex
  },
-  sex: (symptomData) => {
+  'sex': (symptomData) => {
    const { solo, partner } = symptomData
-    const colorIndex =
-      solo !== null && partner !== null ? solo + 2 * partner - 1 : 0
+    const colorIndex = (solo !== null && partner !== null) ?
+      (solo + 2 * partner - 1) : 0
    return colorIndex
  },
-  bleeding: (symptomData) => {
+  'bleeding': (symptomData) => {
    const { value } = symptomData
    const colorIndex = value
    return colorIndex
  },
-  desire: (symptomData) => {
+  'desire': (symptomData) => {
    const { value } = symptomData
    const colorIndex = value
    return colorIndex
  },
-  default: () => {
-    //pain, mood, note
+  'default': () => { //pain, mood, note
    return 0
-  },
+  }
 }

 // Chart helpers
@@ -195,7 +188,7 @@ export function makeColumnInfo() {
    amountOfCycleDays += 5
  }
  const localDates = getTodayAndPreviousDays(amountOfCycleDays)
-  return localDates.map((localDate) => localDate.toString())
+  return localDates.map(localDate => localDate.toString())
 }

 function getTodayAndPreviousDays(n) {
@@ -217,17 +210,17 @@ function getTodayAndPreviousDays(n) {

 export function nfpLines() {
  const cycle = {
-    status: null,
+    status: null
  }

  function updateCurrentCycle(dateString) {
    // for the NFP lines, we don't care about potentially extending the
    // preOvu phase, so we don't include all earlier cycles, as that is
    // an expensive db operation at the moment
-    cycle.status = getCycleStatusForDay(dateString, {
-      excludeEarlierCycles: true,
-    })
-    if (!cycle.status) {
+    cycle.status = getCycleStatusForDay(
+      dateString, { excludeEarlierCycles: true }
+    )
+    if(!cycle.status) {
      cycle.noMoreCycles = true
      return
    }
@@ -239,34 +232,39 @@ export function nfpLines() {
  }

  function dateIsInPeriOrPostPhase(dateString) {
-    return dateString >= cycle.status.phases.periOvulatory.start.date
+    return (
+      dateString >= cycle.status.phases.periOvulatory.start.date
+    )
  }

  function precededByAnotherTempValue(dateString) {
    return (
      // we are only interested in days that have a preceding
      // temp
-      Object.keys(cycle.status.phases).some((phaseName) => {
-        return cycle.status.phases[phaseName].cycleDays.some((day) => {
+      Object.keys(cycle.status.phases).some(phaseName => {
+        return cycle.status.phases[phaseName].cycleDays.some(day => {
          return day.temperature && day.date < dateString
        })
-      }) &&
+      })
      // and also a following temp, so we don't draw the line
      // longer than necessary
-      cycle.status.phases.postOvulatory.cycleDays.some((day) => {
+      &&
+      cycle.status.phases.postOvulatory.cycleDays.some(day => {
        return day.temperature && day.date > dateString
      })
    )
  }

  function isInTempMeasuringPhase(temperature, dateString) {
-    return temperature || precededByAnotherTempValue(dateString)
+    return (
+      temperature || precededByAnotherTempValue(dateString)
+    )
  }

-  return function (dateString, temperature, columnHeight) {
+  return function(dateString, temperature, columnHeight) {
    const ret = {
      drawLtlAt: null,
-      drawFhmLine: false,
+      drawFhmLine: false
    }
    if (!cycle.status && !cycle.noMoreCycles) updateCurrentCycle(dateString)
    if (cycle.noMoreCycles) return ret
@@ -274,8 +272,7 @@ export function nfpLines() {
    if (dateString < cycle.startDate) updateCurrentCycle(dateString)
    if (cycle.noMoreCycles) return ret

-    const tempShift =
-      fertilityTrackingObservable.value && cycle.status.temperatureShift
+    const tempShift = cycle.status.temperatureShift

    if (tempShift) {
      if (tempShift.firstHighMeasurementDay.date === dateString) {
@@ -1,4 +1,4 @@
-import { ChronoUnit, LocalDate, LocalTime } from '@js-joda/core'
+import { ChronoUnit, LocalDate, LocalTime } from 'js-joda'

 import {
  getPreviousTemperatureForDate,
@@ -34,10 +34,6 @@ export const formatTemperature = (temperature) =>
    ? temperature
    : Number.parseFloat(temperature.toString()).toFixed(2)

-//maximum of precision digits after decimal point, but no x.0
-export const formatDecimal = (num, precision) =>
-  +parseFloat(Number.parseFloat(num).toFixed(precision))
-
 export const getPreviousTemperature = (date) => {
  const previousTemperature = getPreviousTemperatureForDate(date)
  return formatTemperature(previousTemperature)
@@ -1,4 +1,4 @@
-import { LocalDate } from '@js-joda/core'
+import { LocalDate } from 'js-joda'
 import moment from 'moment'

 import { general as labels } from '../../i18n/en/cycle-day'
@@ -22,18 +22,3 @@ export function dateToTitle(dateString) {
    ? labels.today
    : moment(dateString).format('ddd DD. MMM YY')
 }
-
-export function humanizeDate(dateString) {
-  if (!dateString) return ''
-
-  const today = LocalDate.now()
-
-  try {
-    const dateToDisplay = LocalDate.parse(dateString)
-    return today.equals(dateToDisplay)
-      ? labels.today
-      : moment(dateString).format('DD. MMM YY')
-  } catch (e) {
-    return ''
-  }
-}
@@ -1,7 +1,5 @@
 import Toast from 'react-native-simple-toast'

-export const showToast = (text) =>
-  Toast.show(text, Toast.SHORT, [
-    'RCTModalHostViewController',
-    'UIAlertController',
-  ])
+export const showToast = (text) => Toast.show(
+  text, Toast.SHORT, ['RCTModalHostViewController', 'UIAlertController']
+)
@@ -1,4 +1,4 @@
-import { ChronoUnit, LocalDate } from '@js-joda/core'
+import { ChronoUnit, LocalDate } from 'js-joda'

 import { formatDateForShortText } from './format-date'

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

 export function determinePredictionText(bleedingPrediction, t) {
-  if (!bleedingPrediction.length)
-    return t('labels.bleedingPrediction.noPrediction')
-  const { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd } =
-    getTimes(bleedingPrediction)
+  if (!bleedingPrediction.length) return t('labels.bleedingPrediction.noPrediction')
+  const {
+    todayDate,
+    predictedBleedingStart,
+    predictedBleedingEnd,
+    daysToEnd
+  } = getTimes(bleedingPrediction)
  if (todayDate.isBefore(predictedBleedingStart)) {
    return predictLabels.predictionInFuture(
      todayDate.until(predictedBleedingStart, ChronoUnit.DAYS),
@@ -46,18 +48,19 @@ export function determinePredictionText(bleedingPrediction, t) {

 export function getBleedingPredictionRange(prediction) {
  if (!prediction.length) return labels.unknown
-  const { todayDate, predictedBleedingStart, predictedBleedingEnd, daysToEnd } =
-    getTimes(prediction)
+  const {
+    todayDate,
+    predictedBleedingStart,
+    predictedBleedingEnd,
+    daysToEnd
+  } = getTimes(prediction)
  if (todayDate.isBefore(predictedBleedingStart)) {
-    return `${todayDate.until(
-      predictedBleedingStart,
-      ChronoUnit.DAYS
-    )}-${todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)}`
+    return `${todayDate.until(predictedBleedingStart, ChronoUnit.DAYS)}-${todayDate.until(predictedBleedingEnd, ChronoUnit.DAYS)}`
  }
  if (todayDate.isAfter(predictedBleedingEnd)) {
    return labels.unknown
  }
-  return daysToEnd === 0 ? '0' : `0 - ${daysToEnd}`
+  return (daysToEnd === 0 ? '0' : `0 - ${daysToEnd}`)
 }

 export function getOrdinalSuffix(num) {
@@ -1,2 +1,2 @@
-export const getLabelsList = (categories) =>
-  categories.map((label, i) => ({ label, value: i }))
+export const getLabelsList =
+  (categories) => categories.map((label, i) => ({ label, value: i }))
@@ -1,11 +1,10 @@
+
 export default function (jsDate) {
  const vals = [jsDate.getHours(), jsDate.getMinutes()]
-  return vals
-    .map((val) => {
-      if (parseInt(val) < 10) {
-        val = `0${val}`
-      }
-      return val
-    })
-    .join(':')
-}
+  return vals.map(val => {
+    if (parseInt(val) < 10) {
+      val = `0${val}`
+    }
+    return val
+  }).join(':')
+}
@@ -1,45 +1,35 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
-import PropTypes from 'prop-types'

 import MenuItem from './menu-item'

 import { Containers } from '../../styles'
 import { pages } from '../pages'
-import { useTranslation } from 'react-i18next'

-const Menu = ({ currentPage, navigate }) => {
-  const menuItems = pages.filter((page) => page.isInMenu)
-
-  const { t } = useTranslation(null, { keyPrefix: 'bottomMenu' })
+const Menu = () => {
+  const menuItems = pages.filter(page => page.isInMenu)

  return (
    <View style={styles.container}>
-      {menuItems.map(({ icon, labelKey, component }) => {
+      { menuItems.map(({ icon, label, component }) => {
        return (
          <MenuItem
-            isActive={component === currentPage}
-            onPress={() => navigate(component)}
+            component={component}
            icon={icon}
-            key={labelKey}
-            label={t(labelKey)}
+            key={label}
+            label={label}
          />
-        )
-      })}
-    </View>
+        )}
+      )}
+    </View >
  )
 }

-Menu.propTypes = {
-  currentPage: PropTypes.string,
-  navigate: PropTypes.func,
-}
-
 const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
-    ...Containers.rowContainer,
-  },
+    ...Containers.rowContainer
+  }
 })

-export default Menu
+export default Menu
@@ -4,48 +4,69 @@ import { StyleSheet, Text, TouchableOpacity } from 'react-native'

 import Icon from '../common/menu-icon'

+import { connect } from 'react-redux'
+import { getNavigation, navigate } from '../../slices/navigation'
+
 import { Colors, Containers, Fonts, Sizes, Spacing } from '../../styles'

-const MenuItem = ({ isActive, icon, label, onPress }) => {
+const MenuItem = ({ component, icon, label, navigate, navigation }) => {
+  const isActive = (component === navigation.currentPage)
  const textStyle = isActive ? styles.menuTextActive : styles.menuText
  const testID = isActive ? 'activeMenuItem' : `menuItem${label}`

  return (
-    <TouchableOpacity style={styles.button} onPress={onPress}>
-      <Icon name={icon} isActive={isActive} />
-      <Text testID={testID} style={textStyle}>
-        {label}
-      </Text>
+    <TouchableOpacity
+      style={styles.button}
+      onPress={() => navigate(component)}
+    >
+      <Icon name={icon} isActive={isActive}/>
+      <Text testID={testID} style={textStyle} >{label}</Text>
    </TouchableOpacity>
  )
 }

 MenuItem.propTypes = {
-  isActive: PropTypes.bool.isRequired,
+  component: PropTypes.string.isRequired,
  icon: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
-  onPress: PropTypes.func.isRequired,
+  navigation: PropTypes.object,
+  navigate: PropTypes.func,
 }

 const text = {
  fontFamily: Fonts.bold,
  fontSize: Sizes.small,
-  textTransform: 'uppercase',
+  textTransform: 'uppercase'
 }

 const styles = StyleSheet.create({
  button: {
    padding: Spacing.base,
-    ...Containers.centerItems,
+    ...Containers.centerItems
  },
  menuText: {
    color: Colors.grey,
-    ...text,
+    ...text
  },
  menuTextActive: {
    color: Colors.orange,
-    ...text,
-  },
+    ...text
+  }
 })

-export default MenuItem
+const mapStateToProps = (state) => {
+  return({
+    navigation: getNavigation(state),
+  })
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return({
+    navigate: (page) => dispatch(navigate(page)),
+  })
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(MenuItem)
@@ -1,67 +1,78 @@
 import settingsViews from './settings'

+import settingsLabels from '../i18n/en/settings'
+const labels = settingsLabels.menuItems
+
+export const isSettingsView = (page) =>
+  Object.keys(settingsViews).includes(page)
+
 export const pages = [
  {
    component: 'Home',
    icon: 'home',
+    label: 'Home',
  },
  {
    component: 'Calendar',
    icon: 'calendar',
    isInMenu: true,
-    labelKey: 'calendar',
+    label: 'Calendar',
    parent: 'Home',
  },
  {
    component: 'Chart',
    icon: 'chart',
    isInMenu: true,
-    labelKey: 'chart',
+    label: 'Chart',
    parent: 'Home',
  },
  {
    component: 'Stats',
    icon: 'statistics',
    isInMenu: true,
-    labelKey: 'stats',
+    label: 'Stats',
    parent: 'Home',
  },
  {
    children: Object.keys(settingsViews),
    component: 'SettingsMenu',
    icon: 'settings',
+    label: 'Settings',
    parent: 'Home',
  },
  {
    component: 'Reminders',
+    label: labels.reminders.name,
    parent: 'SettingsMenu',
  },
  {
-    component: 'Customization',
+    component: 'NfpSettings',
+    label: labels.nfpSettings.name,
    parent: 'SettingsMenu',
  },
  {
    component: 'DataManagement',
-    parent: 'SettingsMenu',
-  },
-  {
-    component: 'Info',
+    label: labels.dataManagement.name,
    parent: 'SettingsMenu',
  },
  {
    component: 'Password',
+    label: labels.password.name,
    parent: 'SettingsMenu',
  },
  {
    component: 'About',
+    label: 'About',
    parent: 'SettingsMenu',
  },
  {
    component: 'License',
+    label: 'License',
    parent: 'SettingsMenu',
  },
  {
    component: 'PrivacyPolicy',
+    label: 'PrivacyPolicy',
    parent: 'SettingsMenu',
  },
  {
@@ -1,7 +1,7 @@
-import React, { useState } from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Alert, KeyboardAvoidingView, StyleSheet, View } from 'react-native'
-import { SHA512 } from 'jshashes'
+import { Alert, StyleSheet, View } from 'react-native'
+import nodejs from 'nodejs-mobile-react-native'

 import AppPage from './common/app-page'
 import AppTextInput from './common/app-text-input'
@@ -9,95 +9,117 @@ import Button from './common/button'
 import Header from './header'

 import { saveEncryptionFlag } from '../local-storage'
-import { deleteDbAndOpenNew, openDb } from '../db'
+import { requestHash, deleteDbAndOpenNew, openDb } from '../db'
 import { passwordPrompt as labels, shared } from '../i18n/en/labels'
 import { Containers, Spacing } from '../styles'

 const cancelButton = { text: shared.cancel, style: 'cancel' }

-const PasswordPrompt = ({ enableShowApp }) => {
-  const [password, setPassword] = useState(null)
-  const isPasswordEntered = Boolean(password)
-
-  const unlockApp = async () => {
-    const hash = new SHA512().hex(password)
-    const connected = await openDb(hash)
-
-    if (!connected) {
-      Alert.alert(shared.incorrectPassword, shared.incorrectPasswordMessage, [
-        {
-          text: shared.tryAgain,
-          onPress: () => setPassword(null),
-        },
-      ])
-      return
-    }
-    enableShowApp()
+export default class PasswordPrompt extends Component {
+  static propTypes = {
+    enableShowApp: PropTypes.func.isRequired
  }

-  const onDeleteDataConfirmation = async () => {
+  constructor(props) {
+    super(props)
+    this.state = { password: null }
+
+    nodejs.channel.addListener('check-pw', this.passHashToDb, this)
+  }
+
+  componentWillUnmount() {
+    nodejs.channel.removeListener('check-pw', this.passHashToDb)
+  }
+
+  onConfirmDeletion = async () => {
+    Alert.alert(
+      labels.deleteDatabaseTitle,
+      labels.deleteDatabaseExplainer,
+      [cancelButton, { text: labels.deleteData, onPress: this.onDeleteData}]
+    )
+  }
+
+  onDeleteData = () => {
+    Alert.alert(
+      labels.areYouSureTitle,
+      labels.areYouSure,
+      [cancelButton, {
+        text: labels.reallyDeleteData,
+        onPress: this.onDeleteDataConfirmation
+      }]
+    )
+  }
+
+  onDeleteDataConfirmation = async () => {
    await deleteDbAndOpenNew()
    await saveEncryptionFlag(false)
-    enableShowApp()
+    this.props.enableShowApp()
  }

-  const onDeleteData = () => {
-    Alert.alert(labels.areYouSureTitle, labels.areYouSure, [
-      cancelButton,
-      {
-        text: labels.reallyDeleteData,
-        onPress: onDeleteDataConfirmation,
-      },
-    ])
+  passHashToDb = async hash => {
+    const connected = await openDb(hash)
+    if (!connected) {
+      Alert.alert(
+        shared.incorrectPassword,
+        shared.incorrectPasswordMessage,
+        [{
+          text: shared.tryAgain,
+          onPress: () => this.setState({ password: null })
+        }]
+      )
+      return
+    }
+    this.props.enableShowApp()
  }

-  const onConfirmDeletion = async () => {
-    Alert.alert(labels.deleteDatabaseTitle, labels.deleteDatabaseExplainer, [
-      cancelButton,
-      { text: labels.deleteData, onPress: onDeleteData },
-    ])
+  unlockApp = () => {
+    requestHash('check-pw', this.state.password)
  }

-  return (
-    <>
-      <Header isStatic />
-      <AppPage contentContainerStyle={styles.contentContainer}>
-        <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={150}>
+  setPassword = (password) => {
+    this.setState({ password })
+  }
+
+  render() {
+    const { password } = this.state
+    const isPasswordEntered = Boolean(password)
+
+    return (
+      <React.Fragment>
+        <Header isSideMenuEnabled={false} />
+        <AppPage contentContainerStyle={styles.contentContainer}>
          <AppTextInput
-            onChangeText={setPassword}
+            isKeyboardOffset={false}
+            onChangeText={this.setPassword}
            secureTextEntry={true}
            placeholder={labels.enterPassword}
          />
          <View style={styles.containerButtons}>
-            <Button onPress={onConfirmDeletion}>{labels.forgotPassword}</Button>
+            <Button onPress={this.onConfirmDeletion}>
+              {labels.forgotPassword}
+            </Button>
            <Button
              disabled={!isPasswordEntered}
              isCTA={isPasswordEntered}
-              onPress={unlockApp}
+              onPress={this.unlockApp}
            >
              {labels.title}
            </Button>
          </View>
-        </KeyboardAvoidingView>
-      </AppPage>
-    </>
-  )
-}
-
-PasswordPrompt.propTypes = {
-  enableShowApp: PropTypes.func.isRequired,
+        </AppPage>
+      </React.Fragment>
+    )
+  }
 }

 const styles = StyleSheet.create({
  contentContainer: {
    flex: 1,
    justifyContent: 'center',
-    marginHorizontal: Spacing.base,
+    marginHorizontal: Spacing.base
  },
  containerButtons: {
    ...Containers.rowContainer,
-    justifyContent: 'space-around',
-  },
+    justifyContent: 'space-around'
+  }
 })
-
-export default PasswordPrompt
@@ -1,73 +0,0 @@
-import React from 'react'
-import { Platform, Linking } from 'react-native'
-
-import AppPage from '../common/app-page'
-import AppText from '../common/app-text'
-import AppLink from '../common/AppLink'
-import Segment from '../common/segment'
-import Button from '../common/button'
-import ButtonRow from '../common/button-row'
-
-import links from '../../i18n/en/links'
-import { useTranslation } from 'react-i18next'
-
-const AboutSection = () => {
-  const { t } = useTranslation(null, { keyPrefix: 'hamburgerMenu.about' })
-
-  return (
-    <AppPage title={t('title')}>
-      <Segment>
-        <AppText>{t('intro.text')}</AppText>
-        <Button isCTA isSmall onPress={() => Linking.openURL(links.faq.url)}>
-          {t('intro.faq')}
-        </Button>
-        <AppText>{t('intro.contact')}</AppText>
-        <ButtonRow>
-          {[links.email, links.gitlab, links.website].map((link) => (
-            <Button
-              key={link.url}
-              isCTA
-              isSmall
-              onPress={() => Linking.openURL(link.url)}
-            >
-              {link.text}
-            </Button>
-          ))}
-        </ButtonRow>
-      </Segment>
-      <Segment title={t('philosophy.title')}>
-        <AppText>{t('philosophy.text')}</AppText>
-      </Segment>
-      <Segment title={t('credits.title')}>
-        <AppText>
-          {t('credits.text')}{' '}
-          <AppLink url={links.flaticon.url}>flaticon</AppLink>.{' '}
-        </AppText>
-        <AppText>
-          {t('credits.madeBy')}{' '}
-          <AppLink url={links.smashicons.url}>smashicons</AppLink>,{' '}
-          <AppLink url={links.pause08.url}>pause08</AppLink>,{' '}
-          <AppLink url={links.kazachek.url}>kazachek</AppLink>,{' '}
-          <AppLink url={links.freepik.url}>freepik</AppLink>.
-        </AppText>
-      </Segment>
-      <Segment title={t('donate.title')}>
-        <AppText>{t('donate.text')}</AppText>
-        {Platform.OS !== 'ios' && (
-          <Button
-            isCTA
-            isSmall
-            onPress={() => Linking.openURL(links.donate.url)}
-          >
-            {t('donate.button')}
-          </Button>
-        )}
-      </Segment>
-      <Segment title={t('version.title')} last>
-        <AppText>{require('../../package.json').version}</AppText>
-      </Segment>
-    </AppPage>
-  )
-}
-
-export default AboutSection
@@ -1,50 +0,0 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import PropTypes from 'prop-types'
-import { useTranslation } from 'react-i18next'
-
-import AppIcon from '../common/app-icon'
-import AppPage from '../common/app-page'
-import AppText from '../common/app-text'
-import Segment from '../common/segment'
-
-import { Colors, Spacing, Typography } from '../../styles'
-import labels from '../../i18n/en/settings'
-
-const Info = () => {
-  const { t } = useTranslation(null, { keyPrefix: 'hamburgerMenu.info' })
-  return (
-    <AppPage title={t('title')}>
-      <Segment last>
-        <View style={styles.line}>
-          <AppIcon
-            color={Colors.purple}
-            name="info-with-circle"
-            style={styles.icon}
-          />
-          <AppText style={styles.title}>{labels.preOvu.title}</AppText>
-        </View>
-        <AppText>{labels.preOvu.note}</AppText>
-      </Segment>
-    </AppPage>
-  )
-}
-
-Info.propTypes = {
-  children: PropTypes.node,
-}
-
-export default Info
-
-const styles = StyleSheet.create({
-  icon: {
-    marginRight: Spacing.base,
-  },
-  line: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  title: {
-    ...Typography.subtitle,
-  },
-})
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
bl00dymarie	4fab8b26cb	Setting for ITSAppUsesNonExemptEncryption	2022-08-11 08:29:26 +02:00
bl00dymarie	deb9d3d8e8	Bump version number 1.2208.11	2022-08-11 08:20:25 +02:00
bl00dymarie	fcc54566fc	Merge branch 'fix/replace-app-restart' into 'release' Replaces closing/restart functionality with a more friendly app state reset See merge request bloodyhealth/drip!461	2022-08-11 06:16:17 +00:00
Sofiya Tepikin	0118fcd6ce	Merge branch 'Chore/Remove-email-and-hence-typo' into 'release' Chore: Remove email and hence typo from text See merge request bloodyhealth/drip!459	2022-08-10 14:35:36 +00:00
Sofiya Tepikin	298eeafdba	Fixes linter failing	2022-08-10 16:24:37 +02:00
Sofiya Tepikin	77ea075c23	Cleanup	2022-08-10 16:24:37 +02:00
Sofiya Tepikin	38f91c2e25	Reset app state without closing/restarting it	2022-08-10 16:24:37 +02:00
Sofiya Tepikin	d9a1cd7895	Prettify files before other changes Prettify	2022-08-10 16:24:37 +02:00
Sofiya Tepikin	e954ddf991	Merge branch 'fix/realm-warning' into 'release' Fix deprecated way of using writeCopyTo - realm method See merge request bloodyhealth/drip!460	2022-08-10 14:22:56 +00:00
Sofiya Tepikin	74c570da38	Fix deprecated way of using writeCopyTo - realm method	2022-08-10 14:22:55 +00:00
bl00dymarie	8c99f2c6a3	Remove email and hence typo from text	2022-08-09 13:16:58 +02:00
bl00dymarie	34c1eae991	Merge branch 'fix/empty-password' into 'release' Fix/empty password See merge request bloodyhealth/drip!456	2022-08-08 11:33:56 +00:00
bl00dymarie	e37d44c506	Bump version number 1.2208.8	2022-08-08 13:31:17 +02:00
Sofiya Tepikin	33dba03c47	Disable button when no input	2022-08-08 12:38:20 +02:00
Sofiya Tepikin	a7bdd4b6a6	Prettify enter-new-password	2022-08-08 12:37:20 +02:00