jinyaqiu
828e84710f
All checks were successful
Dev Deploy / Explore-Gitea-Actions (push) Successful in 24s
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { StyleSheet, TouchableOpacity, View } from "react-native";
|
|
|
|
const CustomSwitch = ({ isEnabled, toggleSwitch }: { isEnabled: boolean, toggleSwitch: () => void }) => (
|
|
<TouchableOpacity
|
|
activeOpacity={0.8}
|
|
onPress={toggleSwitch}
|
|
style={[styles.switchContainer, isEnabled ? styles.switchOn : styles.switchOff]}
|
|
>
|
|
<View style={[styles.switchCircle, isEnabled ? styles.switchCircleOn : styles.switchCircleOff]} />
|
|
</TouchableOpacity>
|
|
);
|
|
|
|
const styles = StyleSheet.create({
|
|
switchContainer: {
|
|
width: 50,
|
|
height: 30,
|
|
borderRadius: 15,
|
|
justifyContent: 'center',
|
|
paddingHorizontal: 4,
|
|
},
|
|
switchOn: {
|
|
backgroundColor: '#FFB645',
|
|
alignItems: 'flex-end',
|
|
},
|
|
switchOff: {
|
|
backgroundColor: '#E5E5E5',
|
|
alignItems: 'flex-start',
|
|
},
|
|
switchCircle: {
|
|
width: 26,
|
|
height: 26,
|
|
borderRadius: 13,
|
|
},
|
|
switchCircleOn: {
|
|
backgroundColor: 'white',
|
|
},
|
|
switchCircleOff: {
|
|
backgroundColor: '#A5A5A5',
|
|
},
|
|
});
|
|
|
|
export default CustomSwitch; |