React-native-animatable: How to use Animatable.View in Typescript

[matheuscastroweb]

Code:

import * as Animatable from 'react-native-animatable';

const Connection: React.FC = () => {
  const animatableRef = useRef<Animatable.View>(null);
// not working
// const animatableRef = useRef<Animatable.View | null>(null);
// const animatableRef = useRef<Animatable.View | null>();
// const animatableRef = useRef<Animatable.View>();

   [...] 
  return (
    <Animatable.View
      ref={animatableRef}
      animation="slideInDown"
      style={{ zIndex: 10 }}
    >

        <Text>Say hello</Text>

    </Animatable.View>
  );
};

Error in ref property

No overload matches this call.
  Overload 1 of 2, '(props: AnimatableProperties<ViewStyle> & ViewProps, context?: any): ClassicComponent<AnimatableProperties<ViewStyle> & ViewProps, any>', gave the following error.
    O tipo 'RefObject<View>' não pode ser atribuído ao tipo 'string | ((instance: ClassicComponent<AnimatableProperties<ViewStyle> & ViewProps, any> | null) => void) | RefObject<...> | null | undefined'.
      O tipo 'RefObject<View>' não pode ser atribuído ao tipo 'RefObject<ClassicComponent<AnimatableProperties<ViewStyle> & ViewProps, any>>'.
        Type 'AnimatableComponent<ViewProps, ViewStyle>' is missing the following properties from type 'ClassicComponent<AnimatableProperties<ViewStyle> & ViewProps, any>': replaceState, isMounted, context, setState, and 4 more.
  Overload 2 of 2, '(props: AnimatableProperties<ViewStyle> & ViewProps, context?: any): Component<AnimatableProperties<ViewStyle> & ViewProps, any, any>', gave the following error.
    O tipo 'RefObject<View>' não pode ser atribuído ao tipo 'string | ((instance: Component<AnimatableProperties<ViewStyle> & ViewProps, any, any> | null) => void) | RefObject<Component<AnimatableProperties<...> & ViewProps, any, any>> | null | undefined'.
      O tipo 'RefObject<View>' não pode ser atribuído ao tipo 'RefObject<Component<AnimatableProperties<ViewStyle> & ViewProps, any, any>>'.
        Type 'AnimatableComponent<ViewProps, ViewStyle>' is missing the following properties from type 'Component<AnimatableProperties<ViewStyle> & ViewProps, any, any>': context, setState, forceUpdate, render, and 2 more.ts(2769)
index.d.ts(145, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<ClassicComponent<AnimatableProperties<ViewStyle> & ViewProps, any>> & Readonly<...> & Readonly<...>'
index.d.ts(145, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<AnimatableProperties<ViewStyle> & ViewProps, any, any>> & Readonly<...> & Readonly<...>'

[andrico1234]

I also came across this issue.

I removed the type and it works

```import * as Animatable from 'react-native-animatable';

const Connection: React.FC = () => {
const animatableRef = useRef(null);

return (
ref={animatableRef}
animation="slideInDown"
style={{ zIndex: 10 }}
>

    <Text>Say hello</Text>

</Animatable.View>

);
}
```

I have faith in TypeScript's type inference that I don't need to explicitly define the type.

Edit

Completely ignore me, it just returns a RefType<any> or something along those lines. I was wrong about the type inference!

[toughdeveloper]

Not sure if its the best solution, but I find the following works well:

const animatableRef = useRef<Animatable.View & View>(null);

[matheuscastroweb]

Awesome, it worked @toughdeveloper!

In theory, it doesn't have to be necessary, does it?

Animatable.View returns or must reference a View Props:

export type View = AnimatableComponent <ViewProperties, ViewStyle>; 

Or am I wrong?

[ryoid]

@toughdeveloper solution worked for me.

However, when using it with custom components doesn't seem to work. I am trying to use it with react-native-fast-image anyone know how I should be doing it?

const AnimatedImage = Animatable.createAnimatableComponent(FastImage);

const imageRef = React.useRef<typeof AnimatedImage>(null);

No overload matches this call.
  Overload 1 of 2, '(props: AnimatableProperties<StyleProp<ImageStyle>> & FastImageProperties, context?: any): ClassicComponent<AnimatableProperties<StyleProp<ImageStyle>> & FastImageProperties, any>', gave the following error.
    Type 'RefObject<AnimatableComponent<FastImageProperties, StyleProp<ImageStyle>>>' is not assignable to type 'string | ((instance: ClassicComponent<AnimatableProperties<StyleProp<ImageStyle>> & FastImageProperties, any> | null) => void) | RefObject<...> | null | undefined'.
      Type 'RefObject<AnimatableComponent<FastImageProperties, StyleProp<ImageStyle>>>' is not assignable to type 'RefObject<ClassicComponent<AnimatableProperties<StyleProp<ImageStyle>> & FastImageProperties, any>>'.
        Type 'AnimatableComponent<FastImageProperties, StyleProp<ImageStyle>>' is missing the following properties from type 'ClassicComponent<AnimatableProperties<StyleProp<ImageStyle>> & FastImageProperties, any>': replaceState, isMounted, context, setState, and 4 more.
  Overload 2 of 2, '(props: AnimatableProperties<StyleProp<ImageStyle>> & FastImageProperties, context?: any): Component<AnimatableProperties<StyleProp<ImageStyle>> & FastImageProperties, any, any>', gave the following error.
    Type 'RefObject<AnimatableComponent<FastImageProperties, StyleProp<ImageStyle>>>' is not assignable to type 'string | ((instance: Component<AnimatableProperties<StyleProp<ImageStyle>> & FastImageProperties, any, any> | null) => void) | RefObject<...> | null | undefined'.
      Type 'RefObject<AnimatableComponent<FastImageProperties, StyleProp<ImageStyle>>>' is not assignable to type 'RefObject<Component<AnimatableProperties<StyleProp<ImageStyle>> & FastImageProperties, any, any>>'.
        Type 'AnimatableComponent<FastImageProperties, StyleProp<ImageStyle>>' is missing the following properties from type 'Component<AnimatableProperties<StyleProp<ImageStyle>> & FastImageProperties, any, any>': context, setState, forceUpdate, render, and 2 more.ts(2769)
index.d.ts(145, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<ClassicComponent<AnimatableProperties<StyleProp<ImageStyle>> & FastImageProperties, any>> & Readonly<...> & Readonly<...>'
index.d.ts(145, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<AnimatableProperties<StyleProp<ImageStyle>> & FastImageProperties, any, any>> & Readonly<...> & Readonly<...>'

[RipTheJacker]

Same with using custom animations. Type error on the animation property.

<Animatable.Image 
  animation={{ 
    from: { rotateY: '0deg' }, 
    to: { rotateY: '359deg'} 
   }}
   />

[darron1217]

Any update on this issue?