Problem importing function in React Native

Question

Hi, I’m making a React app on using expo and am having the following error;

I’ve tried everything, as far as I understand he’s not recognizing the function LoginScreen in;

  <Stack.Screen name="Login" component={LoginScreen}/>

Strange that when I put the function and the Tyles inside the App.js it works normally, so I believe it’s something related to import, but I couldn’t solve it. Follows below code.

App.js

import LoginScreen from './src/screens/login/login';

const Stack = createStackNavigator();

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerShown: false
                }}>
                <Stack.Screen name="Login" component={LoginScreen}/>
            </Stack.Navigator>
        </NavigationContainer>
    );
}
-----------------------------------------------------
Login.js

import {View, Text, TextInput, TouchableOpacity} from 'react-native';
import {styles} from "./styles";
import {AppLoading} from 'expo';
import {useFonts} from 'expo-font';

export default function LoginScreen({navigation}) {
    let [fontsLoaded] = useFonts(
        {'Monoton': require('../../../assets/fonts/Monoton-Regular.ttf'), 'RobotoSlab': require('../../../assets/fonts/RobotoSlab.ttf')}
    );
    if (!fontsLoaded) {
        return <AppLoading/>;
    } else {
        return (
            <View style={styles.container}>
                <View style={styles.logobox}>
                    <View style={styles.logo}>
                        <Text style={styles.tituloText}>
                            iFarm
                        </Text>
                        <Text style={styles.subtituloText}>
                            AGRICULTOR
                        </Text>
                    </View>
                </View>
                <View style={styles.login}>
                    <TextInput
                        placeholder="E-mail"
                        placeholderTextColor="#787878"
                        style={styles.input}/>
                    <TextInput
                        placeholder="Senha"
                        placeholderTextColor="#787878"
                        style={styles.input}/>
                    <TouchableOpacity
                        onPress={() => {}}
                        style={styles.button}>
                        <Text style={styles.buttonText}>ENTRAR</Text>
                    </TouchableOpacity>
                    <View style={styles.opcoes}>
                        <TouchableOpacity onPress={() => {}}>
                            <Text style={styles.esqueci}>Esqueci a senha</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {}}>
                            <Text style={styles.criar}>Criar nova conta</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={styles.montanhas}>
                    <View style={styles.montanha_1}/>
                    <View style={styles.montanha_3}/>
                    <View style={styles.sol}/>
                    <View style={styles.montanha_2}/>
                </View>
            </View>
        );
    }
}

Answer 1

If you are using VS Code and hover the mouse over the import path (./src/screens/login/login) it displays the full path, if not displaying the import is going the wrong way. Can’t say because you didn’t put the folder structure: