How to use Animatable.View in Typescript

Author: matheuspelegrinoCreated May 11, 2020Updated Oct 11, 2024

Code:

typescript

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

typescript

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<...>'

Source: oblador/react-native-animatable