React Native: Unable to resolve module. None of these file exist:

Question

I am a beginner in React Native so I apologize if this is a noob question. I am trying to learn using this react navigation article and this about react login example. The first article places all the code in App.js while the second one has code in separate pages but is slightly outdated. So my plan was to integrate both examples, using the first article's code but in separate pages instead of putting everything in App.js.

My project structure

The error I got:

None of these files exist:
  * Screen\drawerScreens\settingsScreen(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * Screen\drawerScreens\settingsScreen\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
   6 |
   7 | import HomeScreen from './Screen/drawerScreens/HomeScreen';
>  8 | import SettingsScreen from './Screen/drawerScreens/settingsScreen';
     |                             ^

Some help and tips would be greatly appreciated. Please let me know if more information is required. Thanks in advance.

score 3 · Accepted Answer · answered Jan 11 '22 at 05:43

3

From your project structure, I could see S is caps in SettingsScreen but you have imported as settingsScreen instead of SettingsScreen

so try importing as

import SettingsScreen from './Screen/drawerScreens/SettingsScreen';

answered Jan 11 '22 at 05:43

Vignesh Sundaramoorthy

1,827
1
25
38

As embarrassing it is to admit this, but yes that seemed to fix the issue. Thanks a lot! – btzy Jan 11 '22 at 06:05
Cool, It happens to me also sometimes – Vignesh Sundaramoorthy Jan 11 '22 at 06:11

score 3 · Answer 2 · answered Jul 15 '22 at 13:35

3

The solution for me was reset the react-native cache with the command.

react-native start --reset-cache

answered Jul 15 '22 at 13:35

Juanma Menendez

17,253
7
59
56

score 1 · Answer 3 · answered Apr 24 '22 at 04:46

1

Check if it is exported as default or export const, if it is the 2nd one, then use import { SettingsScreen } instead of import SettingsScreen

answered Apr 24 '22 at 04:46

Dhaval Javia

103
1
7

score 0 · Answer 4 · answered Jan 11 '22 at 05:32

0

Have you tried adding the file extension ?

Ex. './Screen/drawerScreens/settingsScreen.js'

answered Jan 11 '22 at 05:32

Hiromasa

51
1
3

Hi, yes I've tried adding the file extensions but sadly it didn't work. Thanks for trying though. – btzy Jan 11 '22 at 05:36

score 0 · Answer 5 · answered Apr 24 '22 at 04:29

0

In my case, it was because I copied and dropped the file from Finder (mac). It added an extra space to the end of that folder name. Erase that space worked.

answered Apr 24 '22 at 04:29

peanutz

346
3
6

score 0 · Answer 6 · edited May 14 '23 at 19:05

0

The name of the file you are trying to import must start with a capital letter.

If your filename is "settings.js", React will not detect it.

Change the filename to "Settings.js".

I think this is because its a React rule that all components name must start with a capital letter.

edited May 14 '23 at 19:05

starball

20,030
7
43
238

answered May 14 '23 at 17:07

Sharyar Anwer

13
3

score 0 · Answer 7 · answered Jul 04 '23 at 07:38

0

Not sure if related but i had similar issue by default i'm offered import as

'src/Button.tsx'

but i need to change this manually to

'../../Button.tsx'

answered Jul 04 '23 at 07:38

Marius

1,664
2
16
28

React Native: Unable to resolve module. None of these file exist:

7 Answers7