Massive/Switch.tsx
Brandon Presley 051df31925 Fix inactive track color on mismatched themes
Before if your system theme was dark and your app
theme was set to light, the track colors were wrong.
2022-12-29 19:30:26 +13:00

36 lines
856 B
TypeScript

import {Platform, Pressable} from 'react-native'
import {Switch as PaperSwitch, Text, useTheme} from 'react-native-paper'
import {MARGIN} from './constants'
export default function Switch({
value,
onChange,
children,
}: {
value?: boolean
onChange: (value: boolean) => void
children: string
}) {
const {colors} = useTheme()
return (
<Pressable
onPress={() => onChange(!value)}
style={{
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
marginBottom: Platform.OS === 'ios' ? MARGIN : null,
}}>
<PaperSwitch
color={colors.primary}
style={{marginRight: MARGIN}}
value={value}
onValueChange={onChange}
trackColor={{true: colors.primary + '80', false: colors.disabled}}
/>
<Text>{children}</Text>
</Pressable>
)
}