Why is importing not working in react native?

Question

I am trying to import my second file into App.js for my project. I am getting the error "The development server returned response error code: 500". Basically saying "Unable to resolve "MainFile" from "App.js".

Why is this happening? I believe it is correct but for some reason this bugfest saying that the file doesn't exist. First code is my App.js file and the second one is the code i am trying to import.

https://gyazo.com/6911c477f9c9e8149370571ca49a0b9f

https://gyazo.com/73f0079bc6a2640877bcc30fa1e609ec

import React from 'react';
import MainFile from './components/MainFile';


export default class App extends React.Component{
  render() {
    return(
      <MainFile />
    );
  }
}

---

import React from 'react';
import {StyleSheet, Text, View, TextInput, ScrollView, TouchableOpacity} from 'react-native';

export default class MainFile extends React.Component{
    render(){
        return(
            <View style={styles.container}>
                <Text>Testing</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {

    },
});

Answer 1

1. delete node_modules folder
2. edit package json : react-native version to "55.4" or "55.2" and babel-preset-react-native to "4.0.0" ( if your version is different try to use the latest one or downgrade it).
3. run npm install or yarn install command
4. you're done

Source : Github

Answer 2

1. Double check if file exist at given path or not
2. If file is not javascript(.js), then mention the extension
3. Try using double quote when referring to file ( e.g. "./src/..")
4. If file to import is not .js, then make sure appropriate react library is imported in first import E.g.( import {..., Image } from 'react-native' )