oblador / react-native-animatable

Standard set of easy to use animations and declarative transitions for React Native
MIT License
9.81k stars 702 forks source link

Animatable.createAnimatableComponent(Pressable) dont accept the same style props. #343

Closed robertohein closed 3 years ago

robertohein commented 3 years ago

According to the react native docs the style prop on Pressable receives "Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.". When i try to pass a function to get the current pressed state in style i get a type error.

const CART_BAR_HEIGHT = 150;

const animation = {
  0: { transform: [{ translateY: CART_BAR_HEIGHT * 2 }] },
  1: { transform: [{ translateY: CART_BAR_HEIGHT + SPACING }] },
};

const AnimatablePressable = Animatable.createAnimatableComponent(Pressable);
const CartBar = () => {
  const { t } = useTranslate();
  const { empty, cart } = useCart();
  return (
    <AnimatablePressable
      animation={animation}
      delay={300}
      onPress={() => empty()}
      style={({ pressed }) => [s.view, pressed && { opacity: 0.8 }]}
    >
      <Text style={s.text}>{t('checkout')}</Text>
      <Text style={s.text}>{currency(cart.total)}</Text>
    </AnimatablePressable>
  );
};

the error received:

Warning: Failed prop type: Invalid prop 'style' supplied to 'withAnimatable(Pressable)'.
dairdr commented 1 year ago

how did you fix the issue?