Improve linking and link more things

components/helpers/replace-url-with-text.js

@@ -0,0 +1,6 @@
+import {links} from '../../i18n/en/settings'
+
+export default function(url) {
+  const link = Object.values(links).find(link => link.url === url)
+  return link ? link.text : url
+}

components/link.js

@@ -1,13 +0,0 @@
-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/about.js

@@ -1,16 +1,20 @@
 import React, { Component } from 'react'
 import { ScrollView } from 'react-native'
+import Hyperlink from 'react-native-hyperlink'
 import AppText from '../app-text'
 import SettingsSegment from './settings-segment'
 import styles from '../../styles/index'
 import labels from '../../i18n/en/settings'
+import replace from '../helpers/replace-url-with-text'
 
 export default class AboutSection extends Component {
   render() {
     return (
       <ScrollView>
         <SettingsSegment title={`${labels.aboutSection.title} `}>
-          <AppText>{`${labels.aboutSection.segmentExplainer} `}</AppText>
+          <Hyperlink linkStyle={styles.link} linkText={replace}>
+            <AppText>{`${labels.aboutSection.segmentExplainer} `}</AppText>
+          </Hyperlink>
         </SettingsSegment>
         <SettingsSegment title={`${labels.credits.title} `} style={styles.settingsSegmentLast}>
           <AppText>{`${labels.credits.note}`}</AppText>

components/settings/nfp-settings/index.js

@@ -2,13 +2,14 @@ import React, { Component } from 'react'
 import {
   ScrollView, View
 } from 'react-native'
+import Hyperlink from 'react-native-hyperlink'
 import styles, { iconStyles } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 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'
+import replaceUrlWithText from '../../helpers/replace-url-with-text'
 
 export default class Settings extends Component {
   constructor(props) {
@@ -32,11 +33,9 @@ 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.note1}
-            <Link text={labels.preOvu.link} href="https://gitlab.com/bloodyhealth/drip/wikis/home" />
-            {labels.preOvu.note2}
-          </AppText>
+          <Hyperlink linkStyle={styles.link} linkText={replaceUrlWithText}>
+            <AppText>{labels.preOvu.note}</AppText>
+          </Hyperlink>
         </View>
       </ScrollView>
     )