Scroll Lab

 

Scroll lab (total 190 points)

For this lab, implement the following screen meeting these specs, here is a snack to start with: https://snack.expo.io/@professorxii/scrolllab-startcode Feel free to modify the invite card component structure. (link to design, link to sample JSON invitation cards):

1.1     Display a single Invitation Card (30 points)

You are required to implement a custom component for this section. Do not use any existing npm packages to implement your card.

1.1.1     As a user I am able to see a single pending invitation card. (5 points)

1.1.2     As a user I can see the avatar of a person who is inviting me to dinner. (5 points)

Images can be found here  https://www.cs.virginia.edu/~dgg6b/Mobile/ScrollLabJSON/Images/ 

1.1.3     As a user I can see the name of the person who is inviting me to dinner. (5 points)

1.1.4     As a user I can see the date and time of the dinner. (5 points)

The date-time should be in the following format < Month Name> –

1.1.5     As a user I only see the calendar section if there are no invitations. (10 points)

If there are no pending invitations, the invitation section should disappear.

1.2       List of pending invitations (5 Points)

Since only one invitation is visible at a time. We would like to be able to show the user a list of pending invitations.

1.2.1     As a user I can see a list of pending invitations. (5 points)

Fetch the JSON from the endpoint specified above, and display all the invitations as pending, since none of the invitations have a state. You will also reuse this JSON in the horizontal scroll view section.