React Native ModalDropdown hides options with lower indexes after selection

163 Views Asked by At

I am using React Native's ModalDropdown component for a dropdown menu in my project. I have noticed an issue where, after selecting an option from the dropdown, all options with lower indexes disappear from the dropdown list. I want the dropdown to always display all available options, regardless of the current selection.

Here's my code:


import React, { useState } from 'react';
import ModalDropdown from 'react-native-modal-dropdown';

const RankingPage = () => {
  const [selectedOption, setSelectedOption] = useState(null);
  const options = ['option1', 'option2', 'option3'];

  const handleQuestChange = (index) => {
    setSelectedOption(options[index]);
  };

  return (
    <ModalDropdown
      options={options}
      defaultValue="Select an option ▼"
      onSelect={(index) => handleQuestChange(index)}
    />
  );
};

I've tried various configurations and properties, but the issue persists. Any help or insights on how to ensure that all options are always visible in the dropdown would be greatly appreciated.

1

There are 1 best solutions below

0
Andrei Dediu On

I had the exact same problem just an hour ago and what seemed to work for me was adding saveScrollPosition={false} Before I found this workaround, I saw that by 'dragging' one of the remained options, I was able to restore the list. Hope this will also work for you :)