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?