[v4] BottomSheet is overlapping the Content

[johnylawrence1987]

Bug

BottomSheet is overlapping the Content when BottomSheetTextInput onChangeText event update the variable state, basically when I write something in the input the view slides down which is weird, and only happens if I do change the variable state, which I believe causes the render which provokes this overlapping?

Anyone faced similar issue?

Video

https://user-images.githubusercontent.com/59499668/169482034-389f83c3-0c52-4b2c-8329-ee7565244e31.mp4

Environment info

"react-native": "~0.63.4", "react-native-reanimated": "^2.3.1", "@gorhom/bottom-sheet": "^4.1.5" "react-native-gesture-handler": "2.3.2",

Steps To Reproduce

1. BottomSheetTextInput OnChangeText updating the variable state (useState) is causing re-rendering and keyboard overlap

Describe what you expected to happen:

1. BottomSheetTextInput OnChangeText should update state (useState) without rendering/affecting the keyboard

Reproducible sample code

 <BottomSheet
      backdropComponent={props => (
        <BottomSheetBackdrop
          {...props}
          appearsOnIndex={0}
          disappearsOnIndex={-1}
        />
      )}
      style={styles.modalContainer}
      backgroundStyle={styles.modal}
      enablePanDownToClose
      handleComponent={customHandle}
      keyboardBehavior="interactive"
      index={-1}
      ref={bottomSheetRef}
      snapPoints={snapPoints}
      onClose={onClose}>
           <BottomSheetTextInput
                    ref={textInputRef}
                    multiline={false}
                    onChangeText={(val:string)=>{
                      setPozPledge(val)
                      }
                    onFocus={() => {
                      setPozPledge(0);
                    }}
                    placeholderTextColor={Colors.DARK_PURPLE}
                    keyboardType={'number-pad'}
                    placeholder={t('pozzlePledgeSheet.custom')}
                    style={[
                      styles.pozText,
                      styles.customPozText,
                    ]}></BottomSheetTextInput>
    </BottomSheet>

AndroidManifest.xml android:windowSoftInputMode="adjustResize"

[hotaryuzaki]

i think it happened because the screen was rerender, maybe you should change the logic. are you using component for the bottomsheet in parent screen?