I have problem with image importing in typescript. Previously I used the img src="" but it says

View config getter callback for component img must be a function (received undefined). Make sure to start component names with a capital letter.

But the import is successful. It can find my file path. Then I use the Image component from react-native module. The code snippet is

<Image
   style={{
   width: 161,
   height: 111,
   alignSelf: "center",
   marginBottom: 30,
 }}
 />

But there is an error in the source and it says

Type '{ source: any; style: { width: number; height: number; alignSelf: string; marginBottom: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ImageProps, any, any>> & Readonly'. Property 'source' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ImageProps, any, any>> & Readonly'.

How can I solve this? Thanks in advance.

Here is the full code

import { View, TouchableOpacity, Text , ScrollView } from "react-native";
import React, { useState } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { svg } from "../svg";
import { theme } from "../constants";
import { components } from "../components";
import { Image, SvgUri } from "react-native-svg";
import  image from "../assets/logo2.png"

const Unregistered: React.FC = ({ navigation }: any) => {
    const [rememberMe, setRememberMe] = useState(false);

    const renderHeader = () => {
        return <components.Header goBack={true} />;
    };
    const renderContent = () => {
        return (
            <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
            
                <View >
                    <Text
                        style={{
                            textAlign: "center",
                            ...theme.FONTS.H2,
                            color: theme.COLORS.mainDark,
                            marginBottom: 20,
                        }}
                    >
                        Welcome to{"\n"}FNS Pay
                    </Text>
                    <img src="image"></img>
                    <Image
                        source={require("../assets/logo2.png")}
                        style={{
                            width: 161,
                            height: 111,
                            alignSelf: "center",
                            marginBottom: 30,
                        }}
                    />
                    
                    <View
                        style={{
                            flexDirection: "column",
                            alignItems: "center",
                            justifyContent: "space-between",
                            marginStart: 20,
                            marginEnd: 20

                        }}
                    >
                    <components.Button
                        title="Sign Up"
                        onPress={() => navigation.navigate("TabNavigator")}
                        containerStyle={{ marginTop: 400}}
                    />                   
                    <components.Button
                        title="Register Device"
                        onPress={() => navigation.navigate("OnBoarding")}
                        containerStyle={{ marginTop: 20}}
                    />
                    </View>

                </View>
            </ScrollView>
        );
    };

    return (
        <SafeAreaView
            style={{ flex: 1, backgroundColor: theme.COLORS.bgColor }}
        >
            {renderHeader()}
            {renderContent()}
        </SafeAreaView>
    );
};

export default Unregistered;
    ```

CodePudding user response：

You used a react-native-SVG for Image so, update it to import from react-native.