Add trackColor to Switch element directly

components/common/app-switch.js

@@ -4,9 +4,10 @@ import PropTypes from 'prop-types'
 
 import AppText from './app-text'
 
-import { Containers } from '../../styles'
+import { Colors, Containers } from '../../styles'
 
-const AppSwitch = ({ onToggle, text, value, trackColor, disabled }) => {
+const AppSwitch = ({ onToggle, text, value, disabled }) => {
+  const trackColor = { true: Colors.turquoiseDark }
   return (
     <View style={styles.container}>
       <View style={styles.textContainer}>
@@ -27,7 +28,6 @@ AppSwitch.propTypes = {
   onToggle: PropTypes.func.isRequired,
   text: PropTypes.string,
   value: PropTypes.bool,
-  trackColor: PropTypes.string,
   disabled: PropTypes.bool,
 }
 

components/settings/customization/index.js

@@ -25,7 +25,6 @@ import {
   periodPredictionObservable,
   useCervixObservable,
 } from '../../../local-storage'
-import { Colors } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 import { SYMPTOMS } from '../../../config'
 
@@ -121,37 +120,31 @@ const Settings = () => {
           onToggle={temperatureTrackingCategoryToggle}
           text={SYMPTOMS[1]}
           value={isTemperatureTrackingCategoryEnabled}
-          trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
           onToggle={sexTrackingCategoryToggle}
           text={SYMPTOMS[4]}
           value={isSexTrackingCategoryEnabled}
-          trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
           onToggle={desireTrackingCategoryToggle}
           text={SYMPTOMS[5]}
           value={isDesireTrackingCategoryEnabled}
-          trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
           onToggle={painTrackingCategoryToggle}
           text={SYMPTOMS[6]}
           value={isPainTrackingCategoryEnabled}
-          trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
           onToggle={moodTrackingCategoryToggle}
           text={SYMPTOMS[7]}
           value={isMoodTrackingCategoryEnabled}
-          trackColor={{ true: Colors.turquoiseDark }}
         />
         <AppSwitch
           onToggle={noteTrackingCategoryToggle}
           text={SYMPTOMS[8]}
           value={isNoteTrackingCategoryEnabled}
-          trackColor={{ true: Colors.turquoiseDark }}
         />
       </Segment>
 
@@ -160,7 +153,6 @@ const Settings = () => {
           onToggle={toggleSwitch}
           text={'If turned on ...'}
           value={isEnabled}
-          trackColor={{ true: Colors.turquoiseDark }}
         />
       </Segment>
 
@@ -185,7 +177,6 @@ const Settings = () => {
               onToggle={onCervixToggle}
               text={cervixText}
               value={shouldUseCervix}
-              trackColor={{ true: Colors.turquoiseDark }}
             />
           )}
           {!isTemperatureTrackingCategoryEnabled && (
@@ -199,7 +190,6 @@ const Settings = () => {
           onToggle={onPeriodPredictionToggle}
           text={periodPredictionText}
           value={isPeriodPredictionEnabled}
-          trackColor={{ true: Colors.turquoiseDark }}
         />
       </Segment>
     </AppPage>