react-native-dropdown-picker listed items not showing properly (Overlay)

Question

I have created DropDown picker with the "react-native-dropdown-picker" package all items are listed but it looks transparent on another component. anyone can help me to fix this issue?

Here My Source code:

import React, {useState} from 'react';
import {View, Text, Button, ScrollView, StyleSheet} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';

  
const App = () => {
  const [myArray, setMyArray] = useState([]);
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'}
  ]);

  return (
      <View style={styles.container}>
        <Button title="Check"/>
        <Text>Hello world</Text>
        <DropDownPicker
          open={open}
          value={value}
          items={items}
          setOpen={setOpen}
          setValue={setValue}
          setItems={setItems}
        />
        <Button title="Check"/>
        <Text>Hello world</Text>
        <Button title="Check"/>
        <Text>Hello world</Text>
        <Button title="Check"/>
        <Text>Hello world</Text>
        <Button title="Check"/>
        <Text>Hello world</Text>
        <Button title="Check"/>
        <Text>Hello world</Text>
      </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
  },
});
export default App;

Expected: Listed items need to show properly without overlay, the buttons want to appear after the dropdown with scrollview.

Nisanth Reddy · Accepted Answer · 2021-05-16T17:37:04.683

8

The problem doesn't seem to be transparency alone. If you notice, the raised buttons are appearing above the lines of the dropdown.

That means z-index is also an issue here.

Add a dropDownContainerStyle={{ backgroundColor: 'white',zIndex: 1000, elevation: 1000 }} to your DropDownPicker component.

This should fix transparency as well as the zIndex.

edited May 16 '21 at 17:37

answered May 16 '21 at 16:37

Nisanth Reddy

5,967
1
11
29

Added style={{ backgroundColor: 'white', zIndex: 10000 }} to DropDownPicker but no luck. still same issue coming. – Elavarasan r May 16 '21 at 16:44
Try creating a reproducible using https://snack.expo.io/. I created this one - https://snack.expo.io/@nisanth-reddy/groaning-macaroni-and-cheese - and it seems like it is working fine. – Nisanth Reddy May 16 '21 at 16:50
In web view its working fine but in android not working. Can you switch to Android and run once see the diffrence. https://snack.expo.io/@elavarasan-r/groaning-macaroni-and-cheese – Elavarasan r May 16 '21 at 17:13
Updated my answer. Assuming you are using the latest version of the package, check this https://snack.expo.io/@nisanth-reddy/groaning-macaroni-and-cheese – Nisanth Reddy May 16 '21 at 17:37
1

Found solution from your example code. I have added "elevation: 1000" at dropDownContainerStyle its working fine. The exact code "dropDownContainerStyle={{backgroundColor: 'white',zIndex: 1000, elevation: 1000}}". Thanks for your help. – Elavarasan r May 16 '21 at 17:46

score 3 · Answer 2 · answered Dec 11 '21 at 20:47

For me the accepted answer does not work in ios. To fix ios issue i had to set the parent's view zIndex, however this lead to problems in android. Here is how your code should look like.

<View style={Platform.OS === 'ios' ? {zIndex: 100} : {}}>
     <DropDownPicker {...dropDownProps} />
</View>

I'd recommend to use the above as a starting point, make sure it all works fine in this plain version and start adding up more things to the style

score 0 · Answer 3 · answered Aug 07 '22 at 07:56

Here is the solution to this overlap problem please try this way it 99.9% works!!!
============
  <View style={{zIndex: 2000}}> // this work because of this
    <Text style={styles.inputTitle}>Tags</Text>
    <DropDownPicker
      style={{
        width: dynamicSize(340),
        alignSelf: 'center',
        marginVertical: dynamicSize(10),
        borderColor: colors.GRAY_E0,
      }}
      dropDownContainerStyle={{
        width: dynamicSize(340),
        alignSelf: 'center',
        borderColor: colors.GRAY_E0,
      }}
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
      // theme="DARK"
      multiple={true}
      mode="BADGE"
    />
  </View>

score 0 · Answer 4 · edited Dec 18 '22 at 19:23

0

It is Easy to solve:

<DropDownPicker
  zIndex={3000}
  zIndexInverse={1000}
  ...
/>
<DropDownPicker
  zIndex={2000}
  zIndexInverse={2000}
  ...
/>
<DropDownPicker
  zIndex={1000}
  zIndexInverse={3000}
  ...
/>

edited Dec 18 '22 at 19:23

miken32

42,008
16
111
154

answered Dec 18 '22 at 19:20

Ak-Tech 111

1
1

Welcome to SO! Please don't post code-only answers but add a little textual explanation about how and why your approach works and what makes it different from the other answers given. You can find out more at our ["How to write a good answer"](https://stackoverflow.com/help/how-to-answer) page. – ahuemmer Dec 21 '22 at 09:36

score 0 · Answer 5 · answered Aug 15 '23 at 17:00

0

I had this issue, i had set height for the parent element. removing the height worked

With Height

Without Height

answered Aug 15 '23 at 17:00

Katana Codes

85
1
11

react-native-dropdown-picker listed items not showing properly (Overlay)

5 Answers5