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

I’m at the moment utilizing the react-native-element-dropdown library in a kind, and I am going through a difficulty with scrolling when the dropdown is concentrated. Here is the issue:

Once I give attention to the dropdown, the record would 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 model={kinds.globalContainer}>
      <KeyboardAvoidingView
        habits={Platform.OS === 'ios' ? 'padding' : 'peak'}
        model={kinds.contentContainerStyle}>
        <ScrollView
          contentContainerStyle={kinds.containerPurchasePage}
          keyboardShouldPersistTaps="dealt with"
          ref={scrollViewRef}>
          <IText.Textual content
            id="undertaking.normal.info"
            model={kinds.pageTitle}
          />
          <View model={kinds.formatField}>
            <Controller
              identify="filterCriteria.classes"
              management={strategies.management}
              render={({area, fieldState: {error}}) => {
                return (
                  <>
                    <ISelect.MultipleSelect
                      {...area}
                      choices={propertyType(t)}
                      label={t('property.undertaking.kind')}
                      placeholder={t('widespread.choose')}
                      scrollViewRef={scrollViewRef}
                    />
                    {error && (
                      <IText.Textual content
                        model={kinds.errorText}
                        content material={error.message}
                      />
                    )}
                  </>
                );
              }}
            />
          </View>

          <View model={kinds.formatField}>
            <Controller
              identify="filterCriteria.metropolis"
              management={strategies.management}
              render={({area}) => {
                return (
                  <ISelect.MultipleSelect
                    {...area}
                    choices={buildCityOptions(cities)}
                    label={t('property.undertaking.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 model={kinds.labelContainer}>
        {!!label && <IText.Textual content content material={label} model={kinds.label} />}
        {required && <IText.Textual content content material={'*'} model={kinds.asterisk} />}
      </View>

      <MultiSelect
        searchQuery={searchQuery}
        model={kinds.dropdown}
        placeholderStyle={kinds.placeholderStyle}
        selectedTextStyle={kinds.selectedTextStyle}
        inputSearchStyle={kinds.inputSearchStyle}
        iconStyle={kinds.iconStyle}
        search={search}
        knowledge={choices}
        labelField="label"
        valueField="worth"
        placeholder={placeholder}
        worth={worth}
        onChange={_value => {
          onChange(_value?.contains(ALL) ? [] : _value);
        }}
        selectedStyle={kinds.labelSelected}
        activeColor={Colours.Primary.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 recognize any assist or ideas on tips on how to resolve this scrolling situation. Thanks prematurely!