Scroll Lab

 Scroll HW Part I (total 25 points)

For this lab you will be using the starter code available in this snack. https://snack.expo.io/@professorxii/scroll-lab-snack-part1. We strongly recommend that you don't code in snacks. 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 everything in the image below. Just focus on the user stories that have been outlined. This lab is part 1 of a two part lab. You will only be implementing Pending Carousel section in this lab.

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 implementation of the 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 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. (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: https://github.com/archriss/react-native-snap-carousel  


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



 

Complete and Continue