A high fidelity prototype made for the "See The Good" project for CSC318 at the University of Toronto.
See the Figma design mockup here.
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
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.
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:
-
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 a40rem
tall screen should havetop: 50%
. The Figma frame is20.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
andleft
properties (if usingposition: absolute
), so that as screen size increases, the item stays in the top left. -
rem
With
EStyleSheet
, we are able to globally define arem
unit that will scale with different screen sizes. -
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).
- 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.