Refactor npf settings component

components/settings/nfp-settings/use-cervix.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import {
   View,
-  TouchableOpacity,
   Switch
 } from 'react-native'
 import AppText from '../../app-text'
@@ -9,7 +8,6 @@ import {
   useCervixObservable,
   saveUseCervix
 } from '../../../local-storage'
-import styles from '../../../styles/index'
 import labels from '../../../i18n/en/settings'
 
 export default class UseCervixSetting extends Component {
@@ -20,29 +18,22 @@ export default class UseCervixSetting extends Component {
 
   render() {
     return (
-      <TouchableOpacity
-        style={styles.settingsSegment}
-      >
-        <AppText style={styles.settingsSegmentTitle}>
-          {labels.useCervix.title}
-        </AppText>
-        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          <View style={{ flex: 1 }}>
-            {this.state.useCervix ?
-              <AppText>{labels.useCervix.cervixModeOn}</AppText>
-              :
-              <AppText>{labels.useCervix.cervixModeOff}</AppText>
-            }
-          </View>
-          <Switch
-            value={this.state.useCervix}
-            onValueChange={bool => {
-              this.setState({ useCervix: bool })
-              saveUseCervix(bool)
-            }}
-          />
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <View style={{ flex: 1 }}>
+          {this.state.useCervix ?
+            <AppText>{labels.useCervix.cervixModeOn}</AppText>
+            :
+            <AppText>{labels.useCervix.cervixModeOff}</AppText>
+          }
         </View>
-      </TouchableOpacity>
+        <Switch
+          value={this.state.useCervix}
+          onValueChange={bool => {
+            this.setState({ useCervix: bool })
+            saveUseCervix(bool)
+          }}
+        />
+      </View>
     )
   }
 }