In React Native app I am using react-native-modal and inside of the modal there is a KeyboardAvoidingView that contains ScrollView. When I press any textInput keyboard shows up, if I drag ScrollView content (to scroll down) by pressing any TextInput it works just fine and keyboard does not dissmiss, but when I start draging it by pressing the space between inputs it dissmisses keyboard on release.
Code below:
return (
<Modal
testID={'modal'}
isVisible={modalVisible}
propagateSwipe={true}
onBackButtonPress={handleModalClose}
onBackdropPress={handleModalClose}
backdropColor={colors.transparentBlack}
style={styles.modal}>
<View style={styles.container}>
<CustomText style={styles.title}>{'Edit'}</CustomText>
<Formik
initialValues={initialValues}
onSubmit={handleSubmisson}
validationSchema={validationSchema}>
{({handleSubmit}) => (
<KeyboardAvoidingView
style={styles.avoidViewContainer}
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={50}>
<ScrollView
style={styles.inputsContainer}
keyboardShouldPersistTaps="handled"
contentContainerStyle={{justifyContent: 'center', flexGrow: 1}}>
<ErrorsListComponent />
<TextInput
style={{width: '50%, height: 50, backgroundColor: 'blue'}}
keyboardType={
Platform.OS === 'android' ? 'numeric' : 'number-pad'
}
/>
</ScrollView>
<Button
title="Save"
additionalButtonStyle={styles.button}
additionalTextStyle={{color: colors.white}}
onPress={handleSubmit}
/>
</KeyboardAvoidingView>
)}
</Formik>
</View>
</Modal>
);
};
const styles = StyleSheet.create({
modal: {
justifyContent: 'flex-end',
margin: spacing._0,
},
container: {
alignItems: 'center',
flex: 1,
},
inputsContainer: {
width: '80%',
height: '80%',
},
title: {
fontSize: fontSize._20,
color: colors.black,
fontWeight: '700',
marginVertical: spacing._10,
},
button: {
backgroundColor: colors.secondary,
width: '50%',
height: 50,
borderWidth: 0,
alignSelf: 'center',
justifyContent: 'center',
marginVertical: spacing._5,
},
avoidViewContainer: {
alignItems: 'center',
flex: 1,
width: '100%',
},
Does anyone know what is the reason keyboard dismisses on drag in case of starting dragging out of input space? It happens only for iOS.
I have tried changing styles, way components contains each other, but with same result…




