Animation does not work properly in react native

Question

I tried making a carousel by watching a tutorial but I cannot get it to work for an event driven animation. Instead of animating it just updates the position to new location.

This does not happen if I use only one type of animation for transition, mentioning just one value to transform rotate instead of passing an expression.

what it looks like

what it should look like

const cards = ["tomato", "teal", "pink"]
const alpha = Math.PI/6

const Trans = () => {
const value = React.useRef(new Animated.Value(0)).current
const [toggled, setToggled] = React.useState(false)

const animationFn = () => {
    Animated.spring(value, {
        toValue: 1,
        friction: 10,
        useNativeDriver: true
    }).start()
    setToggled(toggled => !toggled)
}

const rotateOpen = (rotate) => {
    return value.interpolate({       
        inputRange: [0, 1],
        outputRange: ['0rad', `${rotate}rad`]
    })
}

const rotateClose = (rotate, maxValues) => {
    return value.interpolate({       
        inputRange: [0, 1],
        outputRange: [`${maxValues}rad`, `${rotate}rad`]
    })
}

return(
    <>
    {cards.map((card, index) => {
        const rotate = toggled ? (index - 1) * alpha : 0
        const maxValues = (index-1) * alpha
        return (
            <Animated.View key={card} style={{transform: [
                {translateY: -50},
                {translateX: -100},                 
                {rotate: !toggled ? rotateOpen(rotate) : rotateClose(rotate, maxValues) },                        
                {translateX: 100},                  
            ], borderRadius: 15, position: 'absolute', backgroundColor: card, height: 100, width: 200}} />
        )
    })}

  
    <View style={{paddingTop: 100}}>
        <TouchableOpacity onPress={() => { animationFn() }}>
        <Text style={{fontSize: 30}}>  Animate </Text>
        </TouchableOpacity>
    </View>
    </>
)
}

Could you output the calculated value of rotate: to your consol.log to see what its true value is - what happens if index==0 for example? And you could set the value in a variable currot = !toggled ? rotateOpen(rotate) : rotateClose(rotate, maxValues) and then use that variable in rotate: currot to see what happens. Are you seeing any errors on the console? — A Haworth, Sep 27 '20 at 11:06
the values are correct, its just that the animations are not happening and its just updating to the final state — Sid Sharma, Sep 27 '20 at 12:03

score 1 · Accepted Answer · answered Sep 28 '20 at 03:22

Your interpolation values shouldn't change between the open and close functions. The animation library knows that when you go from 0 to 1, you're rotating the block "out" and then when you go from 1 back to 0, you're applying the same interpolation in reverse

so this code appears to work correctly for me:

const Trans = () => {
  const value = React.useRef(new Animated.Value(0)).current;
  const [toggled, setToggled] = React.useState(false);

  useEffect(() => {
    Animated.spring(value, {
      toValue: toggled ? 0 : 1,
      friction: 10,
      useNativeDriver: false,
    }).start();
  }, [toggled, value]);

  return (
    <>
      {cards.map((card, index) => {
        const rotate = (index - 1) * alpha;

        return (
          <Animated.View
            key={card}
            style={{
              transform: [
                { translateY: -50 },
                { translateX: -100 },
                {
                  rotate: value.interpolate({
                    inputRange: [0, 1],
                    outputRange: ['0rad', `${rotate}rad`],
                  }),
                },
                { translateX: 100 },
              ],
              borderRadius: 15,
              position: 'absolute',
              backgroundColor: card,
              height: 100,
              width: 200,
            }}
          />
        );
      })}

      <View style={{ paddingTop: 100 }}>
        <TouchableOpacity
          onPress={() => {
            setToggled(!toggled);
          }}>
          <Text style={{ fontSize: 30 }}> Animate </Text>
        </TouchableOpacity>
      </View>
    </>
  );
};

Animation does not work properly in react native

1 Answers1