if I scroll down it leaves automatically the keyboard, how can I prevent this ?

[shop-fluencer]

Hello,

I have a modal with input fields. So if my keyboard is visible and I want scroll down to my button then it automatically hides they keyboard, of if I want to scroll down to other input it again hides they keyboard. thats not good UX how can I prevent this ? That I can scroll and the keyboard are still showing ?

Code:

    <Modalize
      ref={ref}
      modalStyle={modalBottomSheet.modal}
      threshold={ModalConfig.threshold}
      velocity={ModalConfig.velocity}
      openAnimationConfig={ModalConfig.openAnimationConfig}
      scrollViewProps={{keyboardShouldPersistTaps: 'handled'}}
      adjustToContentHeight
    >
      <GestureHandlerRootView style={s.container}>
        <Text style={s.title}>{t('packet.share_title')}</Text>
        { /* Fullname */ }
        <View style={s.inputView}>
          <Input testID='full_name_input' onChangeText={formik.handleChange('full_name')} value={formik.values.full_name} style={[InputStyles.full, s.input]} placeholder={'Vollständiger Name'} placeholderTextColor={'#999'} />
          { formik.values.full_name.length > 0 && (
            <ValidationMessage
              fail_icon={<SimpleLineIcons name="close" size={24} color="red" />} 
              success_icon={<SimpleLineIcons name="check" size={24} color='#44e544' />}
              error={formik.errors.full_name}
              onPress={handleToggleModalMessage}
              style={s.validationIcon}
            />)
          }
        </View>

        { /* Company Name */ }
        <View style={s.inputView}>
          <Input testID='company_name_input' onChangeText={formik.handleChange('company_name')} value={formik.values.company_name} style={[InputStyles.full, s.input]} placeholder={'Firmenname (optional)'} placeholderTextColor={'#999'} />
          { typeof formik.values.company_name !== 'undefined' && formik.values.company_name.length > 0 && (
            <ValidationMessage
              fail_icon={<SimpleLineIcons name="close" size={24} color="red" />} 
              success_icon={<SimpleLineIcons name="check" size={24} color='#44e544' />}
              error={formik.errors.company_name}
              onPress={handleToggleModalMessage}
              style={s.validationIcon}
            />)
          }
        </View>

        { /* Street and House number */ }
        <View style={s.inputView}>
          <Input testID='street_and_housenumber_input' onChangeText={formik.handleChange('street_and_house_number')} value={formik.values.street_and_house_number} style={[InputStyles.full, s.input]} placeholder={'Straße und Hausnummer'} placeholderTextColor={'#999'} />
          { formik.values.street_and_house_number.length > 0 && (
            <ValidationMessage
              fail_icon={<SimpleLineIcons name="close" size={24} color="red" />} 
              success_icon={<SimpleLineIcons name="check" size={24} color='#44e544' />}
              error={formik.errors.street_and_house_number}
              onPress={handleToggleModalMessage}
              style={s.validationIcon}
            />)
          }
        </View>

        { /* City */ }
        <View style={s.inputView}>
          <Input testID='city_input' onChangeText={formik.handleChange('city')} value={formik.values.city} style={[InputStyles.full, s.input]} placeholder={'Stadt'} placeholderTextColor={'#999'} />
          { formik.values.city.length > 0 && (
            <ValidationMessage
              fail_icon={<SimpleLineIcons name="close" size={24} color="red" />} 
              success_icon={<SimpleLineIcons name="check" size={24} color='#44e544' />}
              error={formik.errors.city}
              onPress={handleToggleModalMessage}
              style={s.validationIcon}
            />)
          }
        </View>

        { /* State */ }
        <View style={s.inputView}>
          <Input testID='state_input' onChangeText={formik.handleChange('state')} value={formik.values.state} style={[InputStyles.full, s.input]} placeholder={'State'} placeholderTextColor={'#999'} />
          { typeof formik.values.state !== 'undefined' && formik.values.state.length > 0 && (
            <ValidationMessage
              fail_icon={<SimpleLineIcons name="close" size={24} color="red" />} 
              success_icon={<SimpleLineIcons name="check" size={24} color='#44e544' />}
              error={formik.errors.state}
              onPress={handleToggleModalMessage}
              style={s.validationIcon}
            />)
          }
        </View>

        { /* Zipcode */ }
        <View style={s.inputView}>
          <Input testID='zip_code_input' onChangeText={formik.handleChange('zip_code')} value={formik.values.zip_code} style={[InputStyles.full, s.input]} placeholder={'Zipcode'} placeholderTextColor={'#999'} />
          { formik.values.zip_code.length > 0 && (
            <ValidationMessage
              fail_icon={<SimpleLineIcons name="close" size={24} color="red" />} 
              success_icon={<SimpleLineIcons name="check" size={24} color='#44e544' />}
              error={formik.errors.zip_code}
              onPress={handleToggleModalMessage}
              style={s.validationIcon}
            />)
          }
        </View>

        { /* Country */ }
        <View style={s.inputView}>
          <Input testID='country_input' onChangeText={formik.handleChange('country')} value={formik.values.country} style={[InputStyles.full, s.input]} placeholder={'Country'} placeholderTextColor={'#999'} />
          { formik.values.country.length > 0 && (
            <ValidationMessage
              fail_icon={<SimpleLineIcons name="close" size={24} color="red" />} 
              success_icon={<SimpleLineIcons name="check" size={24} color='#44e544' />}
              error={formik.errors.country}
              onPress={handleToggleModalMessage}
              style={s.validationIcon}
            />)
          }
        </View>

        { /* Phone Number */ }
        <View style={s.inputView}>
          <Input testID='phone_number_input' onChangeText={formik.handleChange('phone_number')} value={formik.values.phone_number} style={[InputStyles.full, s.input]} placeholder={'Phone Number'} placeholderTextColor={'#999'} />
          { typeof formik.values.phone_number !== 'undefined' && formik.values.phone_number.length > 0 && (
            <ValidationMessage
              fail_icon={<SimpleLineIcons name="close" size={24} color="red" />} 
              success_icon={<SimpleLineIcons name="check" size={24} color='#44e544' />}
              error={formik.errors.phone_number}
              onPress={handleToggleModalMessage}
              style={s.validationIcon}
            />)
          }
        </View>

        <View style={s.inputView}>
          <Button onPress={handleFinishAddress} style={[ButtonStyles.full, s.btnSend]}>
            <Text style={s.btnSendText}>Speichern</Text>
          </Button>
        </View>
      </GestureHandlerRootView>
      <Portal>
        { modalMessage.open && (
          <ModalError handleToggleModalMessage={handleToggleModalMessage} message={modalMessage.message} />
          )
        }
      </Portal>
    </Modalize>
  )
});

https://user-images.githubusercontent.com/101994056/171215529-d478f3b5-b8e6-4f03-b8d3-399bdf20f0c1.mp4

[nofacez]

Hi! Had the same issue, fixed it by setting

          scrollViewProps={{
            keyboardShouldPersistTaps: 'always',
          }}