Import image from assets folder with root relative path, React Native Expo CLI project

Viewed 930

I have an React Native app created by Expo CLI (version 4.0.17).

I want to import Static Image Resources to app and follow this document: https://docs.expo.io/versions/v36.0.0/react-native/images/

But when the app larger, the path to import can be too long, like this:

import myImage from "../../../assets/images/myImage.jpg";

How to import by root relative path like this?

import myImage from "assets/images/myImage.jpg";

I try to config babel.config.js like this, but it's not working:

module.exports = function(api) {
  api.cache(true)
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          alias: {
            assets: "./assets",
          },
        },
      ],
    ],
  }
}

But I can import like this, and it's work:

import myImage from "static/images/myImage.jpg";

So what is static here, and it's safe to import like above? I can't find it in any document.

1 Answers

Yep, it's safe to import images like this. This will make your code look cleaner and easy to understand.

Related