PhotosScreen: Show an Alert

Exercise

Setup

Starting point: https://github.com/andrekovac/react-native-workshop/tree/09-react-fetch-and-display-images-with-async-await

In fact: Clone the PhotoFavorite repository and checkout the 01-c-fetch-images-async-await branch via git switch 01-c-fetch-images-async-await

Task

Show an Alert to the user when an image in the list is tapped. The Alert contains the title Artist and displays the property author of the image JSON response.

1. Inside the Item component, wrap the Image in a TouchableOpacity.

2. In the onPress prop of the TouchableOpacity implement a callback function which opens an Alert.

   Use the following code for an Alert:

   Alert.alert("Artist", author, [{ text: "OK" }], { cancelable: false });

Don't forget to import the Alert Component.

3. Pass the author prop from the PhotoList component to the Item component.

Extra

• Take a look at the following diff: https://github.com/andrekovac/PhotoFavorite/commit/d2e37ef989f14dde181adc43472885aaaea5dee6
• It adds a commit ot the solution where a handlePress function is defined. Observe how it is passed to the onPress prop.
• Why would it not work to add handlePress to onPress as onPress={handlePress}. What would the first argument of the handlePress callback implicitly be?

Solution

Solution file: https://github.com/andrekovac/PhotoFavorite/blob/01-d-show-alert-on-press/src/screens/PhotosScreen.tsx

Solution diff: https://github.com/andrekovac/PhotoFavorite/commit/ab60427e946a5ec45767ae19caa71e71cf3e9b7c

Solution branch: https://github.com/andrekovac/PhotoFavorite/tree/01-d-show-alert-on-press