CODEWITHSUNDEEP
reactjstypescriptreact-nativeimport
Louis
Louis

Reputation: 371

React native : import from a distant directory (and got an error)

I put all my images in a folder at the root of my project and I'm using them in the code that I write. Howether there seems to be an error (ex : Cannot find module '../../../assets/Structure.png' or its corresponding type declarations because of: import structure from "../../../assets/Structure.png"; ). It still work when I do my yarn start but it seems to be a potential issue. Any idea of how to make it work without error? The issue seems to be with the '../'. My project is like this :

src --> pages --> page1 --> index.tsx

assets --> image.png

Upvotes: 0

Views: 258

Answers (1)

iphonic
iphonic

Reputation: 12719

The best practice is to create aliases to your folders which can be easily imported without any hassle.

Open babel.config.js situated in the root folder and add the following lines of settings

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      "module-resolver",
      {
        root: ["./src"],
        extensions: ['.js', '.jsx', '.json', '.svg', '.png', '.jpg','.tsx','.ts'],
        alias: {
          "assets":"./src/assets"
        }
      }
    ]
  ]
};

Now you can easily import any assets like

assets/Structure.png without using ../../../ it will make your life easier..

You should similarly set up aliases for other common folders.

Make sure to completely re-run the application..

Cheers.

Upvotes: 1

Related Questions