React Native Rotate Animation

Question

I am trying to create an animation using hooks, but I have problems with my code. can anybody help me? No error appears when I test, but the image does not appear. I'm trying to make a picture rotate on my loading screen.

export default function SplashLoading() {
  const [rotateValue, setRotateValue] = useState(new Animated.Value(0));
  useEffect(() => {
    StartImageRotate();
  }, []);

  function StartImageRotate() {
    rotateValue.setValue(0);

    Animated.timing(rotateValue, {
      toValue: 1,
      duration: 3000,
      easing: Easing.linear,
    }).start(() => StartImageRotate());
  }

  const RotateData = rotateValue.interpolate({
    inputRange: [0, 1],
    outputRange: ["0deg", "360deg"],
  });

  return (
    <Container>
      <Animated.Image
        style={{
          height: 230,
          transform: [{ rotate: RotateData }],
          width: 250,
        }}
        source={{ uri: "./gear.png" }}
      />
    </Container>
  );
}

Hamza Jadid · Answer 1 · 2022-03-17T23:43:52.487

I was trying to do image rotation using hooks, so I've encountered this image rotation in class component, turns out the issue was in how we provide the image source

<Animated.Image
    style={{
      height: 230,
      transform: [{ rotate: RotateData }],
      width: 250,
    }}
    source={{ uri: "./gear.png" }}
  />

instead of using uri, import the image at the top then using it in the Animated.Image

import GearPng from "./gear.png";


<Animated.Image
    style={{
      height: 230,
      transform: [{ rotate: RotateData }],
      width: 250,
    }}
    source={GearPng}
  />

side note: you can wrap the Animated.timing inside a Animated.loop so it keeps on repeating

Animated.loop(
  Animated.timing(rotateValue, {
    toValue: 1,
    duration: 3000,
    easing: Easing.linear,
    useNativeDriver: true,
  })
 ).start();
};

React Native Rotate Animation

1 Answers1