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

Issue

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.

Solution

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.

Answered By - Nisanth Reddy