shahen94 / react-native-switch

Customisable switch component for RN
MIT License
296 stars 172 forks source link

Circle Animate doesn't happen when update disabled state #56

Open vinics12 opened 6 years ago

vinics12 commented 6 years ago

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; }

ghost commented 5 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"

barrard commented 4 years ago

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