I tried to import components from a separate file in react native learning but they all get errors, I’ve looked for solutions in several forums and communities but I can’t find a solution, is there something wrong with my syntax?
the Problem :
this is my problem at my project can you help some one solution,
ERROR [Error: undefined Unable to resolve module ./src/Components/MenuBar from D:PROGRAMMINGBelajarJavaScriptReact Navivekesehatan_uiApp.js:
None of these files exist:
* srcComponentsMenuBar(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx) * srcComponentsMenuBarindex(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx) 1 | import React, { useState, useEffect } from "react";
2 | import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
> 3 | import MenuBar from "./src/Components/MenuBar";
| ^
4 | const App = () => {
5 | const mainBlue = "#0082F7";
6 | const mainBlack = "#34354e";]
error: Error: Unable to resolve module ./src/Components/MenuBar from D:PROGRAMMINGBelajarJavaScriptReact Navivekesehatan_uiApp.js:
App.js
this is my code in App. js I have imported the file correctly in the directory that has been pointed to, namely MenuBar.js but still error
import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import MenuBar from "./src/Components/MenuBar";
const App = () => {
const mainBlue = "#0082F7";
const mainBlack = "#34354e";
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }}></View>
<MenuBar />
</View>
);
};
const styles = StyleSheet.create({
iconBtn: {
alignItems: "center",
justifyContent: "center",
// backgroundColor: "blue",
flex: 1,
},
});
export default App;
on MenuBar.js
import React from "react";
import { Text, View } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";
const MenuBar = () => {
return (
<View
style={{
flexDirection: "row",
backgroundColor: "#fff",
elevation: 3,
paddingTop: 10,
paddingBottom: 10,
}}
>
<TouchableOpacity style={styles.iconBtn}>
<Icon name="home" size={22} color={mainBlue} />
<Text style={{ fontSize: 12, color: mainBlue }}>Home</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.iconBtn}>
<Icon name="calendar" size={22} color={mainBlack} />
<Text style={{ fontSize: 12, color: mainBlack }}>Jadwal</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.iconBtn}>
<Icon name="chatbubble-ellipses" size={22} color={mainBlack} />
<Text style={{ fontSize: 12, color: mainBlack }}>Pesan</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.iconBtn}>
<Icon name="person" size={22} color={mainBlack} />
<Text style={{ fontSize: 12, color: mainBlack }}>Profile</Text>
</TouchableOpacity>
</View>
);
};
export default MenuBar;
[myDirectory][1]