Source: components/CustomSwitch.js

import React from 'react';
import { View, Switch, Text, StyleSheet } from 'react-native';

/**
 * Custom switch used to turn notifications on/off in NotificationSettings.js.
 * @param {properties} props Component properties
 * @memberof module:Components
 * 
 * @component
 * @example
 * <CustomSwitch
      label={'Example text'}
      labelDescription={'Example description'}
      state={starting state (true or false)}
      key={unique identifier}
      onChange={newValue => {
        do something with the new value.
      }}
/>
 */
const CustomSwitch = props => {
  const { label, labelDescription, state, onChange } = props;
  return (
    <View style={style.container}>
      <View style={style.content}>
        <View style={style.textContainer}>
          <Text style={style.label}>{label}</Text>
          <Text style={style.labelDescription}>{labelDescription}</Text>
        </View>
        <Switch
          value={state}
          onValueChange={onChange}
          trackColor={{ disabled: '#CCCCCC', true: '#6699CC' }}
          ios_backgroundColor="#CCCCCC"
          thumbColor="white"
        />
      </View>
    </View>
  );
};

const style = StyleSheet.create({
  container: {
    flex: 1,
    borderBottomWidth: 1,
    borderColor: '#D3D3D3',
    marginTop: 10,
    marginBottom: 10,
    backgroundColor: '#EEEEEE'
  },
  content: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 10,
    marginBottom: 10
  },
  textContainer: {
    flexDirection: 'column',
    flex: 1
  },
  label: {
    fontSize: 17,
    fontFamily: 'MuseoSansRounded-500'
  },
  labelDescription: {
    fontStyle: 'italic',
    color: '#99A3A4',
    marginTop: 5,
    fontFamily: 'MuseoSansRounded-500'
  }
});

export default CustomSwitch;