Points History and Rewards tab bar styling + Rewards navigation animations #46

wangannie · 2020-03-25T02:51:25Z

What's new in this PR

Overall, made Rewards and Point History look and feel smoother + various other cleanup.

Made a new CircleIcon component to standardize all the repeated circle icons throughout the app
Fully styled transaction cards in the points history screen and updated copy to match Figma
Updated transaction card content:
- Fixed date formatting
- Renamed the Airtable call to match the new column name 'Points Earned'
- Added sale total
Fixed up styling details in the tab view and cleaned up the Rewards heading bar
Rearranged drawer navigator so the Rewards page slides up as a modal to match the Figma prototypes
Made 'Points History' in the drawer correctly link to Points History (I think the way I did this was a bit jank so I'd really appreciate some more opinions 😅 )

Relevant Links

Online sources

The reasoning for adding RootStack with Rewards as a modal came from this.

https://stackoverflow.com/questions/44248403/passing-props-with-screen-option-in-drawernavigator

Sample modal interaction Expo Snack

Related PRs

Continuing to finalize and clean up details from #42 and #30

How to review

Nitpick my code! I wasn't really sure if it was a good idea to put CircleIconContainer in BaseComponents, but I didnt' want to have to make a another styled just for that... thoughts?
Look for styling details I might have missed
Click around and test the navigation interactions to see if anything breaks with the new RootStack

Next steps

Make different kinds of points history cards (not just transactions) to match the designs, including reward redeemed, reward unlocked etc.
Currently, if you switch to the 'My Rewards' tab from opening 'Points History' from the drawer, it will open back to 'My Rewards' if you hit 'Points History' from the drawer again. I decided not to worry about this now based on @anniero98 's recent findings about the updates coming with react-navigation v5.
Try to figure out how to smooth the transition closing Rewards after it's been opened from the drawer...it would be nice if it slid down but at the moment it just disappears.
Consider how we may be able to condense the new CircleIcon with NavButton from Navigation Button restyling + Misc. style fixes #42
Cool scrolling animation where 'Healthy Rewards' shrinks and centers upon scrolling :^)
Look into Section List for date dividers for points history

Tests Performed, Edge Cases

Tested on iPhone 11 Pro Max, and iPhone 8 and it the transactions cards, tab bars and heading seem to be responsive

Screenshots

Points History screen
Rewards heading with tab bar
Transaction cards
Full interaction:
https://www.loom.com/share/945e0d03cab24fcf817938a088cd6069

🥳Rewards finally slides upward!
CC: @anniero98 @wangannie

kennethlien · 2020-03-25T03:02:34Z

components/BaseComponents.js

+export const CircleIconContainer = styled.View`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 40px;
+  padding: 8px;
+  border-radius: 20px;
+  background-color: ${props => props.color || Colors.lighterGreen};
+`;
+
 export const ButtonContainer = styled.TouchableOpacity``;


style thing? i think a lot of our other stuff has the icon vertically centered so maybe we should change this to match that, but @12aschen should chime in

Not sure what you mean—vertically centered to what? Lines 29 & 30 should make it centered.

kennethlien · 2020-03-25T03:03:15Z

components/rewards/RewardsCard.js

+        <CircleIcon
+          icon="star"
+          iconColor={Colors.primaryGreen}
+          circleColor={Colors.lightest}
+        />


ty for the fix here, it was so jank before LOL

kennethlien

Just added a couple comments, looks very cool! B)

annieyro

Did not try on simulator because I've been working on refactor for awhile 😅 Small nits but code looks good!

annieyro · 2020-03-26T01:30:58Z

navigation/StackNavigators.js

@@ -31,18 +28,21 @@ StoresStack.navigationOptions = {
  drawerLabel: 'Stores'
 };

-export const RewardsStack = createStackNavigator(
+export const RootStack = createStackNavigator(


very cool !!

annieyro · 2020-03-26T01:32:02Z

screens/rewards/RewardsScreen.js

@@ -141,18 +144,17 @@ export default class RewardsScreen extends React.Component {
    return (
      <Container>
        <TopTab>
-          <BackButton onPress={() => this.props.navigation.navigate('Stores')}>
+          <BackButton onPress={() => this.props.navigation.goBack()}>


Does this work even if you access the Rewards screen by navigating there from the drawer?

Yep! I changed it to goBack because it would reload the entire map when I closed it from the drawer and that got really slow.

annieyro · 2020-03-26T01:33:24Z

components/rewards/RewardsHome.js

+        <Overline style={{ marginTop: 24, marginBottom: 12 }}>
+          Reward Progress
+        </Overline>
+        <Title style={{ marginBottom: 2 }}>


Nit: Figma has the first number in BigTitle 😅

I think Kenneth and I agreed on abandoning that when the alignment of 2 different line heights was getting really annoying 😶

wangannie added 13 commits March 24, 2020 12:49

Created new CircleIcon component

c967de1

Implemented new CircleIcon replacing existing circle icons

0b46b1d

Transaction card and points history styling

3ebf40f

Added total sale to transaction cards

810f535

Fixed points earned Airtable bug

6a9ccf2

Fixed text colors to match designs

4287a41

Rewards tab bar styling

d3aaf1e

Fixed 'Available' typo, cleaning up

67bfd2d

Cleaning up Top Tab heading styling

96dd276

Made RootStack to open Rewards as a modal

be8c4c4

Corrected capitalization of overlines

65ec165

Fixed 'Points History' from drawer

5ef6e6e

Fixed reload bug on closing rewards

1cd0aec

wangannie self-assigned this Mar 25, 2020

wangannie requested a review from kennethlien March 25, 2020 02:51

kennethlien reviewed Mar 25, 2020

View reviewed changes

wangannie requested review from annieyro and kennethlien March 25, 2020 05:55

kennethlien approved these changes Mar 26, 2020

View reviewed changes

annieyro reviewed Mar 26, 2020

View reviewed changes

annieyro mentioned this pull request Mar 26, 2020

Airtable refactor, bug fixes, Auth overhaul #48

Merged

wangannie merged commit 9f3b344 into master Mar 26, 2020

wangannie deleted the AnnieW/points_history_styling branch March 26, 2020 07:19

wangannie mentioned this pull request Mar 30, 2020

'Stores' from the hamburger drawer does nothing #60

Closed

wangannie mentioned this pull request Apr 8, 2020

Upgrade to React Navigation 5.0 #76

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Points History and Rewards tab bar styling + Rewards navigation animations #46

Points History and Rewards tab bar styling + Rewards navigation animations #46

wangannie commented Mar 25, 2020 •

edited

Loading

kennethlien Mar 25, 2020

wangannie Mar 26, 2020

kennethlien Mar 25, 2020

kennethlien left a comment

annieyro left a comment

annieyro Mar 26, 2020

annieyro Mar 26, 2020

wangannie Mar 26, 2020

annieyro Mar 26, 2020

wangannie Mar 26, 2020

Points History and Rewards tab bar styling + Rewards navigation animations #46

Points History and Rewards tab bar styling + Rewards navigation animations #46

Conversation

wangannie commented Mar 25, 2020 • edited Loading

What's new in this PR

Relevant Links

Online sources

Related PRs

How to review

Next steps

Tests Performed, Edge Cases

Screenshots

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kennethlien left a comment

Choose a reason for hiding this comment

annieyro left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wangannie commented Mar 25, 2020 •

edited

Loading