Scroll Lab

 Scroll HW Part I (total 25 points)

For this lab you will be using the starter code available in this snack. We strongly recommend that you don't code code in snack. Download the code by clicking the export button in the top right hand corner of the page.

Feel free to modify the invite card component structure. (link to design, link to sample JSON invitation cards):

Don't worry about implementing the everything in the image below. Just focus on the user stories that have been outlined.

1.1    Display a single Invitation Card (10 points)

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

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

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

Images can be found here 

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

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

The date-time should be in the following format <Day of Week> <Day> <Month> - <Time am/pm>

1.1.5    As a user I don't see the invitation section if there are no invitations. (2 points)

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

You will have have to manually test this by supplying an empty array.

1.2    Pending Carousel (15 Points)

In an ideal world, we would not have to accept or reject an invitation in order to see the next invitation. It would be great if we could look at all the invitations and then decide.

1.2.1    As a user I can swipe through a list of my pending invitations.

Feel to use npm or other open-source react-native packages to implement this.  

Here is one that you might find useful:  

You don't have to get the buttons or state working just yet. You will implement features that require state in the next lab.