Listen to Keyboard events

[daltonle]

I was struggling using the provided BottomSheetTextInput because I have my own custom TextInput component, plus some other components (Autocomplete, etc.) that renders it. So it got very difficult to decide when to render the normal component vs BottomSheetTextInput.

I ended up writing my own BottomSheetContent wrapper that listens to the native Keyboard event, so now I can use my own text input.

export const BottomSheetModalContent = ({ children }: { children: React.ReactNode }): JSX.Element => {
  const [listeners, setListeners] = useState<EmitterSubscription[]>([]);
  const { shouldHandleKeyboardEvents } = useBottomSheetInternal();

  useEffect(() => {
    const updateKeyboardSpace = (): void => {
      shouldHandleKeyboardEvents.value = true;
    };
    const resetKeyboardSpace = (): void => {
      shouldHandleKeyboardEvents.value = false;
    };
    const updateListener = Platform.OS === 'android' ? 'keyboardDidShow' : 'keyboardWillShow';
    const resetListener = Platform.OS === 'android' ? 'keyboardDidHide' : 'keyboardWillHide';
    setListeners([
      Keyboard.addListener(updateListener, updateKeyboardSpace),
      Keyboard.addListener(resetListener, resetKeyboardSpace),
    ]);

    return () => {
      listeners.forEach((listener) => listener.remove());
    };
  }, []);

  return <>{children}</>;
};

Maybe this can be built in to the package?