Controlling Image Display

So far, the examples in this book haven’t rendered any images on mobile screens. This doesn’t reflect the reality of mobile applications. Web applications display lots of images. If anything, native mobile applications rely on images even more than web applications because images are a powerful tool when you have a limited amount of space.

In this chapter, you’ll learn how to use the React Native Image component, starting with loading images from different sources. Then, you’ll learn how you can use the Image component to resize images, and how you can set placeholders for lazily loaded images. Finally, you’ll learn how to implement icons using the @expo/vector-icons package. These sections cover the most common use cases for using images and icons in apps.

We’ll cover the following topics in this chapter:

• Loading images
• Resizing images
• Lazy image loading
• Rendering icons
...

Technical requirements

You can find the code and image files for this chapter on GitHub at https://github.com/PacktPublishing/React-and-React-Native-5E/tree/main/Chapter27.

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

Resizing images

The width and height style properties of Image components determine the size of what’s rendered on the screen. For example, you’ll probably have to work with images at some point that have a larger resolution than you want to be displayed in your React Native application. Simply setting the width and height style properties on the Image is enough to properly scale the image.

Let’s look at some code that lets you dynamically adjust the dimensions of an image using controls:

export default function App() {
  const source = require("./assets/flux.png");
  const [width, setWidth] = useState(100);
  const [height, setHeight] = useState(100);
  return (
    <View style={styles.container}>
      <Image source={source} style={{ width, height }} />
      <Text>Width: {width}</Text>
      <Text>Height: {height}</Text>
      <Slider
        style={styles.slider}
        minimumValue={50}
        maximumValue...

Lazy image loading

Sometimes, you don’t necessarily want an image to load at the exact moment that it’s rendered; for example, you might be rendering something that’s not visible on the screen yet. Most of the time, it’s perfectly fine to fetch the image source from the network before it’s actually visible. But if you’re fine-tuning your application and discover that loading lots of images over the network causes performance issues, you can use the lazy loading strategy.

I think the more common use case in a mobile context is handling a scenario where you’ve rendered one or more images where they’re visible, but the network is slow to respond. In this case, you will probably want to render a placeholder image so that the user sees something right away, rather than an empty space. So, let’s get started.

Firstly, you can implement an abstraction that wraps the actual image that you want to show once it’s loaded...

Rendering icons

In the final section of this chapter, you’ll learn how to render icons in React Native components. Using icons to indicate meaning makes web applications more usable. So, why should native mobile applications be any different?

We’ll use the @expo/vector-icons package to pull various vector font packages into your React Native app. This package is already part of the Expo project that we’re using as the base of the app, and now, you can import Icon components and render them. Let’s implement an example that renders several FontAwesome icons based on a selected icon category:

export default function RenderingIcons() {
  const [selected, setSelected] = useState<IconsType>("web_app_icons");
  const [listSource, setListSource] = useState<IconName[]>([]);
  const categories = Object.keys(iconNames);
  function updateListSource(selected: IconsType) {
    const listSource = iconNames[selected] as any;
    setListSource...

Summary

In this chapter, we learned about handling images in our React Native applications. Images in a native application are just as important in a native mobile context as they are in a web context: they improve the user experience.

We learned about the different approaches to loading images, as well as how to resize them. We also learned how to implement a lazy image, which displays a placeholder image while the actual image is loading. Finally, we learned how to use icons in a React Native app. These skills will help you manage images and make your app more informative.

In the next chapter, we’ll learn about local storage in React Native, which is handy when our app goes offline.