import {StyleSheet, Switch, ViewStyle} from 'react-native'; import React, {FC, useMemo} from 'react'; import {useTheme} from '../../theme/ThemeContext'; interface SwitchViewProps { toggleValue: boolean; onToggleChange: (value: boolean) => void; switchSize?: 'small' | 'medium' | 'large'; trackColor?: {false: string; true: string}; trackColorFalse?: string; trackColorTrue?: string; thumbColor?: string; thumbColorDisabled?: string; disabled?: boolean; style?: ViewStyle; } const SwitchView: FC = ({ toggleValue, switchSize = 'medium', trackColorFalse, trackColorTrue, trackColor, thumbColor, thumbColorDisabled, onToggleChange, disabled = false, style, }) => { const {colors} = useTheme(); const getSwitchStyle = useMemo((): ViewStyle => { const baseStyle: ViewStyle = {}; switch (switchSize) { case 'small': return {...baseStyle, transform: [{scaleX: 0.8}, {scaleY: 0.8}]}; case 'large': return {...baseStyle, transform: [{scaleX: 1.2}, {scaleY: 1.2}]}; default: return baseStyle; } }, [switchSize]); const getTrackColor = useMemo(() => { if (trackColorFalse || trackColorTrue) { return { false: trackColorFalse || colors.fills_black20, true: trackColorTrue || colors.primary_accent_blue, }; } return ( trackColor || { false: colors.fills_black20, true: colors.primary_accent_blue, } ); }, [trackColorFalse, trackColorTrue, trackColor, colors]); const getThumbColor = useMemo(() => { if (disabled) { return thumbColorDisabled || colors.fills_solid_tertiary; } return thumbColor || colors.primary_white; }, [disabled, thumbColor, thumbColorDisabled, colors]); return ( ); }; export default SwitchView;