ios – Scrolling Situation with react-native-element-dropdown in a Type

I’m presently utilizing the react-native-element-dropdown library in a type, and I am dealing with a problem with scrolling when the dropdown is targeted. This is the issue:

After I concentrate on the dropdown, the record does not transfer with the choose enter, and it stays within the outdated place

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

  return (
    <View type={types.globalContainer}>
      <KeyboardAvoidingView
        conduct={Platform.OS === 'ios' ? 'padding' : 'peak'}
        type={types.contentContainerStyle}>
        <ScrollView
          contentContainerStyle={types.containerPurchasePage}
          keyboardShouldPersistTaps="dealt with"
          ref={scrollViewRef}>
          <IText.Textual content
            id="venture.basic.info"
            type={types.pageTitle}
          />
          <View type={types.formatField}>
            <Controller
              title="filterCriteria.classes"
              management={strategies.management}
              render={({area, fieldState: {error}}) => {
                return (
                  <>
                    <ISelect.MultipleSelect
                      {...area}
                      choices={propertyType(t)}
                      label={t('property.venture.sort')}
                      placeholder={t('widespread.choose')}
                      scrollViewRef={scrollViewRef}
                    />
                    {error && (
                      <IText.Textual content
                        type={types.errorText}
                        content material={error.message}
                      />
                    )}
                  </>
                );
              }}
            />
          </View>

          <View type={types.formatField}>
            <Controller
              title="filterCriteria.metropolis"
              management={strategies.management}
              render={({area}) => {
                return (
                  <ISelect.MultipleSelect
                    {...area}
                    choices={buildCityOptions(cities)}
                    label={t('property.venture.metropolis')}
                    search
                    placeholder={t('widespread.choose')}
                    scrollViewRef={scrollViewRef}
                  />
                );
              }}
            />
          </View>
      </KeyboardAvoidingView>
    </View>

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

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

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

  return (
    <>
      <View type={types.labelContainer}>
        {!!label && <IText.Textual content content material={label} type={types.label} />}
        {required && <IText.Textual content content material={'*'} type={types.asterisk} />}
      </View>

      <MultiSelect
        searchQuery={searchQuery}
        type={types.dropdown}
        placeholderStyle={types.placeholderStyle}
        selectedTextStyle={types.selectedTextStyle}
        inputSearchStyle={types.inputSearchStyle}
        iconStyle={types.iconStyle}
        search={search}
        information={choices}
        labelField="label"
        valueField="worth"
        placeholder={placeholder}
        worth={worth}
        onChange={_value => {
          onChange(_value?.consists of(ALL) ? [] : _value);
        }}
        selectedStyle={types.labelSelected}
        activeColor={Colours.Fundamental.gray}
        disable={disabled}
        alwaysRenderSelectedItem
        onFocus={onfocus}
        onBlur={onBack}
      />
    </>
  );
};

enter picture description right here

I anticipate the dropdown record to scroll to the highest when it’s targeted, guaranteeing that the chosen possibility is seen.

I respect any assist or options on the best way to resolve this scrolling problem. Thanks prematurely!