Page MenuHomePhabricator

[native] Fix CalendarInputBar
ClosedPublic

Authored by ashoat on May 31 2024, 7:43 AM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Jun 21, 6:32 PM
Unknown Object (File)
Sun, Jun 16, 3:32 AM
Unknown Object (File)
Sat, Jun 15, 11:38 PM
Unknown Object (File)
Sat, Jun 15, 10:44 PM
Unknown Object (File)
Sat, Jun 15, 9:20 PM
Unknown Object (File)
Sat, Jun 15, 7:06 PM
Unknown Object (File)
Wed, Jun 12, 5:54 PM
Unknown Object (File)
Mon, Jun 10, 9:08 AM
Subscribers

Details

Summary

CalendarInputBar was broken because the stack header was being rendered outside of KeyboardAvoidingView. This led to the wrong height being detected for the viewFrame inside of KeyboardAvoidingView, which resulted in CalendarInputBar not being moved high enough on the screen to be visible. (It was being rendered below the keyboard.)

This was first broken when we launched the navigation side drawer, since we needed to start rendering a header in Calendar so that there would be space for the "header left button" (the "hamburger" menu button for opening the navigation side drawer).

This diff solves the issue by wrapping the Calendar in a StackNavigator that contains only one route. This felt like overkill, but I wasn't able to get it to work by wrapping the Calendar screen directly (the header was still rendered outside) or by wrapping the component rendered by StackView (React Navigation requires that the children of Stack.Navigator are Stack.Screen).

Note that this diff transitions us from using KeyboardAvoidingView with behavior="position" to behavior="padding". I could deprecate the former, but have found that keeping our KeyboardAvoidingView aligned with upstream is a better strategy for being able to diff changes.

As a consequence of changing the behavior, I also needed to add height: 0 to CalendarInputButton when it's disabled. This makes the animation a little jarring, which I will address in the next diff.

Test Plan
  1. I added { borderColor: 'red', borderWidth: 2 } to KeyboardAvoidingView to see what it was wrapping and confirmed it now wraps the whole screen
  2. I logged the value of this.viewFrame in KeyboardAvoidingView to make sure it matched what we had in other places now (Chat and Profile)
  3. I played around on my local iOS simulator to confirm that the CalendarInputBar now appears above the keyboard

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

native/calendar/calendar-input-bar.react.js
35 ↗(On Diff #40806)

From the diff description:

As a consequence of changing the behavior, I also needed to add height: 0 to CalendarInputButton when it's disabled. This makes the animation a little jarring, which I will address in the next diff.

native/calendar/calendar.react.js
63 ↗(On Diff #40806)

Why is this needed?

native/calendar/calendar.react.js
63 ↗(On Diff #40806)

There's only one route right now, so it shouldn't matter. I can remove if if you'd like. It looks like this is included in the Profile navigator, which I initially modelled this navigator after. For Chat and RootNavigator, we set it for Android but not for iOS. Not sure why our approach is inconsistent.

More details about the param here.

Remove detachInactiveScreens={false}

This revision is now accepted and ready to land.Jun 4 2024, 12:59 AM
This revision was automatically updated to reflect the committed changes.