Task

Create a React Native component named InteractiveResortList that displays a list of resorts. In this list, showcase the names of all resorts. Next, incorporate functionality where clicking on a specific resort triggers an alert containing additional information about it.

The component should include the following elements:

• FlatList: Utilize the FlatList component to render the list of resorts;
• TouchableOpacity: Wrap each resort with TouchableOpacity to make it touchable;
• Text: Inside each TouchableOpacity, display the name of the resort using the Text component;
• Alert Functionality: Implement an onPress event for TouchableOpacity to trigger the handleItemPress function. The alert should display the resort's description.

We should see the following result after implementing those changes.

Repository with initial files and folders.

Start the project

To start the project, copy the initial files and data using the following command in the terminal.

Navigate to the newly created folder housing the project files using the command:

Afterward, install the required packages with:

To initiate the app and preview its initial appearance, execute the following command in the terminal:

Hint

• Utilize FlatList to render the list of resorts;
• Wrap each resort with TouchableOpacity to make it touchable;
• Implement an onPress event for TouchableOpacity to trigger thehandleItemPress function, passing the resort's description.

If you face any challenges while implementing the task, we suggest referring to the provided recording, which offers a step-by-step guide on navigating each aspect. Best of luck!

In Practice