How to make Toggle Button with Animated.View in React Native? - reactjs

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',
},
});