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.

Answer 1

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.

Answer 2

For this library, I take care not to use the containerStyle property to avoid such situations

Answer 3

It is Easy to solve:

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

Answer 4

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

Answer 5

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>

Answer 6

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

With Height

Without Height