CODEWITHSUNDEEP
react-nativeanimation
Eliav Louski
Eliav Louski

Reputation: 5214

React Native Animation not working on ios and web but only on android (demo Snack inside)

I'm writing a small react-native component. this component is a collapsible view(using react-native-collapsible).

demo: https://snack.expo.io/@eliav2/dac9d6

You can see that the small arrow that represents whether the element is expanded or not is not working on web and ios but in android works just fine.

I'm using react-native-animatable to animate arrow rotation.

the relevant part of the code for arrow rotation animation is in Expandable.js is:

 // ... bla bla bla not relevant code ...
const rotateAngle = I18nManager.isRTL ? 90 : -90; // support both rtl and ltr languages.

// called when clicking on the expandable view.
const handleArrowRotate = () => {
  if (!show) view.animate({ from: { rotation: rotateAngle }, to: { rotation: 0 } });
  else view.animate({ from: { rotation: 0 }, to: { rotation: rotateAngle } });
};

let view = null;  // will be set to ref on animatable mounting 
return (
  // ... bla bla bla not relevant code ...
    <Animatable.View duration={300} style={{ rotation: !show ? rotateAngle : 0 }} ref={(ref) => (view = ref)}>
      <Image style={{ width: 24, height: 24 }} source={require("../assets/arrow-down.png")} />
    </Animatable.View>
  // ... bla bla bla not relevant code ...
};

Does someone have an idea why the hack it won't work on ios and web in the exact same way? react-native-animatable does not mention differences when using their API on android or ios...

any help would be very appreciated!

Upvotes: 1

Views: 1402

Answers (1)

Eliav Louski
Eliav Louski

Reputation: 5214

the reason was that android supports rotate animations in integers(or strings) while ios and web requires the usage of string(means "90deg" instead of 90):

 const rotateAngle = isRTL ? 90 : -90;
  const rotateAnimDeg = rotateAnim.interpolate({
    inputRange: [0, 360],
    outputRange: ["0deg", "360deg"],
  });

Upvotes: 1

Related Questions