How to Load an Image Component in React Native

This dev tip is brought to you by the developer of MoneyPhone: Personal Expense Tracking for Android and iOS. Consistently spend less than you earn each month and get your finances under control when you start monitoring your expenses with MoneyPhone.

Greetings intrepid JavaScript developer(s)! Quick post here regarding how to load images in React Native. I personally have been following along with the official React Native Quickstart guide teaching myself React Native recently, and have found that some of the examples do not work when running the apps using the React Native CLI as opposed to running them using the Expo CLI. So, here’s a code snippet on how to load an image component in React Native =>

// NOTE: In the same directory as your App.js file,
// create a new folder called "assets", and place
// your image file (.jpg) in that directory.
import React, { Component } from 'react';
import { Text, View, Image } from 'react-native';
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View>
<Text>RENDER AN IMAGE...</Text>
<Image source={ require('./assets/supersweetimage.jpg') } />
</View>
);
}
}
export default App;
view raw App.js hosted with ❤ by GitHub
 

topherPedersen