javascript – Keyboard dismissed on drag ScrollView content iOS only


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…

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img