I have a React Native component that will render an Animated.View
with an animated style for Android, otherwise it renders a View
without this style.
My code is:
interface ButtonProps { containerStyle?: StyleProp<ViewStyle>;}const Button: React.FC<ButtonProps> = ({ containerStyle }) => { let ContainerView: typeof View | typeof Animated.View = View; let viewShadow: AnimatedViewStyle | null = null; if (Platform.OS === 'android') { ContainerView = Animated.View; // pressedAnim is an `Animated.Value` that I omitted from the code so it is simpler to read viewShadow = { elevation: pressedAnim.interpolate({ inputRange: [0, 1], outputRange: [2, 8] }) }; } return {<ContainerView style={[styles.container, containerStyle, viewShadow]} /> }}const styles = StyleSheet.create({ container: { /* some style */ }});
The TypeScript warning No overload matches this call.
is cause by the viewShadow
. If I remove it from the style
prop, the warning is dismissed. If I use only an Animated.View
and keep the viewShadow
, the warning is dismissed too.
So, the problem here is that the Animated.View
and viewShadow
are only used together, so this is a false-positive warning.
How can I fix this? Is there another way to write this code so TypeScript won't warn that something is wrong?