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

Question

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.

Answer 1

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

Answer 2

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>