Where to put images in a react-native project?

Question

I am working on a react-native project and we are putting images currently in /images/ folder. Is it a good path for them ? Is there any best practice?

Answer 1

In image assets folder, create index.js file and put following:

    const images = {
        main_bg: require('./background.png'),
        main_logo: require('./auth/home_title.png'),
        ///you can add more many images like this here.
    };


module.exports = images;

When using the images, you can do like this:

import Images from '../../assets/index'; ...

Answer 2

To add a static image to your app, place it somewhere in your source code tree and reference it like this:

<Image source={require('./my-icon.png')} />

please see the below link for more explanation:

https://facebook.github.io/react-native/docs/images.html

Answer 3

You can add image folder to src(src/image/index.js). Image folder add index.js file create and add whole app image. In index.js file set

export const IMAGENAME = require('./icon.png'); 

When import image folder

import { IMAGENAME } from '../image';

Use image:

<Image source={ IMAGENAME } />

You can add image to image folder and set path to index file. Hope this will help you.