无法在本机反应中导入.js文件

Question

screenshot

I am trying to import these three components from the component folder but it doesnt let me. The import statements are greyed out and doesn't read my.js files. I dont think its my file path at all because i was able to import an image the same way from asset folder. Any help would be appreciated!

app.js

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { Button, ImageBackground, SafeAreaView, StyleSheet, Text, TouchableWithoutFeedback, View } from "react-native";

import header from "./components/header";
import item from "./components/items";
import add from "./components/add";

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <ImageBackground source={require("./assets/cart.jpg")} style={styles.image}></ImageBackground>
      <StatusBar style="auto" />

      <Text style={styles.title}> Smart Shopper </Text>
      <Button title="Create A Shopping List" style={styles.button} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 50,
    fontFamily: "Roboto",
    fontWeight: "100",
    color: "black",
    bottom: 250,
  },
  image: {
    width: "100%",
    height: "100%",
    position: "absolute",
  },
});

header.js

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

export default function header() {
  return (
    <View style={styles.header}>
      <Text style={styles.title}>My Todos</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    height: 80,
    paddingTop: 38,
    backgroundColor: "coral",
  },
  title: {
    textAlign: "center",
    color: "#fff",
    fontSize: 20,
    fontWeight: "bold",
  },
});

Answer 1

This is not actually an error. This is displaying in greyed out because VS formatter is not recognizing it's a react component because you used all small letters in your component name. Your react component should be in CamelCase. Everyone is recommended to use Camel Case name in react component.

So first change all of your component names and files names in camel case like this:

Change your file name Header.js

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

export default function Header() {
  return (
    <View style={styles.header}>
      <Text style={styles.title}>My Todos</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    height: 80,
    paddingTop: 38,
    backgroundColor: "coral",
  },
  title: {
    textAlign: "center",
    color: "#fff",
    fontSize: 20,
    fontWeight: "bold",
  },
});

Do this for all components.

Now, import it in your app.js like this:

import Header from "./components/Header";
import Item from "./components/Items";
import Add from "./components/Add";

Answer 2

If we are supposed to create components then we must have to create components with the name that starts with the upper case.

and also keep in mind that we also have to import the component with the first letter in upperCase.

Have a try at small changes in your code:

in header.js

export default function Header() {

in App.js

import Header from "./components/header";

Keep in mind you must have to import the file with the filename you created. so, here import the Header with the header file name.