ashenafee/stg

A high fidelity prototype made for the "See The Good" project for CSC318 at the University of Toronto.

See The Good

A high fidelity prototype made for the "See The Good" project for CSC318 at the University of Toronto.

See the Figma design mockup here.

Contributing

Setup

Step 1: Installing Dependencies

Make sure you have a recent version of Node.js installed. The most recent LTS version can be downloaded here.

Then run the following command in the root directory to install all dependencies:

npm install

Step 2: Running the App

Run the following command to start a development server:

npx expo start

Next, install the Expo Go app on your device, available on both the Android Play Store and the iOS App Store.

Then, to see the app running on:

• iOS

  Use the device's camera app to scan the generated QR code.

• Android

  Scan the generated QR code through the Expo Go app.

Alternatively, you can open the app on emulators. See here for more information on connecting an Android emulator or an iOS simulator, and here for more information on developing with Expo CLI.

Development Guidlines

Styling Units

Something to keep in mind is that the Figma mockup will have a different screen aspect ratio than actual devices. Specifically, most devices will not have the same amount of vertical space to work with. We want to place and size elements on the screen such that the overall proportions look the same, in order to preserve the app visuals across multiple devices.

When choosing what unit to use for styling, consider the following, in order:

1. percentages (%)

   Whenever possible, place elements such that they are the correct percentage of the way across/below the screen. i.e. an element whose top is 20rem below the top of a 40rem tall screen should have top: 50%. The Figma frame is 20.5625rem x 42.75rem.

   Place items using the "outer" edges where possible. That is, for an element in the top left corner of the screen, use the top and left properties (if using position: absolute), so that as screen size increases, the item stays in the top left.

2. rem

   With EStyleSheet, we are able to globally define a rem unit that will scale with different screen sizes.

3. px

   Use this extremely sparingly, as it will not scale at all. Keep in mind that a React Native pixel is not the same size as a physical pixel (see here).

General Tips

• Don't be afraid to use position: absolute to hard-code element placement
• Use flex
• Type-hint functions as much as possible
• Be careful of side-effects of using async functions. For example, a Promise is truthy while is it unresolved.

stg's Issues

Sign-in navigation

Goal

Sign-up/log-in should be prompted on app first start-up, but then not be visible until the user logs out (this should be an option in the profile screen).

Solution

Depending on some global "signed-in" state, choose which elements in the stack navigator to display. See here for more detail. "Stay logged in" can be achieved with async-storage.

Home

Goal

Create home screen.

Solution

Donation Centres should be rendered using a "database" JSON listing individual centres, completion goals. This will be used as the backend for future pages (e.g. map view, etc.)

Tasks

• Rehaul bottom tab navigation
• Create Donation Centre card
• Create general layout
• Finish Donation Centre tabs and scroll view

Demo Page

Goal

Create the demo page reachable from the landing page.

Solution

The scrolling carousel can be implemented using react-native-reanimated-carousel.

Tasks

• Carousel images
  • Image 1
  • Image 2
  • Image 3

Create abstract Button component

Goal

Currently, buttons are implemented as Pressables, since they can take View style props, which gives more flexibility than the basic Button component.

It is probable that the app will make heavy use of custom styled buttons, justifying a move to abstract the implementation into a Button component for more convenient development. A pattern has emerged where most of the buttons have content that need to be centered vertically, horizontally, or both. Having this functionality built into a component would be an improvement over having the necessary code repeated everywhere.

See this example:

STG/screens/WelcomeScreen.tsx

Lines 37 to 41 in 7e6d388

	<Pressable style={styles.logInContainer} onPress={() => navigation.navigate('LoginScreen')}>
	<View style={styles.textContainer}>
	<Text style={styles.logInText}>LOG IN</Text>
	</View>
	</Pressable>

...with the relevant styling needed for centering:

STG/screens/WelcomeScreen.tsx

Lines 83 to 87 in 7e6d388

	textContainer: {
	justifyContent: 'center', //Centered vertically
	alignItems: 'center', //Centered horizontally
	flex: 1,
	},

Solution

Create a new Button component that provides the functionality to center content horizontally or vertically, via a prop. Having some kind of shortform specification may be preferable to explicit individual vertical/horizontal centering props, but this is up for discussion.

All of the normal Pressable props should still be available on the Button component, and it should be able to take children in the same way the Pressable can.

Tasks

Title

Goal

Create the title/landing page users see on first startup of the app.

Solution

Tasks

[Roadmap] See The Good

Goal

This is the general roadmap for the See The Good app. See this Figma doc for design mockups.

Tasks

Navigation

• #2
• Tab navigation

Pages

• #8
• #10
• Log-in
• #13
• #15
  • #3
  • #4
• #25
• #23
• Profile

Sign-up

Camera

Goal

Create the camera screen and all attached functionality.

Solution

react-native-vision-camera provides a native camera component.

Tasks

Notifications

Activity

Map

Goal

Create the map screen, and all attached functionality.

Solution

react-native-maps provides a native map component.

Tasks