[native] Fix android bottom navigation bar ovelapping with drawer content
ClosedPublic
Actions

Authored by inka on Jan 2 2023, 3:58 AM.

Details

Reviewers

tomek
bartek
ginsu

Commits

rCOMM7a5905cdb914: [native] Fix android bottom navigation bar ovelapping with drawer content

Summary

Linear issue: https://linear.app/comm/issue/ENG-2603/community-drawer-safeareaview
I was doing some additional testing on physical devices, and I noticed that the androids bottom navigation bar was covering some of the drawer content if the drawer content took up all drawer height. This fixes that, and here is what it looks like now with and without the bottom bar on android:

android_bottom_bar_2.jpg (2×1 px, 218 KB)

android_bottom_bar_4.png (2×1 px, 148 KB)

It has been decided in ENG-2343 that we don't want to use 'bottom' option of SafeAreaView for iOS devices, so iOS stayed the same.

Test Plan

Tested on two android physical devices, iOS simulator, iOS physical device. Checked that the drawer content doesn't overlap with androids navigation bar, and looks right when the bar is not present
(gestures enabled), and looks right on iOS.

Diff Detail

Repository

rCOMM Comm

Branch

inka/drawer_fix

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

inka created this revision.Jan 2 2023, 3:58 AM

Herald added subscribers: atul, ashoat. · View Herald TranscriptJan 2 2023, 3:58 AM

inka edited the summary of this revision. (Show Details)Jan 2 2023, 4:02 AM

inka attached a referenced file: F313336: android_bottom_bar_4.png. (Show Details)

inka attached a referenced file: F313335: android_bottom_bar_2.jpg. (Show Details)

Harbormaster completed remote builds in B15016: Diff 20493.Jan 2 2023, 4:13 AM

inka requested review of this revision.Jan 2 2023, 4:13 AM

tomek requested changes to this revision.Jan 2 2023, 4:23 AM

tomek added inline comments.

native/navigation/community-drawer-content.react.js
82–83 ↗	(On Diff #20493)	It might be a good idea to store it in a memo. Also, you can take a look at `Platform.select` method which can be used here.

This revision now requires changes to proceed.Jan 2 2023, 4:23 AM

Use useMemo, use Platform.select

tomek accepted this revision.Jan 2 2023, 5:28 AM

tomek added inline comments.

native/navigation/community-drawer-content.react.js
82–83 ↗	(On Diff #20493)	My initial idea about putting this in memo wasn't great. The value doesn't depend on props so it should be defined outside the component.