[RFC] Keyboard Handling

[gorhom]

Feature Request

Why it is needed

Keyboard handling is a bit trickier with bottom sheet internal animated variables, although #97 could resolve it for some cases, however it needs to be handled internally to not conflict with BottomSheet interactions.

Possible implementation

BottomSheet was inspired by the implementation of Apple Maps, so I would keep that as the main goal to achieve with this feature.

Untitled.mp4

Code sample

We could provide a pre-integrated overridable TextInput that will internally interacts with BottomSheet, so user won't need to handle anything else.

[f-ricci]

If you are considering some rework in that area. I found another issue regarding the keyboardavoidingview. If you use a backdrop and the keyboard pops up, then there is a flickering because you respond to layouts changes.

EDIT
Also, my case is different from the one showcased as my autocomplete is positioned from bottom to top like Whatapp's / Slack's mentions in the chat.

here is a code sample how I worked around the flickering

<BottomSheetModal
        ref={modalRef}
        snapPoints={snapPoints}
        index={0}
        backdropComponent={
          ({ animatedIndex, ...rest }) => (
            <BottomSheetBackdrop
              {...rest}
              animatedIndex={interpolate(animatedIndex, {
                inputRange: [0, 1],
                outputRange: [!hasReallyChanged ? 1 : 0, 1],
                extrapolate: Extrapolate.CLAMP,
              })}
            />
          )
        }
        onAnimate={(from, to) => {
          setHasReallyChanged(from !== to)
        }}

      >
        <TagsSheetContent clothId={selected.id} />
      </BottomSheetModal>