import React from 'react'; import { View, Text, Switch } from 'react-native'; import PropTypes from 'prop-types'; import styles from './styles'; import { SWITCH_TRACK_COLOR, themes } from '../../constants/colors'; const SwitchContainer = React.memo(({ children, value, disabled, onValueChange, leftLabelPrimary, leftLabelSecondary, rightLabelPrimary, rightLabelSecondary, theme, testID, labelContainerStyle, leftLabelStyle }) => ( <> <View key='switch-container' style={[styles.switchContainer, children && styles.switchMargin]}> {leftLabelPrimary && ( <View style={[styles.switchLabelContainer, labelContainerStyle]}> <Text style={[styles.switchLabelPrimary, { color: themes[theme].titleText }, leftLabelStyle]}>{leftLabelPrimary}</Text> <Text style={[styles.switchLabelSecondary, { color: themes[theme].titleText }, leftLabelStyle]}>{leftLabelSecondary}</Text> </View> )} <Switch style={styles.switch} onValueChange={onValueChange} value={value} disabled={disabled} trackColor={SWITCH_TRACK_COLOR} testID={testID} /> {rightLabelPrimary && ( <View style={[styles.switchLabelContainer, labelContainerStyle]}> <Text style={[styles.switchLabelPrimary, { color: themes[theme].titleText }, leftLabelStyle]}>{rightLabelPrimary}</Text> <Text style={[styles.switchLabelSecondary, { color: themes[theme].titleText }, leftLabelStyle]}>{rightLabelSecondary}</Text> </View> )} </View> {children} <View key='switch-divider' style={[styles.divider, { borderColor: themes[theme].separatorColor }]} /> </> )); SwitchContainer.propTypes = { value: PropTypes.bool, disabled: PropTypes.bool, leftLabelPrimary: PropTypes.string, leftLabelSecondary: PropTypes.string, rightLabelPrimary: PropTypes.string, rightLabelSecondary: PropTypes.string, onValueChange: PropTypes.func, theme: PropTypes.string, testID: PropTypes.string, labelContainerStyle: PropTypes.object, leftLabelStyle: PropTypes.object, children: PropTypes.any }; export default SwitchContainer;