Loading images

Let’s get started by figuring out how to load images. You can render the <Image> component and pass its properties just like any other React component. But this particular component needs image blob data to be of any use. A BLOB (short for Binary Large Object) is a data type used to store large, unstructured binary data. BLOBs are commonly used to store multimedia files like images, audio, and video.

Let’s look at some code:

const reactLogo = "https://reactnative.dev/docs/assets/favicon.png";
const relayLogo = require("./assets/relay.png");
export default function App() {
  return (
    <View style={styles.container}>
      <Image style={styles.image} source={{ uri: reactLogo }} />
      <Image style={styles.image} source={relayLogo} />
    </View>
  );
}

There are two ways to load the blob data into an <Image> component. The first approach loads the image data from the network. This is done by passing an object with a URI property to the source code. The second <Image> component in this example is using a local image file. It does this by calling require() and passing the result to the source code.

Now, let’s see what the rendered result looks like:

Figure 27.1: Image loading

Here’s the style that was used with these images:

  image: {
    width: 100,
    height: 100,
    margin: 20,
  },

Note that without the width and height style properties, images will not render. In the next section, you’ll learn how image resizing works when the width and height values are set.