Misc. styling cleanup, empty states, 'notch' adjustment, Android bug fixes

[wangannie]

What's new in this PR

Continuation from #45. Lots of scattered styling detail cleanup/finishing touches, empty states, and fixing Android issues.

• 99% sure I fixed the bug where 'Find a Store' and the hamburger icon would float off to the top right corner. Let me know if you catch this happening!
• Converted StoreList, StoreProducts, Rewards, and PointsHistory from ScrollViewto FlatList for performance enhancements with lazy loading and easy empty states.
• Built empty states for Products, StoreList, and PointsHistory.
• Converted NavHeaderContainer to a functional component to use detect safe area insets and adjust navigation heading heights depending on if the device has a notch.
• Converted all remaining 4% margins and paddings to 16px for consistency.
• Fixed spacing issues with icons and text on Store details.
• Implemented NavHeaderContainer in Rewards for consistency (it is now used on every nav header container)
• Reduced spacing in Login and Signup--temporary fix for smaller devices where the keyboard blocks these fields.
• Fixed an issue in MapView that is only raised on Android that would crash upon opening the map.
• Cleaned up Layout.js window width and height constants.
• Made 'Healthy Rewards not accepted' show for stores that don't accept rewards.
• Fixed white edge margin bugs noted from [1] Store and Products Screens styling #34

Relevant Links

Online sources

This helped me get rid of those unique key warnings: https://stackoverflow.com/questions/44545148/basic-flatlist-code-throws-warning-react-native

Related PRs

This is a continuation of #45. This handled most of the todos from #34.

How to review

• If possible, try this on different screen sizes and see if everything looks right--particularly on smaller devices.
• Look for things that look off or awkward.
• Read through my implementation of getting the SafeArea Insets. I tried a bunch of different methods/libraries and this is what ended up working. I'm not familiar with hooks, but I just knew I had to use them in a functional component, so I converted NavHeaderContainer into a functional component. I'm not sure that was a good decision/the cleanest way to do this and would appreciate feedback!

Next steps

• Style map markers
• Empty state for rewards cards (possibly switching that to a FlatList)
• Possibly switch Points History into a SectionList to get date dividers.
• (Migrated to Fix keyboard covering issues on Login and Signup #63) Replace the shrunken spacing on login/signup with keyboardAvoidingView or some other better-looking solution.
• Consider making an empty state component for consistency.
• Possibly link the 'find a store' empty state messages on Rewards to the map screen.
• (Migrated to Styling bugs and inconsistencies on Android #66) Fix all Android styling issues including:
  • System font for buttons and text fields
  • Drop shadows don't work
  • Figure out why the map does this on its own on Android
    https://www.loom.com/share/c58f93863e7e422490653db4f73adf91

Tests Performed, Edge Cases

• I tested everything on iPhone 11, iPhone 8, and Pixel 3XL with a notch and made sure everything looked normal.

Screenshots

iPhone 8, iPhone 11, Pixel 3XL (left to right)

• NavHeaderContainer adjusts top padding according to the notch!!
  

• Rewards & Points History: responsive nav heading & empty states
  

• Products empty state

• Stores list empty state

• Modified spacing on signup to accomodate keyboards on small devices

CC: @anniero98 @wangannie

[kennethlien]

Woah this is a really pretty PR. I can't run the android one but the empty states were a great add!

[thumn]

Looks good on iPhone 11! :- ) thank u for hard worker