Image Handling in React Native

Handling Static Images

TRINADH KOYA
1 min readNov 20, 2020

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}} />

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

TRINADH KOYA
TRINADH KOYA

Written by TRINADH KOYA

Python lover by passion, React Native Engineer by Profession. For sure, these are not the only ones I worked on 😉 .

No responses yet

Write a response