by topherPedersen

How to Load an Image Component in React Native

This blog post is brought to you by the developer of BitBudget. BitBudget is an automated budgeting app for Android and iOS which syncs with your bank account and helps you avoid overspending. If you’d like to quit living paycheck-to-paycheck and get a better handle on your finances, download it today! https://bitbudget.io

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