React Native including component inside a ScrollView not working

Question

I'm building and app where I'm trying to include a component named Header.js inside navigation forlder. I'm working with functional components throughout the app. Also the images are not working. I'm new with React Native.

Here's the error

Unable to resolve module `./src/navigation/Header` from `src/screens/userprofile/Profilecard.js`: 

None of these files exist:

• src/screens/userprofile/src/navigation/Header(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
• src/screens/userprofile/src/navigation/Header/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)

RCTFatal __28-[RCTCxxBridge handleError:]_block_invoke _dispatch_call_block_and_release _dispatch_client_callout _dispatch_main_queue_callback_4CF CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE __CFRunLoopRun CFRunLoopRunSpecific GSEventRunModal -[UIApplication _run] UIApplicationMain main start

I dont't understand what am I doing wrong I check multiple videos on youtube including (https://www.youtube.com/watch?v=Hf4MJH0jDb4 and https://www.youtube.com/watch?v=LEa48P-KtCw)

This my Profile.js where I'm including Header

import React from 'react';
import { 
View, 
Text, 
StyleSheet, 
Image, 
TouchableOpacity,
} from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import { Header } from './src/navigation/Header';


const ProfileCard = () => {

return(
    <ScrollView>
        <View  style={styles.container}>

            <Header/>

            <View style={styles.profileCard}>
                <Text style={styles.cardHeading}>
                    Faithful
                </Text>
                <Image style={styles.cardImg} source={'./assets/img/logo.png'}/>
                <Text style={styles.cardText}>
                    The passage is attributed to an unknown typesetter in the 15th century. Lorem ipsum is a placeholder text commonly used to demonstrate.
                </Text>
                <View style={styles.cardOptions}>
                    <Image style={styles.iconImg} source={'./assets/img/icons/download.png'}/>
                    <Image style={styles.iconImg} source={'./assets/img/icons/heart.png'}/>
                    <Image style={styles.iconImg} source={'./assets/img/icons/share.png'}/>
                </View>
            </View>
        </View>
    </ScrollView>
);

}

This is Header.js

import React from 'react';
import { 
View, 
Text, 
StyleSheet, 
Image, 
TouchableOpacity,
} from 'react-native';

const Header = () => {
return(
    <View style={styles.header}>

        <TouchableOpacity>
            <Image style={styles.logoImg} source={'./assets/img/logo.png'}/>
        </TouchableOpacity>

        <TouchableOpacity>
            <Image style={styles.profileIcon} source={'./assets/img/icons/avatar.png'}/>
        </TouchableOpacity>

        <TouchableOpacity>
            <Image style={styles.settingsIcon} source={'./assets/img/icons/settings.png'}/>
        </TouchableOpacity>
        
    </View>
);
}
export default Header();

const styles = StyleSheet.create({
    header: {
        flexDirection: 'row',
        backgroundColor: '#fff',
    }
});

Folders:

src/screens
src/navigation
src/assetes/img
src/assets/fonts
src/other