Search code examples
react-nativeexpodropdown

React native "react-native-dropdown-select-list" when dropdown is used it moves the items below down. how to stop that from happening

I am using the react-native-dropdown-select-list. When dropdown is used/opened the items below on screen are pushed down instead of the menu coming up above them and not moving the items down. How to stop this from happening?

increased and decreased the zIndex. It didn't work

Solution

  • You can do this by using the dropdownStyles prop to style the dropdown. Adding position: absolute makes sure the dropdown goes over the other elements and does not push them. Some additional styling to make it look as before and overlap the other components.

    <SelectList
  dropdownStyles={{
    backgroundColor: "white",
    position: "absolute",
    top: 40,
    width: "100%",
    zIndex: 999,
  }}
/>