如何在 React Native 中使用 Animated.View 制作切换按钮？

Question

I can only use react native in the project, I need to make a Toggle Component with AnimatedView. I tried with react native switcher but it won't be responsive for mobile and web at the same time.

Here is my code

export const ToggleButton = () => {
const [isEnabled, setIsEnabled] = useState(false);
const [text, setText] = useState('');
const toggleSwitch = () => {
if (isEnabled) {
  setText('OFF');
} else {
  setText('ON');
}
setIsEnabled(previousState => !previousState);
};
 return (
<View style={styles.container}>
  <View>
    {isEnabled ? <Text style={styles.textOn}>On</Text> : <Text style={styles.textOff}>Off</Text>}
    <Switch
      trackColor={{ false: Colors.BlueLight, true: Colors.PurpleLight }}
      thumbColor={isEnabled ? Colors.BlueLight : Colors.BlueLight}
      ios_backgroundColor="#3E3E3E"
      onValueChange={toggleSwitch}
      value={isEnabled}
    />
  </View>
</View>
);
};

Someone give me a recommendation how to do it?

Answer 1

Hye finally i made a custom switch, do check out:

Do check out this expo https://snack.expo.dev/@gaurav1995/gnarly-sandwich

Its completely built with react native, no external libraries etc

Do lemme know in case of any doubts:)

 import React, { useState, useRef } from 'react'; import { Text, View, StyleSheet, Animated, TouchableOpacity, Easing } from 'react-native'; export default function App() { const positionButton = useRef(new Animated.Value(0)).current; const [isOn, setIsOn] = useState(false); const startAnimToOff = () => { Animated.timing(positionButton,{ toValue:0, duration:500, easing:Easing.ease }).start() }; const startAnimToOn = () => { Animated.timing(positionButton,{ toValue:1, duration:500, easing:Easing.ease }).start() }; const positionInterPol = positionButton.interpolate({inputRange:[0,1],outputRange:[0,30]}) const backgroundColorAnim = positionButton.interpolate({inputRange:[0,1],outputRange:["#767577","#81b0ff"]}) const initialOpacityOn = positionButton.interpolate({inputRange:[0,1],outputRange:[0,1]}) const initialOpacityOff = positionButton.interpolate({inputRange:[0,1],outputRange:[1,0]}) const onPress = () => { if (isOn) { startAnimToOff(); setIsOn(false); } else { startAnimToOn(); setIsOn(true); } }; return ( <View style={styles.container}> <TouchableOpacity style={{height:30,width:60}} activeOpacity={0.9} onPress={onPress} > <Animated.View style={[styles.mainStyes,{ backgroundColor:backgroundColorAnim }]} > <Animated.Text style={[ styles.eahcStyles, { opacity: initialOpacityOn, }, ]}> ON </Animated.Text> <Animated.Text style={[ styles.eahcStylesOf, { opacity: initialOpacityOff, }, ]}> OFF </Animated.Text> <Animated.View style={[styles.basicStyle,{ transform:[{ translateX:positionInterPol }] }]} /> </Animated.View> </TouchableOpacity> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', backgroundColor: '#ecf0f1', padding: 8, }, basicStyle: { height: 20, width: 20, borderRadius: 20, backgroundColor: '#FFF', marginTop: 5, marginLeft: 5, }, eahcStyles: { fontSize: 14, color: '#f5dd4b', position: 'absolute', top: 6, left: 5, }, eahcStylesOf: { fontSize: 14, color: '#f4f3f4', position: 'absolute', top: 6, right: 5, }, mainStyes: { borderRadius: 30, backgroundColor: '#81b0ff', height: 30, width: 60, }, paragraph: { margin: 24, fontSize: 18, fontWeight: 'bold', textAlign: 'center', }, });