React-native-animatable: Animations not working with custom components

[Aspirationtocode]

import * as Animatable from 'react-native-animatable';
MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent);

Such method not work

[brad-n]

+1

[Nqsty]

I am having the same issue on Android.

[barghi]

same issue here (on android)

[oblador]

Animatable uses Animated under the hood, so if your component doesn't support it, then Animatable won't either. You might try to add support for setNativeProps and see if that helps.

[mateoKaradza]

Ran into the same issue. The temporary solution is to create a custom component that is using Animatable.View (or whatever) so you don't have to use the provided function. Didn't look into the function yet, if I find the time I'll try to see what is going on.

[Vi-jay]

same issue . you must put the update animation operation in the requestAnimationFrame.
But another problem is that when executed on a custom component, it is repeatedly render 18 times !!!

[manixate]

Make sure that your component accepts a style prop and it is applied to your top-level view.
e.g

class MyCustomComponent extends React.PureComponent {
  render() {
    const { style } = this.props;
    return (
      <View style={style}>
        <Text>This is animating now</Text>
      </View>
    );
  }
}
const AnimatedComponent = Animatable.createAnimatableComponent(MyCustomComponent);