Image Handling in React Native

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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

WeGym Rally X review: Adding smarts to resistance bands

Quick Tip — How to find the difference between two numbers

Learn JavaScript DOM Basics by Building a Simple Clicker Game

Exploring Reduce in JavaScript

My Experience as Web Development Intern For LetsGrowMore

Is Deno Meant to Replace NodeJS?

Kilikya Palace Goynuk

Why do you expect Native reactions for your mobile app?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
TRINADH KOYA

TRINADH KOYA

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

More from Medium

React Dedicated! Design Pattern

MVVM Pattern In React

React Native Git Usage

Never use Enzyme to test React Native apps