picker beeing rendered below other components

Describe the bug I can open the picker but when i open it the items are rendered below other components and they can’t be touched, i’ve read some topics about it in the documentation but I couldn’t find a solution on my own

To Reproduce To reproduce this error open your react-native project (i have started a project with CRNA and not using EXPO) and:

• Create a screen
• Place a View inside the screen and into this View place my CustomDropdown (the code of the component is right below)
• Give some items to the dropdown Here are some items to make it easy:

[
  { label: 'January', value: 'jan' },
  { label: 'February', value: 'fev' },
  { label: 'Mars', value: 'mar' },
  { label: 'April', value: 'apr' },
  { label: 'May', value: 'may' },
  { label: 'June', value: 'jun' },
  { label: 'July', value: 'jul' },
  { label: 'August', value: 'ago' },
  { label: 'September', value: 'set' },
  { label: 'October', value: 'out' },
  { label: 'November', value: 'nov' },
  { label: 'December', value: 'dec' },
]

• Place some Text outside the View which contains the dropdown component

I have made a custom component for the dropdown, it’s only a Container wrapper arround the dropdown to give some aditional styles CustomDropdown.tsx

import React, { Dispatch, SetStateAction } from 'react';

import DropDownPicker from 'react-native-dropdown-picker';

import { Container } from './styles';

interface DropwDownProps {
  selectedValue: string;
  setSelectedValue: Dispatch<SetStateAction<string>>;
  items: Array<{ label: string; value: string }>;
  contrast?: boolean;
  size?: string;
}

const DropDown: React.FC<DropwDownProps> = ({
  selectedValue,
  setSelectedValue,
  items,
  contrast = false,
  size = 'small,',
  ...rest
}) => {
  return (
    <Container contrast={contrast} size={size} {...rest}>
      <DropDownPicker
        items={items}
        defaultValue={selectedValue}
        containerStyle={{
          height: '100%',
          width: size === 'small' ? 100 : 170,
        }}
        style={{ backgroundColor: 'transparent' }}
        selectedLabelStyle={{ color: contrast ? '#002d72' : '#fff' }}
        arrowColor={contrast ? '#002d72' : '#fff'}
        onChangeItem={(item) => console.log(item.value)}
      />
    </Container>
  );
};

export default DropDown;

styles.ts

import styled, { css } from 'styled-components/native';

interface ContainerProps {
  contrast: boolean;
  size: string;
}

export const Container = styled.View<ContainerProps>`
  border-radius: 6px;

  justify-content: center;
  margin-right: 20px;

  ${(props) =>
    props.size === 'small'
      ? css`
          height: 40px;
          width: 100px;
        `
      : css`
          height: 45px;
          width: 170px;
        `}

  ${(props) =>
    props.contrast
      ? css`
          border: solid 1px #002d72;
        `
      : css`
          border: solid 1px #fff;
        `}
`;

Expected behavior The expected behavior was that the items of the dropdown should be clickable and above all other components

Screenshots Android screenshot

iOS screenshot

Info (please complete the following information):

• OS: [iOS, Android]

Additional context It’s my first time opening an issue, sorry if i forgot something, just let me know it and i’ll improve it for you, thanks for any help ❤️

[vishalcherian]

I can echo @Jose24San. I had a similar issue with this, where the dropdown box would render behind two Button elements. I tried using z-index in the View wrapper for the picker, but that didn’t seem to do anything.

However, I set the z-index to a negative value in the View that wrapped around those buttons, and that seemed to do the trick. So perhaps trying to set a negative z-index on all the other elements that appear over the picker is a quick fix.

Roughly something like this:

<View>
    <DropDownPicker ... />
</View>
<View style={{ zIndex : -5 }}>
    <Button ... />
    <Button ... />
</View>

[Bluebird2000]

Got this working by setting a state together with zIndex property set to 2 to control the isVisible props from the package P:S

 returnCurrencyLayout = () => {
        let currencies = [{
            id: 1,
            name: 'USD',
        }, {
            id: 2,
            name: 'CAD'
        }, {
            id: 3,
            name: 'NGN'
        }]
        
            return (
                <View>
                    <>
                        <DropDownPicker 
                            onOpen={() => this.setState({ isVisible: true })}
                            onClose={() => this.setState({ isVisible: false })}
                            items={currencies.map((data) => ({ label: `${data.name}`, value: data }))}
                            defaultValue={null}
                            isVisible={this.state.isVisible} // Add this
                            placeholder="Select Currency"
                            containerStyle={{height: 50}}
                            style={{ ...styles.input, backgroundColor: '#f7f7f7' }}
                            itemStyle={{ justifyContent: 'flex-start' }}
                            labelStyle={{ color: COLORS.textPrimary, fontSize: SIZES.h3 }}
                            dropDownStyle={{ backgroundColor: '#ffffff'}}
                            onChangeItem={item => this.setState({ currency: item.value })}
                        /> 
                    </>
                </View>
            );
    }

 <View 
       style={this.state.isVisble ? { zIndex: 2}  // Add this
       : {}>
       <Text style={{
           marginBottom: SIZES.margin / 2,
           fontSize: SIZES.h4, 
           color: COLORS.textPrimary,
           fontFamily: FONTS.medium
           }}>
               <Text style={styles.requireFields}>* </Text>
               Currency
       </Text>
       { this.returnCurrencyLayout() }
   </View>