I am using react-native to build an app. The app has 2 screens: HomeScreen and Search screen. The file explorer cant find the module for Search but the same path for HomeScreen is working. Also I am using android if it helps.

My App.js includes:

import React from 'react';
import type { Node } from 'react';
import { StatusBar } from 'react-native';


import Search from './src/screens/Search/index';

const App: () => Node = () => {

  return (
    <>
      <StatusBar barStyle='dark-content' />
      <Search />
    </>
  );
};


export default App;

Search/index.js includes

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


const Search = (props) => {
    return (
        <View>
            <Text>Hi</Text>
        </View>
    );
};

export default Search;

Error:

However if I replace Search by HomeScreen, the app works. Could you please help my figure out what I am doing wrong. I am using the same code and same directory search style in both my index.js files. However, I made HomeScreen/index.js before Search/index.js.

Here is my HomeScreen/index.js

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


import HomeMap from '../../components/HomeScreenMap';

const HomeScreen = (props) => {
    return (
        <View>
            <HomeMap />
        </View>
    );
};

export default HomeScreen;

Here is my directory:

MEDLIFE
>__tests__
>.vscode
>android
>ios
>node_modules
>src
  >components
  >screens
    >HomeScreen
      >index.js
    >Search
      >index.js
.buckconfig
.editorconfig
.eslintrc.js
.flowconfig
.gitattributes
.gitignore
.prettierrc.js
.watchmanconfig
App.js
app.json
babel.config.js
index.js
metro.config.js
package.json
yarn.lock