I wrote a short code, basically copy paste of a tutorial, but for some reason when I try to use another js file, it gives me an error "None of these files exist" and a list of files.

I have includes a screenshort of the enite error

My code is just the basic structure of a React-Native app, using the blank tamplate, my only addon was the "import GoogleAuth from "./assets/code";" and ""

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

import React from 'react';

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

import GoogleAuth from "./assets/code";



export default function App() {

  return (

    <View style={styles.container}>

      <Text>Welcome to dogappcoolapp app</Text>

      <GoogleAuth/>



      <StatusBar style="auto" />

    </View>

  );

}



const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});

and this is is GoogleAuth.js

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

function GoogleAuth(props) {

    return (

        <div>

            <Button

            

                title ="sign up with google"



            />

        </div>

    );

}



export default GoogleAuth;

is , as you can see, the path seems correct so I don't know what can cause it, as in the tutorial I watched they did nothing difference (just with different names)

Why does it happen? I could not find any solution for it on gooogle, and I even went ahead and copy pasted a tutorial and got this error.