In this exercise, we'll render a grid of photos from Picsum Photos in an infinitely-scrolling
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
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
The final directory structure will look like this:
PhotoGallery ├── api │ └── picsum.js ├── components │ └── PhotoGrid.js ├── reducers │ └── photos.js └── App.js
Here's a step-by-step walkthrough to build this app.
If you'd like to continue further with this exercise, here are a few ideas:
- Use the
PixelRatioAPI 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.
react-navigationto add a "details" screen that appears when tapping a photo - the
listAPI 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
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?