Add link

components/app-text.js

@@ -1,33 +1,30 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Text } from 'react-native'
 import styles from "../styles"
 
-export default class AppText extends Component {
-  render() {
-    return (
-      <Text style={[styles.appText, this.props.style]}>
-        {this.props.children}
-      </Text>
-    )
-  }
+export default function AppText(props) {
+  return (
+    <Text
+      style={[styles.appText, props.style]}
+      onPress={props.onPress}
+    >
+      {props.children}
+    </Text>
+  )
 }
 
-export class AppTextLight extends Component {
-  render() {
-    return (
-      <Text style={[styles.appTextLight, this.props.style]}>
-        {this.props.children}
-      </Text>
-    )
-  }
+export function AppTextLight(props) {
+  return (
+    <Text style={[styles.appTextLight, props.style]}>
+      {props.children}
+    </Text>
+  )
 }
 
-export class SymptomSectionHeader extends Component {
-  render() {
-    return (
-      <AppText style={styles.symptomViewHeading}>
-        {this.props.children}
-      </AppText>
-    )
-  }
+export function SymptomSectionHeader(props) {
+  return (
+    <AppText style={styles.symptomViewHeading}>
+      {props.children}
+    </AppText>
+  )
 }

components/link.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Linking } from 'react-native'
+import AppText from "./app-text"
+import styles from '../styles';
+
+export default function Link(props) {
+  return (
+    <AppText
+      style={styles.link}
+      onPress={() => Linking.openURL(props.href)}
+    >{props.text}</AppText>
+  )
+}

components/settings/nfp-settings/index.js

@@ -8,6 +8,7 @@ import AppText from '../../app-text'
 import TempSlider from './temp-slider'
 import UseCervixSetting from './use-cervix'
 import Icon from 'react-native-vector-icons/Entypo'
+import Link from '../../link'
 
 export default class Settings extends Component {
   constructor(props) {
@@ -31,7 +32,11 @@ export default class Settings extends Component {
             <Icon name="info-with-circle" style={iconStyles.infoInHeading}/>
             <AppText style={styles.settingsSegmentTitle}>{`${labels.preOvu.title} `}</AppText>
           </View>
-          <AppText>{`${labels.preOvu.note} `}</AppText>
+          <AppText>
+            {labels.preOvu.note1}
+            <Link text={labels.preOvu.link} href="https://gitlab.com/bloodyhealth/drip/wikis/home" />
+            {labels.preOvu.note2}
+          </AppText>
         </View>
       </ScrollView>
     )

i18n/en/settings.js

@@ -1,3 +1,4 @@
+
 export default {
   menuTitles: {
     reminders: 'Reminders',
@@ -81,6 +82,8 @@ export default {
   },
   preOvu: {
     title: 'Infertile days at cycle start',
-    note: "drip applies NFP's rules for calculating infertile days at the start of the cycle (see the wiki for more info). However, drip does not currently apply the so called 20-day-rule, which determines infertile days at the cycle start from past cycle lengths in case no past symptothermal info is available."
+    note1: "drip applies NFP's rules for calculating infertile days at the start of the cycle (see the ",
+    link: 'wiki',
+    note2: " for more info). However, drip does not currently apply the so called 20-day-rule, which determines infertile days at the cycle start from past cycle lengths in case no past symptothermal info is available."
   }
 }

styles/index.js

@@ -40,6 +40,10 @@ export default StyleSheet.create({
   emphasis: {
     fontWeight: 'bold',
   },
+  link: {
+    color: cycleDayColor,
+    textDecorationLine: 'underline'
+  },
   title: {
     fontSize: 18,
     color: 'black',