oblador
Error when using React.RefObject on Animatable.View with Typescript
There's an error when you're trying to use React.createRef with Animatable.View.
This error doesn't affect functionality and everything works, but the error is really annoying.
Here's code snippet that represents the error:
TS compiler says this:
Type 'RefObject<AnimatableComponent<ViewProps, ViewStyle>>' is not assignable to type 'string | ((instance: ClassicComponent<AnimatableProperties<ViewStyle> & ViewProps, any> | null) => any) | RefObject<ClassicComponent<AnimatableProperties<ViewStyle> & ViewProps, any>> | ((instance: Component<...> | null) => any) | RefObject<...> | undefined'.
Type 'RefObject<AnimatableComponent<ViewProps, ViewStyle>>' is not assignable to type 'RefObject<ClassicComponent<AnimatableProperties<ViewStyle> & ViewProps, any>>'.
Type 'AnimatableComponent<ViewProps, ViewStyle>' is not assignable to type 'ClassicComponent<AnimatableProperties<ViewStyle> & ViewProps, any>'.
Property 'replaceState' is missing in type 'AnimatableComponent<ViewProps, ViewStyle>'.
So my guess is that the problem is somewhere around this place in type definition:
interface AnimatableComponent<P extends {}, S extends {}> extends
NativeMethodsMixin,
AnimatableAnimationMethods,
ClassicComponentClass<AnimatableProperties<S> & P> /* <-- probably, this line */ {
/* ... */
}
I've tried to play around this piece of code with no luck.
Environment:
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
as always, solution comes when you already posted an issue, ugh...
found out working type definition:
interface AnimatableComponent<P extends {}, S extends {}> extends
NativeMethodsMixin,
AnimatableAnimationMethods,
Component,
ClassicComponentClass<AnimatableProperties<S> & P> {
refs: {
[key: string]: Component<any, any>
}
/* ... */
}
basically, you need to extend from Component as well as from ClassicComponentClass, but this will give you an error that you can't extend from NativeMethodsMixin and Component simultaneously because they have different refs definition, so simple redifining of refs locally in AnimatableComponent fixes it and now everything works fine.
