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 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