[native] Fix CalendarInputBar
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:
- I added { borderColor: 'red', borderWidth: 2 } to KeyboardAvoidingView to see what it was wrapping and confirmed it now wraps the whole screen
- I logged the value of this.viewFrame in KeyboardAvoidingView to make sure it matched what we had in other places now (Chat and Profile)
- I played around on my local iOS simulator to confirm that the CalendarInputBar now appears above the keyboard
Reviewers: inka, tomek
Reviewed By: inka
Subscribers: tomek
Differential Revision: https://phab.comm.dev/D12256