ios – Scrolling Issue with react-native-element-dropdown in a Form

I am currently using the react-native-element-dropdown library in a form, and I’m facing an issue with scrolling when the dropdown is focused. Here’s the problem:

When I focus on the dropdown, the list doesn’t move with the select input, and it stays in the old position

export const PurchaseProjectPage = ({route}: PropertyPageProps) => {
  const {goBack, navigate} = useNavigation();
  const scrollViewRef = useRef<ScrollView>(null);

  return (
    <View style={styles.globalContainer}>
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={styles.contentContainerStyle}>
        <ScrollView
          contentContainerStyle={styles.containerPurchasePage}
          keyboardShouldPersistTaps="handled"
          ref={scrollViewRef}>
          <IText.Text
            id="project.general.information"
            style={styles.pageTitle}
          />
          <View style={styles.formatField}>
            <Controller
              name="filterCriteria.categories"
              control={methods.control}
              render={({field, fieldState: {error}}) => {
                return (
                  <>
                    <ISelect.MultipleSelect
                      {...field}
                      options={propertyType(t)}
                      label={t('property.project.type')}
                      placeholder={t('common.select')}
                      scrollViewRef={scrollViewRef}
                    />
                    {error && (
                      <IText.Text
                        style={styles.errorText}
                        content={error.message}
                      />
                    )}
                  </>
                );
              }}
            />
          </View>

          <View style={styles.formatField}>
            <Controller
              name="filterCriteria.city"
              control={methods.control}
              render={({field}) => {
                return (
                  <ISelect.MultipleSelect
                    {...field}
                    options={buildCityOptions(cities)}
                    label={t('property.project.city')}
                    search
                    placeholder={t('common.select')}
                    scrollViewRef={scrollViewRef}
                  />
                );
              }}
            />
          </View>
      </KeyboardAvoidingView>
    </View>

const MultipleSelect: FC<Props> = ({
  value,
  onChange,
  options,
  placeholder,
  search,
  disabled = false,
  label,
  required = false,
  searchQuery,
  scrollViewRef,
}) => {
  const [isClicked, setIsClicked] = useState(true);

  const onfocus = () => {
    scrollViewRef?.current &&
      scrollViewRef.current.scrollTo({y: 300, animated: true});
    setIsClicked(!isClicked);
  };

  const onBack = () => {
    setIsClicked(!isClicked);
  };

  return (
    <>
      <View style={styles.labelContainer}>
        {!!label && <IText.Text content={label} style={styles.label} />}
        {required && <IText.Text content={'*'} style={styles.asterisk} />}
      </View>

      <MultiSelect
        searchQuery={searchQuery}
        style={styles.dropdown}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        search={search}
        data={options}
        labelField="label"
        valueField="value"
        placeholder={placeholder}
        value={value}
        onChange={_value => {
          onChange(_value?.includes(ALL) ? [] : _value);
        }}
        selectedStyle={styles.labelSelected}
        activeColor={Colors.Basic.grey}
        disable={disabled}
        alwaysRenderSelectedItem
        onFocus={onfocus}
        onBlur={onBack}
      />
    </>
  );
};

enter image description here

I expect the dropdown list to scroll to the top when it is focused, ensuring that the selected option is visible.

I appreciate any help or suggestions on how to resolve this scrolling issue. Thanks in advance!