Bug

BottomSheetTextInput that has multiline enabled, does not push bottom sheet up when focused and keyboard shows. If I remove the ability to have multiline enabled, it works as expected with no issue.

https://user-images.githubusercontent.com/36755092/115439911-b662d080-a1d4-11eb-96e7-8a5fad951076.mov

Environment info

Library	Version
@gorhom/bottom-sheet	“^3.6.3”
react-native	“0.63.4”
react-native-reanimated	“^2.0.0”
react-native-gesture-handler	“^1.9.0”

Steps To Reproduce

Setting up a simple implementation of the BottomSheetModal will show how it behaves.

1. Make one BottomSheetTextInput have multiline while the other does not.
2. Tap the one without multiline to see it function correctly.
3. Tap the one with multiline to see it does not slide up the bottom sheet.

Describe what you expected to happen:

1. Keyboard should push up the bottom sheet when using BottomSheetTextInput with multiline enabled.

Reproducible sample code

Note: This is inside a wrapper component that just has data/state management with a View with the style {{ flex: 1, justifyContent: 'center', alignItems: 'center' }}.

import React, { useContext, useMemo, useRef } from 'react';
import { StyleSheet, ScrollView, TouchableOpacity, Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useNavigation } from '@react-navigation/core';
import {
  BottomSheetModal,
  BottomSheetModalProvider,
  BottomSheetBackdrop,
  BottomSheetTextInput,
  BottomSheetScrollView,
} from '@gorhom/bottom-sheet';

import { Text } from '../components/common/Text';
import { View } from '../components/common/View';
import { Button } from '../components/common/Button';
import { ReorderIcon } from '../assets/svg/ReorderIcon';
import { ACTIVE_OPACITY } from '../constants';
import { localizedStrings } from '../localization/localizedStrings';
import { colors, globalStyles, SCREEN_HEIGHT, SCREEN_WIDTH } from '../styles/globalStyles';
import { GradientFooter } from '../components/common/GradientFooter';
import { HorizontalLine } from '../components/common/HorizontalLine';

export const ListScreen: React.FC<{}> = () => {
  const { top, bottom } = useSafeAreaInsets();
  const { goBack } = useNavigation();
  const buttonMargin = Platform.OS === 'ios' ? bottom - 8 : bottom + 16;

  const sheetRef = useRef<BottomSheetModal>(null);
  const snapPoints = useMemo(() => ['35%'], []);

  const handleShowPress = () => {
    sheetRef.current && sheetRef.current.present();
  };

  return (
  <>
      <ScrollView
        style={[styles.container, { paddingTop: top + globalStyles.standardPadding * 2 }]}
      >
        <View style={styles.header}>
          <TouchableOpacity
            // TODO re-order feature
            onPress={() => {}}
            activeOpacity={ACTIVE_OPACITY}
            style={styles.rightAlign}
          >
            <ReorderIcon />
          </TouchableOpacity>
          <View style={styles.center}>
            <View style={styles.button} marginVertical={globalStyles.screenPadding}>
              <Button
                fontSize={14}
                title={'+ Add to List'}
                onPress={handleShowPress}
              />
            </View>
          </View>
        </View>
      </ScrollView>
      <GradientFooter style={styles.center}>
        <TouchableOpacity
          hitSlop={{ left: 30, right: 30 }}
          activeOpacity={ACTIVE_OPACITY}
          onPress={goBack}
        >
          <Text fontSize={14} style={{ marginTop: buttonMargin }} fontFamily="americaBold">
            {localizedStrings.labels.back}
          </Text>
        </TouchableOpacity>
      </GradientFooter>
      <BottomSheetModalProvider>
        <BottomSheetModal
          ref={sheetRef}
          snapPoints={snapPoints}
          keyboardBehavior="interactive"
          keyboardBlurBehavior="restore"
          handleComponent={null}
          backdropComponent={BottomSheetBackdrop}
          style={{ ...globalStyles.shadow }}
        >
          <BottomSheetScrollView style={[styles.cardContent, { paddingBottom: bottom * 4 }]}>
            <BottomSheetTextInput
              placeholder="Add title"
              placeholderTextColor={colors.grey}
              style={styles.text}
              accessibilityComponentType
              accessibilityTraits
            />
            <HorizontalLine width={'100%'} />
            <BottomSheetTextInput
              placeholder="Add more details"
              placeholderTextColor={colors.grey}
              style={styles.text}
              multiline
              accessibilityComponentType
              accessibilityTraits
            />
          </BottomSheetScrollView>
        </BottomSheetModal>
      </BottomSheetModalProvider>
  </>
  );
};

const styles = StyleSheet.create({
  absolute: {
    position: 'absolute',
  },
  bottom: {
    ...globalStyles.shadow,
    paddingTop: globalStyles.standardPadding,
    padding: globalStyles.screenPadding,
  },
  button: {
    width: 170,
  },
  cardContent: {
    padding: globalStyles.screenPadding,
  },
  center: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  container: {
    flex: 1,
  },
  header: {
    paddingHorizontal: globalStyles.screenPadding,
  },
  image: {
    width: '100%',
    position: 'absolute',
  },
  rightAlign: {
    alignSelf: 'flex-end',
  },
  text: {
    paddingVertical: globalStyles.standardPadding * 2,
  },