Issue
I am struggling to understand why typescript giving me this error message when I use <ImageBackground>
and <Image>
component from 'react-native'.
error message:
No overload matches this call. Overload 1 of 2, '(props: ImageBackgroundProps | Readonly): ImageBackground', gave the following error. Type '{ children: Element; style: { flex: number; justifyContent: "flex-end"; }; resizeMode: "cover"; source: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Overload 2 of 2, '(props: ImageBackgroundProps, context: any): ImageBackground', gave the following error. Type '{ children: Element; style: { flex: number; justifyContent: "flex-end"; }; resizeMode: "cover"; source: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
primary source code :
import React from "react";
import {
ImageBackground,
StyleSheet,
View,
} from "react-native";
export default function WelcomeScreen() {
return (
<ImageBackground
style={styles.background}
resizeMode="cover"
source={require("../assets/images/background.jpg")}
>
<View>
<View style={styles.logginButton}></View>
<View style={styles.registerButton}></View>
</View>
</ImageBackground>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
justifyContent: "flex-end",
},
logginButton: {
width: "100%",
height: 70,
backgroundColor: "#fc5c65",
},
registerButton: {
width: "100%",
height: 70,
backgroundColor: "#4ecdc4",
},
});
Because the error message sounds like I cannot pass children element in ImageBackground component, so when I changed ImageBackground component to self-closing element (like <ImageBackground source={image source} />
the error message disappears.
The other solution that I am using currently is to define a custom component referring to expo typescript template. In Themed.tsx, the template defined custom <Text>
and <View>
component to apply custom theme.
the code currently works :
import React from "react";
import {
ImageBackground as DefaultImageBackground,
StyleSheet,
View,
} from "react-native";
type ImageBackgroundProps = DefaultImageBackground["props"] & {
children: React.ReactNode;
};
function MyBackground(props: ImageBackgroundProps) {
return <DefaultImageBackground {...props} />;
}
export default function WelcomeScreen() {
return (
<MyBackground
style={styles.background}
resizeMode="cover"
source={require("../assets/images/background.jpg")}
>
<View>
<View style={styles.logginButton}></View>
<View style={styles.registerButton}></View>
</View>
</MyBackground>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
justifyContent: "flex-end",
},
logginButton: {
width: "100%",
height: 70,
backgroundColor: "#fc5c65",
},
registerButton: {
width: "100%",
height: 70,
backgroundColor: "#4ecdc4",
},
});
But I think my solution does not make sense, ImageBackground component should be able to take children element. Is there any syntax error in my primary source code?
Solution
I am also having this issue. I fixed it by changing the version of node I was using. This issue is present on node 16.14.0
through to 16.15.0
.
I noticed that:
- node
16.14.2
brings in npm8.5.0
- node
16.15.0
brings in npm8.5.5
- node
16.3.2
brings in npm8.1.2
- node
17.0.0
brings in npm8.1.0
We just kept the project at 16.13.2
instead of updating.
My current theory is that these differences in npm are causing differences in how tsc interprets rules. I would love to know if I am wrong on that.
Looking in the source code for ImageBackground I see
class ImageBackground extends React.Component<$FlowFixMeProps> {
setNativeProps(props: Object) {
// Work-around flow
const viewRef = this._viewRef;
if (viewRef) {
viewRef.setNativeProps(props);
}
}
where <$FlowFixMeProps> is set to:
type $FlowFixMeProps = /*unresolved*/ any
Is it possible that tsc is not liking any?
Answered By - Adam
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.