Expo

Documentation

Adding an image

Let's imagine that our designer has provided us with a beautiful logo:


Save this image to the assets directory inside of your project and call it logo.png.
💡 An "asset" is any file that your project uses that is not code. Images, videos, sounds, and fonts are all considered to be assets.

We have displayed text using the Text component from React Native, and we can display the image using the Image component.
import React from 'react';
import { Image,  StyleSheet, Text, View } from 'react-native';
import logo from './assets/logo.png'; 

export default function App() {
  return (
    <View style={styles.container}>
      <Image source={logo} style={{ width: 305, height: 159 }} /> 

      <Text style={{color: '#888', fontSize: 18}}> 
        To share a photo from your phone with a friend, just press the button below!
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
📏 What units are width and height in? A useful simplification is to treat the units for numbers in styles as pixels. If your screen resolution is 640x480, then an image that is 320x240 will be half of the width and height. On the web, React Native's width: 305 is directly translated to 305px. Learn more about pixels, if you're curious.

Sometimes you will want to load images from the web rather than from your project directory. We can replace the logo source for the image with something of the format { uri: 'http://path-to-your-image' }:
import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Image source={{ uri: "https://i.imgur.com/TkIrScD.png" }} style={{ width: 305, height: 159 }} />
    
      <Text style={{color: '#888', fontSize: 18}}> 
        To share a photo from your phone with a friend, just press the button below!
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

🤔 What's a URI? Is that like a URL? Yes, you can use the terms interchangeably. Technically there are some subtle differences in meaning, but this typically won't matter for your usage with Expo. Documentation will tell you whether to use uri or url.

Let's organize our code a bit by moving our styles into one place so our code is easier to read:
import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Image source={{ uri: "https://i.imgur.com/TkIrScD.png" }} style={styles.logo} />

      <Text style={styles.instructions} >
        To share a photo from your phone with a friend, just press the button below!
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  logo: {
    width: 305,
    height: 159,
    marginBottom: 10,
  },
  instructions: {
    color: '#888',
    fontSize: 18,
    marginHorizontal: 15,
  }, 
});

You might notice that we also added some new styles here to make things look a bit prettier. We used marginBottom on the logo to space things out between the logo and the instructions, and we added marginHorizontal to give our instructions some spacing around the edges of the screen.
Time to make things interactive. Let's move on to creating a button.