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