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...