Using relative paths with react-native

user_10382684 0
Viewed 7649

I am trying to import Module using relative path in react-native , my project structure is like this :

-Project
--Components
--- adapter.js
--src
---screen
----Main.js
--App.js

I want to use adapter.js in my Main.js , so in the Main.js i use : import adapter from '/../Components/adapter'

this will throw the following error :

Module not found: Can't resolve '/../Components/adapter' in 'E:\reactjs\learn\Project\src\screens'

react-native javascript
3 Answers

You can use https://github.com/tleunen/babel-plugin-module-resolver, it's a good module to have alias with import.

You have to specify a babel.config.js in React Native and a configuration:

  module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          components: './src/components',
          _main: './src/components/_main',
          screens: './src/screens',
          config: './src/config',
          navigations: './src/navigations',
          utils: './src/utils',
          actions: './src/state/actions',
          constants: './src/state/constants',
          contexts: './src/state/contexts',
          reducers: './src/state/reducers',
          assets: './src/assets/',
          hooks: './src/hooks',
          data: './src/data',
        },
      },
    ],
  ],
};

And after, you can import your module like this :

import HomeFeed from 'components/Home';
user_97298940

Note: that VSCode will detect the import

You need to add a tsconfig.js file

The next line

"baseUrl": "src"
user_91614780

Since your file Main.js is inside src/screen and adapter.js is inside Components, you need to go two levels down from Main.js to get out of screen, src and then enter Components.

You will end up with something like ../../Components/adapter.

user_71795720
Related