Bug

The sheet does not auto resize the content height when keyboard is opened for the first time. It works after that but does not work if you clear the app and open the sheet with TextInput (BottomSheetTextInput) as a content in it for the first time. Video attached below:

Environment info

Library	Version
@gorhom/bottom-sheet	“^4.3.0”
react-native	“^0.63.4”
react-native-reanimated	“^2.4.1”
react-native-gesture-handler	“~1.10.2”

Steps To Reproduce

1. Use the below provided BottomSheet as a standalone component.
2. Just use a Controlled TextInput as a children.
3. Focus the input, the keyboard wont resize the content height when its visible.

Describe what you expected to happen:

1. The content height should move up the keyboard height when its visible everytime not only after the first time

Reproducible sample code

BottomSheet.js component

import React, {useRef} from 'react';
import {BackHandler, useWindowDimensions} from 'react-native';
import {
  BottomSheetView,
  BottomSheetModal,
  BottomSheetBackdrop,
  useBottomSheetDynamicSnapPoints,
} from '@gorhom/bottom-sheet';
import {useSafeAreaInsets} from 'react-native-safe-area-context';

const BottomSheet = ({
  visible,
  setVisible = () => null,
  onDismiss = () => null,
  children = null,
  automaticallyAdjustHeight = false, // Prop 'key' with unique value as string needs to be passed to calculate the layout changes every time.
  backdropComponent = null,
  enableHandle = true,
  panToDismiss = true,
  responsive = true,
  snapPoints: _snapPoints = ['25%', '50%'],
  index = 1,
  modalStyle = {},
}) => {
  const bottomSheetRef = useRef(null);
  const {bottom: safeAreaBottom} = useSafeAreaInsets();

  const {window} = useWindowDimensions();

  const MAX_WIDTH = 600;
  const marginHorizontal =
    window.width > MAX_WIDTH ? (window.width - MAX_WIDTH) / 2 : 0;

  const snapPoints = automaticallyAdjustHeight
    ? ['CONTENT_HEIGHT']
    : _snapPoints;

  const {
    animatedHandleHeight,
    animatedSnapPoints,
    animatedContentHeight,
    handleContentLayout,
  } = useBottomSheetDynamicSnapPoints(snapPoints);

  React.useEffect(() => {
    if (visible) {
      bottomSheetRef.current?.present();
    } else {
      bottomSheetRef.current?.dismiss();
    }
  }, [visible]);

  const renderActualChildren = automaticallyAdjustHeight ? (
    <BottomSheetViewComponent
      handleContentLayout={handleContentLayout}
      key="actualChildren">
      {children}
    </BottomSheetViewComponent>
  ) : (
    children
  );

  const handleDismiss = React.useCallback(() => {
    setVisible(false);
    onDismiss?.();
  }, [onDismiss, setVisible]);

  const backPressed = React.useCallback(() => {
    setVisible(false);
    return true;
  }, [setVisible]);

  React.useEffect(() => {
    if (visible) {
      BackHandler.addEventListener('hardwareBackPress', backPressed);
    } else {
      BackHandler.removeEventListener('hardwareBackPress', backPressed);
    }
    return () => {
      BackHandler.removeEventListener('hardwareBackPress', backPressed);
    };
  }, [visible, backPressed]);

  return visible ? (
    <BottomSheetModal
      style={[
        {paddingBottom: safeAreaBottom},
        responsive ? {marginHorizontal} : {},
        modalStyle,
      ]}
      name="bottomsheet"
      ref={bottomSheetRef}
      enableHandlePanningGesture
      onDismiss={handleDismiss}
      enableContentPanningGesture={panToDismiss}
      keyboardBehavior="interactive"
      keyboardBlurBehavior="restore"
      backdropComponent={props => <Backdrop {...props} />}
      {...(automaticallyAdjustHeight ? {} : {index})}
      {...(backdropComponent !== null ? {backdropComponent} : {})}
      {...(!enableHandle ? {handleComponent: null} : {})}
      {...(automaticallyAdjustHeight
        ? {
            snapPoints: animatedSnapPoints,
            handleHeight: animatedHandleHeight,
            contentHeight: animatedContentHeight,
            key: `Modal${
              automaticallyAdjustHeight ? animatedContentHeight.value : ''
            }`,
          }
        : {snapPoints: _snapPoints})}>
      {renderActualChildren}
    </BottomSheetModal>
  ) : null;
};

function BottomSheetViewComponent({
  handleContentLayout = () => null,
  children = null,
}) {
  const {bottom: safeAreaBottom} = useSafeAreaInsets();

  return (
    <BottomSheetView
      onLayout={handleContentLayout}
      style={{
        paddingBottom: safeAreaBottom,
      }}>
      {children}
    </BottomSheetView>
  );
}

function Backdrop({...props}) {
  return (
    <BottomSheetBackdrop
      key="backdrop"
      {...props}
      pressBehavior={'close'}
      appearsOnIndex={0}
      disappearsOnIndex={-1}
    />
  );
}

export default BottomSheet;

Recording: https://user-images.githubusercontent.com/51436631/168493392-6f4a5f24-213d-49e9-828f-08aa94b0da0a.mp4