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):
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.
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.