Error: Unable to resolve module ../assets/Logo.png

0
votes

I am doing a project using MERN stack in that I am facing this error. I had cross checked

the code the Logo.png is opening even though it is showing error

Error: Unable to resolve module ../assets/Logo.png from

C:\Users\nahee\OneDrive\Desktop\MERN_PROJECT\animal-feedmart\Screens\Shared\Header.js:

None of these files exist:

  • Logo.png

Screens\assets\Logo.png\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.t

sx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json

)

6 |

7 | <Image

8 | source={require("../assets/Logo.png")}

 |                                  ^

9 | resizeMode="container"

10 | style={{ height: 50}}

11 | />

My Header.js file:

import React from "react"

import { StyleSheet, Image, SafeAreaView, View } from "react-native"

const Header = () => {

return(

    <View style={styles.header}>

        <Image

            source={require("../assets/Logo.png")}

            resizeMode="container"

            style={{ height: 50}}
        />

    </View>
)

const styles = StyleSheet.create({

    header: {

        width: "100%",

        flexDirection: "row",

        alignContent: "center",

        justifyContent: "center",

        padding: 20,

    }

})

}

export default Header;

My App.js file:

import { StatusBar } from 'expo-status-bar';

import React from 'react';

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

//Screens

import Header from './Screens/Shared/Header'

import ProductContainer from './Screens/Products/ProductContainer'

export default function App() {

return (

<View style={styles.container}>

  <Header />

  <ProductContainer />

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',

},

});

Please can anyone helps to solve this error as soon as possible

Thanks in advance

androidreact-native