Image Handling in React Native

Handling Static Images

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. ‘Ve seen most of the people doing the below approach. This is wrong way of doing.

<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

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

How do we access them shown below,

import Images from '../_theme/Images';
<Image source={Images.emptyCart}
       resizeMethod="contain"
       style={{height:200}} />