temp

components/home.js

@@ -1,13 +1,14 @@
 import React, { Component } from 'react'
-import { Linking } from 'react-native'
 import { ScrollView, View, TouchableOpacity, TouchableHighlight, Dimensions } from 'react-native'
 import { LocalDate, ChronoUnit } from 'js-joda'
 import Icon from 'react-native-vector-icons/Entypo'
+import Hyperlink from 'react-native-hyperlink'
 import { secondaryColor, cycleDayColor, periodColor } from '../styles'
-import { home as labels, bleedingPrediction as predictLabels, shared } from '../i18n/en/labels'
+import { home as labels, bleedingPrediction as predictLabels, shared, links } from '../i18n/en/labels'
 import cycleModule from '../lib/cycle'
 import { getCycleDaysSortedByDate } from '../db'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
+import replace from './helpers/replace-url-with-text'
 import styles from '../styles'
 import AppText, { AppTextLight } from './app-text'
 import DripHomeIcon from '../assets/drip-home-icons'
@@ -95,6 +96,8 @@ export default class Home extends Component {
       labels.cycleDayKnown(cycleDayNumber) :
       labels.cycleDayNotEnoughInfo
 
+    const { statusText } = this.state;
+
     return (
       <View flex={1}>
         <ScrollView>
@@ -154,7 +157,10 @@ export default class Home extends Component {
               { isShowingMore &&
                 <View>
                   <AppText styles={styles.paragraph}>
-                    {this.state.statusText}
+                    { statusText && <AppText>{ `${status}.` }</AppText> }
+                    <Hyperlink linkStyle={styles.link} linkText={replace}>
+                      <AppText>${links.moreToNfp.url}`}</AppText>
+                    </Hyperlink>
                   </AppText>
                 </View>
               }

i18n/en/labels.js

@@ -94,7 +94,7 @@ export const home = {
   cycleDayKnown: d => `Your last period started ${getDaysDescriptor(d)}.`,
   trackPeriod: 'track your period',
   checkFertility: 'check your fertility',
-  phase: n => `${['1st', '2nd', '3rd'][n - 1]} cycle phase`
+  phase: n => `${['1st', '2nd', '3rd'][n - 1]} cycle phase`,
 }
 
 const getDaysDescriptor = cycleDayNumber => {

i18n/en/settings.js

@@ -14,7 +14,11 @@ export const links = {
   },
   website: {
     url: 'https://bloodyhealth.gitlab.io/'
-  }
+  },
+  moreToNfp: {
+    url: 'https://gitlab.com/bloodyhealth/drip/wikis/nfp/intro',
+    text: 'More'
+  },
 }
 
 export default {
@@ -122,7 +126,7 @@ export default {
     title: 'drip is an open-source cycle tracking app',
     text: `Copyright (C) 2019 Bloody Health GbR
 
-This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details: https://www.gnu.org/licenses/gpl-3.0.html 
+This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details: https://www.gnu.org/licenses/gpl-3.0.html
 
 You can contact us by email at bloodyhealth@mailbox.com.`
   },