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;