52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
import { Motion } from '@legendapp/motion'
|
|
import { Pressable, View } from 'react-native'
|
|
import { Easing } from 'react-native-reanimated'
|
|
|
|
import { Palette } from '../styles'
|
|
import { LinearGradient } from './LinearGradient/LinearGradient'
|
|
|
|
export default ({ value, setValue, containerStyle = {} }) => {
|
|
const currentColor = value ? ['#F94697', '#7023F7'] : ['#8C8C8C', '#8C8C8C']
|
|
|
|
const switchHeight = 28
|
|
const internalMargin = 2
|
|
|
|
const itemSize = switchHeight - internalMargin * 2
|
|
|
|
return (
|
|
<Pressable onPress={() => setValue(!value)}>
|
|
<LinearGradient
|
|
colors={currentColor}
|
|
style={{
|
|
flexDirection: 'row',
|
|
width: switchHeight * 2,
|
|
height: switchHeight,
|
|
borderRadius: 25,
|
|
backgroundColor: 'red',
|
|
...containerStyle,
|
|
}}
|
|
>
|
|
<Motion.View
|
|
animate={{
|
|
right: value ? 0 : switchHeight,
|
|
left: value ? switchHeight : 0,
|
|
}}
|
|
transition={{
|
|
type: 'timing',
|
|
duration: 300,
|
|
easing: Easing.easing,
|
|
}}
|
|
style={{
|
|
position: 'absolute',
|
|
width: itemSize,
|
|
height: itemSize,
|
|
margin: internalMargin,
|
|
borderRadius: 25,
|
|
backgroundColor: Palette.white,
|
|
}}
|
|
/>
|
|
</LinearGradient>
|
|
</Pressable>
|
|
)
|
|
}
|