Custom Components

Components

A reusable independent, reusable pieces, and think about each piece in isolation.

ClubCard

• A short card that displays the logo of the organization, name, and categories.
• Pressing on the card would display a modal with more information about the organization.
• The modal displays the name, logo, website, description, and categories.

DateModal

• Displays the default day of the week, day, and year
• The client clicks on the date, a modal that allows the client to set the date.

EventCard

• The card displays the title, thumbnail, and categories.
• The component also includes a modal where if the client were to press on the card a modal would appear displaying more information about the particular event.

MainButton

• Due to React Native's Button is insanely limited in terms of functionality and customization. We had to come up with our own button that uses TouchableOpacity. This component has a function called "debounceCheck" to prevent the client from pressing the button more than once which could cause unintended behaviors.

SubscribedCard

• This component should be usually used within the Feed's Screen.
• Displays the user a subscribed event with the title, theme, and perks.
• onPress invokes a modal for more information; allows the user to unsubscribe from the event.

TextLabel

• A custom text input that contains a label on the top left of the TextInput.
• Has the same properties as React Native's props for TextInput.

Screens

They are still technically React components but are used similarly to a webpage. These components usually in-house components that are mentioned above.

App

• The root component of the application that contains the React Navigation's Stack.
• No component should be initialized here, but new Stack screens for React Navigation.

Clubs

• A vertical scroll that lists all the created organization.
• Includes a search query by organizations.

CreateEvent

• A component that contains forms to create a new event.
• Forms include Title, Organization, Theme, Perks, StartDate, EndDate, and Description.

Events

• A horizontal scroll that lists all the created organization.
• Includes a search query by event's name and create event button for organization admins.

Feed

• A vertical scroll that lists all the created events.
• Displays the client's Subscribed events.

Home

• The component that contains the sign and signup button.
• The first screen that appears when the client opens the application.

Login

• Contains the form for the client to login in; Email, Password & Forget Password.

Navigation

• The navigation stack when the client is logged in.
• This is a nested Navigation stack for Feed, Events, Clubs, and Profile.

Profile

• Contains a group of buttons that allow the client to edit their profile and display their information.

SignUp

• Contains the forms for the client to sign in; Name, Email, and Password

UserSettings

• Contains forms to allow the client to change their information.