Brandon Presley
8461f86e88
I find it easier to import hooks by useX instead of useContext(X). Like how the navigation library is just useNavigation
55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import React, {useMemo} from 'react';
|
|
import {Pressable} from 'react-native';
|
|
import {Switch as PaperSwitch, Text} from 'react-native-paper';
|
|
import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
|
|
import {useColor} from './color';
|
|
import {colorShade} from './colors';
|
|
import {MARGIN} from './constants';
|
|
import useDark from './use-dark';
|
|
|
|
export default function Switch({
|
|
value,
|
|
onValueChange,
|
|
onPress,
|
|
children,
|
|
}: {
|
|
value?: boolean;
|
|
onValueChange: (value: boolean) => void;
|
|
onPress: () => void;
|
|
children: string;
|
|
}) {
|
|
const {color} = useColor();
|
|
const dark = useDark();
|
|
|
|
const track = useMemo(() => {
|
|
if (dark)
|
|
return {
|
|
false: CombinedDarkTheme.colors.placeholder,
|
|
true: colorShade(color, -40),
|
|
};
|
|
return {
|
|
false: CombinedDefaultTheme.colors.placeholder,
|
|
true: colorShade(color, -40),
|
|
};
|
|
}, [dark, color]);
|
|
|
|
return (
|
|
<Pressable
|
|
onPress={onPress}
|
|
style={{
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
alignItems: 'center',
|
|
}}>
|
|
<PaperSwitch
|
|
trackColor={track}
|
|
color={color}
|
|
style={{marginRight: MARGIN}}
|
|
value={value}
|
|
onValueChange={onValueChange}
|
|
/>
|
|
<Text>{children}</Text>
|
|
</Pressable>
|
|
);
|
|
}
|