Блог

Мой список ввода текста довольно длинный, и мне нужно поместить их на одну страницу внутри модального.

Дело в том, что всякий раз, когда всплывает клавиатура. Первый элемент и заголовок модального всегда невидимы из поля зрения.

вот код

 return (
    <Modal
  transparent={true}
  animationType={'slide'}
  visible={visibility}
  onRequestClose={() => {
    console.log('close modal');
  }}>
  <KeyboardAvoidingView
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    style={{flex: 1}}
    enabled>
    <View style={styles.modalBackground}>
      <View style={styles.activityIndicatorWrapper}>
        <ScrollView showsVerticalScrollIndicator={false}>
          <View style={styles.headerContainer}>
            <Text
              style={[
                styles.activityText,
                globalStyle.mediumText,
                globalStyle.boldedFont,
              ]}>
              {title}
            </Text>
            <TouchableOpacity
              style={styles.crossPosition}
              onPress={() => setVisibilty(false)}>
              <Cross />
            </TouchableOpacity>
          </View>

          <Formik
            validateOnMount={true}
            validationSchema={contactDetailsSchema}
            initialValues={{
              firstName: '',
              lastName: '',
              email: '',
              mobile: '',
              address: '',
              city: '',
              state: '',
              zipCode: '',
              country: '',
            }}
            onSubmit={values => handleAddress(values)}>
            {({
              handleChange,
              handleBlur,
              handleSubmit,
              errors,
              touched,
              values,
              isValid,
            }) => (
              <>
                <TextInput
                  name="firstName"
                  placeholderTextColor={unSettleGrey}
                  style={styles.textInput}
                  numberOfLines={1}
                  placeholder="First Name"
                  keyboardType="default"
                  onChangeText={handleChange('firstName')}
                  // onBlur={handleBlur('firstName')}
                  // value={values.firstName}
                  autoCapitalize="none"
                  selectionColor="white"
                />
                                     <TextInput
                  name="firstName"
                  placeholderTextColor={unSettleGrey}
                  style={styles.textInput}
                  numberOfLines={1}
                  placeholder="First Name"
                  keyboardType="default"
                  onChangeText={handleChange('firstName')}
                  // onBlur={handleBlur('firstName')}
                  // value={values.firstName}
                  autoCapitalize="none"
                  selectionColor="white"
                />
                                     <TextInput
                  name="firstName"
                  placeholderTextColor={unSettleGrey}
                  style={styles.textInput}
                  numberOfLines={1}
                  placeholder="First Name"
                  keyboardType="default"
                  onChangeText={handleChange('firstName')}
                  // onBlur={handleBlur('firstName')}
                  // value={values.firstName}
                  autoCapitalize="none"
                  selectionColor="white"
                />
                </>
            )}
          </Formik>
        </ScrollView>
      </View>
    </View>
  </KeyboardAvoidingView>
</Modal>
  );
};

export default ProductDeliveryPopUp;

const styles = EStyleSheet.create({
  modalBackground: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'flex-end',
    backgroundColor: '#00000040',
  },
  activityIndicatorWrapper: {
    backgroundColor: '$whiteColor',
    borderRadius: 10,
    display: 'flex',
    paddingHorizontal: 16,
    width: windowWidth,
    height: windowHeight - 100,
    paddingTop: 12,
  },
  headerContainer: {
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
  },
  crossPosition: {position: 'absolute', right: 20, top: 22},
  textInputContainer: {marginVertical: 12},
  textInput: {
    width: windowWidth - 32,
    paddingVertical: 12,
    paddingHorizontal: 12,
    borderWidth: 1,
    borderColor: 'grey',
    borderRadius: 4,
    marginTop: 12,
    color: 'black',
  },
  textDescription: {
    height: 100,
    textAlignVertical: 'top',
  },
  checkboxContainer: {
    marginVertical: 12,
    flexDirection: 'row',
    alignItems: 'center',
  },
  checkboxText: {marginLeft: 12},
  dropDownButtonStyle: {
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: 'grey',
    borderRadius: 8,
    height: 35,
    marginTop: 20,
  },
  dropDownButtonText: {textAlign: 'left'},
  dropDownRows: {
    backgroundColor: 'white',
    borderColor: 'white',
    borderWidth: 0,
    marginBottom: -1,
  },
  pageEndContainer: {marginLeft: 37, marginBottom: 12},
  bottomPageMargin: {marginBottom: 50},
  errorText: {
    color: 'red',
    marginTop: 4,
  },
});
 

Вот как они это показывают. Я загрузил две фотографии, чтобы вы, ребята, могли их хорошо видеть.
В симуляторе iOS пользователь может прокручивать страницу, но в симуляторе Android пользователь не может прокручивать, когда всплывает клавиатура. Таким образом, эта проблема существует только на устройствах Android