if I focus on input my keyboard cover up and I dont see my modal-CodePudding

Why my keyboard covers up my modal when I am focusing on my textinput ?

Code:

    <BottomSheetModal
      ref={ref}         
      index={1}
      snapPoints={snapPoints}
      handleIndicatorStyle={[s.handleStyle, s.handleColorWhite]}
      backdropComponent={BottomSheetBackdrop}
    >
      <KeyboardAwareScrollView keyboardShouldPersistTaps='handled' contentContainerStyle={{flexGrow: 1}}>
        <View style={s.centered}>
          <Text style={s.title}>Rabatt-Code</Text>
          <Text style={s.subtitle}>Füge ein Rabatt-Code für dein Produkt ein</Text>
          <Text style={s.stepText}>{`Schritt ${step}/3`}</Text>
        </View>

                <Text style={[s.text, s.bold]}>Nur Buchstaben & Zahlen!</Text>
                <View style={s.content}>
                  <View style={s.inputContainer}>
                    <Input
                      placeholder='Name (exp. Max50)'
                      value={coupon.name}
                      onChangeText={handleChangeName}
                      style={[InputStyles.full_icon]}
                      icon={<Ionicons name="md-newspaper-outline" size={24} style={s.icon} color="#333" />}
                    />
                  </View>
                  <View style={s.containerInner}>
                    <Pressable onPress={handleChangeStage} style={[ButtonStyles.full]}>
                      <Text style={s.btnText}NEXT</Text>
                    </Pressable>
                  </View>
                </View>
         </KeyboardAwareScrollView>
    </BottomSheetModal>

Anyone can explain me what I am doing wrong ? On Android its fine, this is only on iOS.

CodePudding user response：

if you are using react-native-bottom-sheet look at this page https://gorhom.github.io/react-native-bottom-sheet/keyboard-handling/

CodePudding user response：

Try wrapping BottomSheetModal in KeyboardAvoidingView and remove KeyboardAwareScrollView

You may need to use keyboardVerticalOffset to adjust

<KeyboardAvoidingView behavior={'height'} style={{flex:1}}>
        <BottomSheetModal
          ref={ref}         
          index={1}
          snapPoints={snapPoints}
          handleIndicatorStyle={[s.handleStyle, s.handleColorWhite]}
          backdropComponent={BottomSheetBackdrop}
        >
           .....

        <BottomSheetModal />
</KeyboardAvoidingView>