Android styling and products bug fixes

[wangannie]

What's new in this PR

• Fixed styling inconsistencies on Android which resolves Styling bugs and inconsistencies on Android #66 including:
  • Fixed font inconsistencies(some buttons and text fields would switch to Roboto)
  • Fixed drop shadows (wouldn't show on Android)
• Fixed various Android-specific bugs like how the rewards button on the map screen was getting covered by the bottom sheet.
• Fixed Android-specific bugs with unresponsive touch gestures on the bottom sheet which resolves Can't navigate to Products List or Product Details on Android #77 so that:
  • Buttons linking to Products List and Product Details should work now
  • Horizontal scroll in products should work

FYI: Some gesture-related components must be imported from react-native-gesture-handler instead of react-native for them to work on Android. This fixed FlatList scrolling issues, but in some cases like for TouchableOpacity, react-native-gesture-handler worked for Android but wouldn't work for iOS.

Relevant Links

Online sources

Styling:
Basically, I realized you can't use a custom font-weight or Android will get confused and resort to the system default. Also, regular shadows don't work on Android and you have to use elevation values.
react-navigation/react-navigation#2822

Touch gesture bugs:
osdnk/react-native-reanimated-bottom-sheet#16
osdnk/react-native-reanimated-bottom-sheet#19
osdnk/react-native-reanimated-bottom-sheet#20

Related PRs

How to review

To test without running the repo locally: https://exp.host/@wangannie/healthycorners

• Test on Android and see if it matches iOS/Figma.
• Look out for spots where it pulls the system default font.
• See if the map is jittery on a real Android device. I suspect it's just an issue with the simulator right now, and I couldn't find any particular issues with our MapView setup.

Next steps

• Figure out drop shadow for the bottom sheet. We achieved this using an offset box-shadow on the bottom sheet content container, but since Android seems limited to elevation and doesn't allow for offsets, I couldn't figure out a workaround.

Tests Performed, Edge Cases

Screenshots

• Fixed fonts in drawer:

• Added shadows and fixed hidden Rewards button issue
  

• Products bug fix
  https://www.loom.com/share/804797c171c04695b77ccf99a61bb546

[wangannie]

Honestly, I don't understand why this has to be false for the buttons to be clickable. It seems super counterintuitive but it finally worked.

[aceschen]

For Android:

• Font inconsistencies are fixed (all Poppins)
• Rewards banner visible
• Map is still sometimes jittery when viewing a lot of location markers, snaps back to true north if rotated
• Product list and detail buttons work, bottom line of list gets cut off
• Horizontal scroll in products works
• Search bar text in subhead, should be body
• Drop shadows for hamburger menu and search bar work on map screen, bottom drawer does not