DSW$02$B$1$ Graded Lab $2$

$\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_$

$\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_$

Page $2$ of $3$

QUESTION $1$ React Native $[50$ MARKS$]$

Tourist App for South Africa

Background: You are tasked with developing a comprehensive tourist app for South Africa.

The app will include features such as a user$-$friendly home screen, a detailed attractions list,

event details, and a user review section. The goal is to use various React Native components

and styling techniques to create a well$-$designed and functional interface. You need to be very

creative in your styling and find your own images. NB: This question requires that you to

apply their knowledge of various React Native components and styling techniques,

integrating them into a cohesive app interface. Additionally, you must prepare for a

technical review session after submissions.

Requirements:

$1.$ Home Screen $(15$ marks$)$

$$ Design a home screen using View, Text, Image, and Button

components.

$$ Include the following elements:

$$ A header with the app$$s logo and a title.

$$ A welcome message with a brief description of the app.

$$ Two buttons: one for navigating to the Attractions List and

another for the Events.

$$ Use StyleSheet.create to style the header, welcome message,

buttons, and overall layout.

$$ Provide the React Native code for this screen.

$2.$ Attractions List Screen $(15$ marks$)$

$$ Create a FlatList component to display a list of tourist attractions.

$$ Each item should include:

$$ An image of the attraction

$$ The attraction$$s name

$$ A brief description

$$ Implement a search bar at the top of the list to filter attractions by name.

$$ Use StyleSheet.create for styling the list items, search bar, and

overall layout.

$$ Provide the React Native code for this screen.

$3.$ Event Details Screen $(10$ marks$)$

$$ Implement a screen to show detailed information about a local event

using ScrollView.

$$ Include:

$$ Event title

$$ Date and time

$$ Location

$$ Detailed description

$$ A Button to add the event to a calendar

$$ Use StyleSheet.create to style each section of the event details and

ensure the layout is visually appealing.

$$ Provide the React Native code for this screen.

DSW$02$B$1$ Graded Lab $2$

$\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_$

$\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_$

Page $3$ of $3$

$4.$ User Reviews Section $(10$ marks$)$

$$ Develop a component to display user reviews using View, Text, Image,

and TouchableOpacity.

$$ Each review should include:

$$ User$$s profile picture

$$ User$$s name

$$ Rating $($represented as stars$)$

$$ Comment

$$ Implement a button to allow users to submit a new review.

$$ Use StyleSheet.create to style the reviews, profile pictures, and

submission button.

$$ Provide the React Native code for this component.

Additional Instructions:

$$ Ensure that all components are responsive and work well on different screen sizes.

$$ Implement navigation between screens using React Navigation.

$$ Include comments in your code to explain the functionality of each component.