I have created DropDown picker with the "react-native-dropdown-picker" package all items are listed but it looks transparent on another ponent. 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.

I have created DropDown picker with the "react-native-dropdown-picker" package all items are listed but it looks transparent on another ponent. 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.

• javascript
• reactjs
• react-native
• react-native-dropdown-picker

6 Answers 6

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

This should fix transparency as well as the zIndex.

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

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>

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

With Height

Without Height

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

It is Easy to solve:

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