# Rewards Screen
This guide explains the different components of Rewards.
# Relevant Files
If the user is logged in as a guest (
RewardsScreen will only display
If the user is logged into an account,
react-native-tab-view (API reference (opens new window)) for the tab navigation to display each component.
routes: an array containing a list of route objects used for rendering the tabs, including the
title (how it displays in the tab bar).
There are three routes:
- 'home' which renders
- 'history' which renders
- 'howitworks' which renders
The header uses the
NavheaderContainer base component (see Styling docs). Custom styling for the tab bar can be found in
# Rewards home
Rewards home (displays as 'Rewards' on the tab bar) shows:
- a progress bar (from
react-native-paper) displaying the customer's progress toward unlocking their next reward
- a list of available rewards --
RewardsCards based on how many rewards the customer has unlocked
- the list of stores participating in rewards using
Point and dollar values are pulled from
constants/Rewards.js. See the Updating Constants guide for a breakdown on what these values mean and how to edit them.
# Points history
PointsHistory displays the customer's transaction history and displays a card when the customer:
- makes a purchase
- unlocks a reward
- redeems a reward
Transaction cards are in
The designs for Points History include dividers by month, but that is not yet implemented.
# How it works
The How it Works section explains how the Rewards program works using illustrated graphics and text. This displays directly on
RewardsScreen for users in guest mode, and displays in a separate tab for users who are logged in.
This section also includes an FAQ section. Check out the guide on Updating FAQs
# Participating stores
ParticipatingStores displays the list of stores which accept rewards. Tapping the store name redirects to the map (just as tapping the store card in StoreListScreen does).