How to handle static images in React Native Projects 🤔

Always keep your images(.jpg or .png ) in one folder and give their path(resource path) to identify with the name and access them where ever you want. I have seen most of the people doing the below approach. This is the wrong way of doing it.

<Image source={require(‘../assets/images/someX.png’)}
       resizeMethod="contain"
       style={{height:200}} />

Instead, keep all of your images In one .js file like below. For my case, I created an Images .js file under the themes directory.

export default {
    emptyCart: require('../_images/EmptyCart.png'),
    emptySchedule: require('../_images/EmptySchedule.png'),
    emptyMenu: require('../_images/EmptyCart.png'),
};

import Images from '../_theme/Images';

<Image source={Images.emptyCart}
       resizeMethod="contain"
       style={{height:200}} />

TIP: when you are working with any third-party plugin, Better to keep a static/fixed version.

“react-native-img-cache”: “^1.5.3”, (Not recommended )
“react-native-img-cache”: “1.5.3”, (Recommended )