React-Native App: Unable to find ".js" files path - react-native

Question

React-native app can't find my ".js" files path and I'm not sure why. I try couple of ways, for example:
1- '../components/LoginScreen' 2- './LoginScreen' 3-
'./LoginScreen.js'
but same result.
Here is the error if someone can help me:
Looking for JS files in
C:\Users\<User>\reactnewapp
Loading dependency graph, done.
DELTA [android, dev] ..\..\../index.js ▓▓▓▓▓▓▓▓▓▓▓░░░░░ 70.6% (526/626)::ffff:127.0.0.1 - - [08/Jun/2019:16:39:15 +0000] "GET /index.delta?platform=android&dev=true&minify=false HTTP/1.1" 500 - "-" "okhttp/3.12.1"
error: bundling failed: Error: Unable to resolve module `./LoginScreen` from `C:\Users\<User>\reactnewapp\App.js`: The module `./LoginScreen` could not be found from `C:\Users\<User>\reactnewapp\App.js`. Indeed, none of these files exist:
* `C:\Users\<User>\reactnewapp\LoginScreen(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
Even when I put the './' it doesn't offer me a path.
App.js :
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';
import MainNavigator from './LoginScreen';
export default class App extends Component {
render() {
return (
<React.Fragment>
<MainNavigator/>
</React.Fragment>
);
}
}
Folders screenshots:

Answer 1

You are trying to import a file called "LoginScreen" located in the same folder. But your file is in the /components directory.
Change your import to:
import MainNavigator from './components/LoginScreen';
One dot is to indicate the current directory, which is what you want here. Two dots would be to indicate the parent directory.