Photo Gallery

    In this exercise, we'll render a grid of photos from Picsum Photos in an infinitely-scrolling FlatList.

    The finished app

    Project set up

    Start by initializing a new project. You can use either approach described in the Environment section. If you're using Expo (recommended for beginners), run:

    expo init PhotoGallery --template blank
    

    Project Structure

    In this app, we'll follow the suggested structure from the Project Structure section, and divide our files into 3 directories:

    • api - for fetching remote data
    • components - presentational components
    • reducers - for managing app data with useReducer

    The final directory structure will look like this:

    PhotoGallery
    ├── api
    │   └── picsum.js
    ├── components
    │   └── PhotoGrid.js
    ├── reducers
    │   └── photos.js
    └── App.js

    Walkthrough

    Here's a step-by-step walkthrough to build this app.

    Possible improvements

    If you'd like to continue further with this exercise, here are a few ideas:

    • Use the PixelRatio API to detect the pixel density of the device (e.g. 3), and fetch higher resolution images if needed. We should also ensure our Images align with pixels, since otherwise the edges may look blurry or have small lines between them.
    • Persist the fetched list of images across app launches with AsyncStorage.
    • Use react-navigation to add a "details" screen that appears when tapping a photo - the list API that we're using already returns some photo metadata that you could display.
    • Handle errors more gracefully. Retry failed requests a few times, and also show a separate error component if the first page of photos loads but a subsequent one fails.
    • Consider a more sophisticated approach for data fetching to avoid the somewhat complex interactions between useEffect and useCallback. This will only get more complex as our app grows. Ideally, we could wrap our API calls with React's Suspense feature, e.g. by using https://resthooks.io/.

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.