Open vinics12 opened 6 years ago
Any update on this guys? This is a serious issue to be worked on :/ Still not working with:
"react-native-switch": "^1.5.0" "react-native": "0.59.9"
Hey am I doing something wrong here? the animation seems really bad. (https://imgflip.com/gif/4mel7q)
import React from "react";
import { View } from "react-native";
import { Switch } from "react-native-switch";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import colors from "../config/colors.js";
export default function SwitchFilter({ onChange, value }) {
return (
<View
style={{
flexDirection: "row",
}}
>
<Switch
value={value}
onValueChange={onChange}
disabled={false}
activeText={"Less Than"}
inActiveText={"Greater Than"}
circleSize={30}
barHeight={25}
circleBorderWidth={1}
backgroundActive={colors.dark}
backgroundInactive={colors.dark}
activeTextStyle={{
color:'red'
}}
inactiveTextStyle={{
color:'green'
}}
renderInsideCircle={() => (
<MaterialCommunityIcons
color={colors.dark}
name={value ? "less-than" : "greater-than"}
size={20}
/>
)} // custom component to render inside the Switch circle (Text, Image, etc.)
innerCircleStyle={{
color:'green',
backgroundColor:colors.mediumLight,
alignItems: "center", justifyContent: "center",
borderWidth:1,
borderColor:'white',
}} // style for inner animated circle for what you (may) be rendering inside the circle
outerCircleStyle={{
borderWidth:1,
borderColor:'white',
borderRadius:10,
paddingRight: value ? 0 : 15,
paddingLeft: value ? 15 : 0,
marginLeft: value ? -20 : 15,
}} // style for outer animated circle
// renderActiveText={false}
// renderInActiveText={false}
// switchLeftPx={2} // denominator for logic when sliding to TRUE position. Higher number = more space from RIGHT of the circle to END of the slider
// switchRightPx={12} // denominator for logic when sliding to FALSE position. Higher number = more space from LEFT of the circle to BEGINNING of the slider
switchWidthMultiplier={value ? 3.3 : 3.8} // multipled by the `circleSize` prop to calculate total width of the Switch
// switchBorderRadius={10} // Sets the border Radius of the switch slider. If unset, it remains the circleSize.
/>
</View>
);
}
At the last version of project NPM, I checked a problem when I update the value and disabled props at the same time, animation of inside circle doesn't happen. Probably, the problem is at Switch.js on the componentWillReceiveProps:
if (disabled) { return; }
Will work you change to:
if (disabled && disabled === nextProps.disabled) { return; }