Where to put images in a react-native project? - react-native

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

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.

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://reactnative.dev/docs/images

Answer 3

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 4

first create file "ImagesAssets.js" in folder assets.
export const ImagesAssets = {
bannerList1: require('./silver.png'),
bannerList2: require('./gold.png'),
bannerList3: require('./dimound.png'),
bannerList4: require('./busniss.png'),
///you can add more many images like this here.
};
then import the object to "any page" and use it.
import{ ImagesAssets } from '../assets/ImagesAssets';
<View style={styles.itemsContiner}>
<View style={styles.item}>
<Image style={styles.imgBanner} source={ImagesAssets.bannerList1}/>
</View>
<View style={styles.item}>
<Image style={styles.imgBanner} source={ImagesAssets.bannerList2} />
</View>
</View>