Question 303923 in React native Question posted in
The official React Native documentation can be found here.

React native – When importing screens, an error occurs: "screens/xxx could not be found within the project or in these directories"

I am developing an ios app using React Native.
When importing the screen, the following error occurred.
How can I solve it?

Error: Unable to resolve module screens/Top from
/Users/xxx/workspace/sampleApp/App.tsx: screens/Welcome could not be
found within the project or in these directories: node_modules
../../node_modules

The folder structure is as follows.

  • src
    • screens
      • Top.tsx
  • App.tsx
  • tsconfig.json
  • babel.config.js

tsconfig.json

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["src/*"],
      "tests": ["tests/*"],
      "@components/*": ["src/components/*"],
    },
  }
}

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          tests: ['./tests/'],
          '@components': './src/components',
        },
      },
    ],
  ],
};

package.json

{
  "name": "sampleApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-firebase/app": "^18.7.2",
    "@tsconfig/react-native": "^3.0.2",
    "react": "18.2.0",
    "react-native": "0.73.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "^0.73.18",
    "@react-native/eslint-config": "^0.73.1",
    "@react-native/metro-config": "^0.73.2",
    "@react-native/typescript-config": "^0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-plugin-module-resolver": "^5.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "metro-react-native-babel-preset": "^0.77.0",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

App.tsx

import React from 'react';
import {SafeAreaView} from 'react-native';
import Top from 'screens/Top';

function App(): React.JSX.Element {
  return (
    <SafeAreaView>
      <Top />
    </SafeAreaView>
  );
}

export default App;

Top.tsx

import React from 'react';
import {ScrollView, Text} from 'react-native/types';

function Top(): React.JSX.Element {
  return (
    <ScrollView>
      <Text>Test</Text>
    </ScrollView>
  );
}

export default Top;
Tags:

2

Answers


  1. 0

    use react navigation to make screen the things that you made is component, not screen.

    https://reactnavigation.org/

    Login or Signup to reply.
  2. 0

    You should install, react navigation and follow the documentation:

    https://reactnavigation.org/

    basically, you should’ve a file with the named Routes for example, inside this file you should create a stack navigation for example:

    import { createStackNavigator } from '@react-navigation/stack';
import {
 Top
} from '../screens';

const Stack = createStackNavigator();

export default function AppRoutes() {
  return (
    <View style={{ flex: 1 }}>
      <Stack.Navigator
        initialRouteName="Top"
        screenOptions={{ headerShown: false }}
      >
        <Stack.Screen name="Top" component={Top} />
      </Stack.Navigator>
    </View>
  );
}

    and in your App.tsx

    import React from 'react';
import {SafeAreaView} from 'react-native';
import AppRoutes from 'routes/index.tsx';

function App(): React.JSX.Element {
  return (
    <SafeAreaView>
      <AppRoutes />
    </SafeAreaView>
  );
}

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search