Issue
I have component whose Props
interface extends ViewProps
from React Native, i.e:
export interface Props extends ViewProps {
// Custom props
}
Naturally, this extends the style
prop. There is one caveat, I am using Animated.View
and have style like this:
style={{
opacity: animationCharacter.interpolate({
inputRange: [0, 1],
outputRange: [0, 1]
}),
transform: [
{
scale: animationCharacter.interpolate({
inputRange: [0, 1],
outputRange: [1.2, 1]
})
}
]
}}
I think the interpolate
call is incompatible with style typings from ViewProps
, but there is no AnimatedViewProps
I can extend.
Is there a solution here or will I have to set style: any
?
Solution
I don't believe there's a builtin solution. Looking at the type definitions for React Native, the Animated namespace doesn't even specify types for the Animated components, and just leaves them as any
:
/**
* Animated variants of the basic native views. Accepts Animated.Value for
* props and style.
*/
export const View: any;
export const Image: any;
export const Text: any;
export const ScrollView: any;
Even the React Native source (which uses FlowType) leaves the props to an a plain Object type:
class AnimatedComponent extends React.Component<Object> {
…
}
This is probably because React Native has wrapper classes for internally handling animated styles and props (even transforms) specifically, making it a lot harder to specify types exactly due to abstraction. I think your best bet here is to use any
since it would incredibly tedious to create your own types, and with little benefit.
Answered By - Andrew Li
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.