Not able to select item from list that overlaps different view

[CorpOnThron]

Describe the bug
Could not select an item from the dropdown list.

To Reproduce
Render separate view under dropdown

Screenshots

Code

    <View>
      <Header leftComponent={{icon: 'close', color: '#fff'}}
          centerComponent={{text: 'Create a Parcel', style: {fontSize: 22, color: '#fff'}}}
          rightComponent={{text: 'SCAN', style: {fontSize: 18, color: '#fff'}}}
          placement="left"
          backgroundColor = '#1CB394'
          containerStyle = {styles.header}
          leftContainerStyle= {{marginBottom: 28}}
          rightContainerStyle={{marginBottom: 20, paddingRight: 8}}
          centerContainerStyle= {{marginBottom: 22, marginLeft: 18}}
      />

      <View style={{height: 'auto', maxHeight: screenHeight - 90,}}>
        <ScrollView style={{alignSelf: "stretch", width: "100%"}}>              
          <View style={{paddingHorizontal: 15, alignSelf: "stretch", width: "100%", backgroundColor: '#fff', 
          zIndex: 10 
        }}>
            <View style={{marginTop: 15, flexDirection: 'row', alignItems: 'center', alignSelf: 'stretch', justifyContent: 'center'}}>
                <Button buttonStyle={(this.state.direction == "In" ? {backgroundColor:"#1CB394", borderColor: '#333'} : {backgroundColor:"white", borderColor: '#333'})} titleStyle={styles.buttonStyle} type="outline" title="Incoming" 
                onPress={() =>{
                  this.setState({direction: "In"})
                }}></Button>
                <Button buttonStyle={(this.state.direction == "Out" ? {backgroundColor:"#1CB394", borderColor: '#333'} : {backgroundColor:"white", borderColor: '#333'})} titleStyle={styles.buttonStyle} type="outline" title="Outgoing"
                onPress={() =>{
                  this.setState({direction: "Out"})
                }}
                ></Button>
            </View>
            <DropDownPicker
                    items={this.state.buildingList}
                    // defaultValue={"Picked Up By"}
                    placeholder="Choose building"
                    containerStyle={{height: 40, marginTop: 10}}
                    style={{backgroundColor: 'white', color: "gray"}}
                    dropDownStyle={{backgroundColor: '#fafafa'}}
                    onChangeItem={item => {
                    this.setState({
                      selectedBuilding: item.value
                    });
                    console.log("item is ",item.value);
                    this._getUnits(item.value.id);
                  }}
                  
                  zIndex={30}
                />
            <DropDownPicker
                    items={this.state.unitsList}
                    // defaultValue={"Picked Up By"}
                    placeholder="Choose unit"
                    containerStyle={{height: 40, marginTop: 10, width:"50%"}}
                    disabled={(this.state.selectedBuilding == null ? true : false)}
                    style={{backgroundColor: 'white', color: "gray"}}
                    dropDownStyle={{backgroundColor: '#fafafa', position:'absolute'}}
                    onChangeItem={item => {this.setState({
                      selectedUnit: item.value
                    })
                    console.log("I am clicked");
                    this._getRecipients(item.value.id)
                  }}
                  zIndex={20}
                />             
            <DropDownPicker
                    items={this.state.recipientList}
                    // defaultValue={"Picked Up By"}
                    placeholder="Choose resident"
                    containerStyle={{height: 40, marginTop: 10,marginBottom: 30}}
                    disabled={(this.state.selectedUnit == null ? true : false)}
                    style={{backgroundColor: 'white', color: "gray"}}
                    dropDownStyle={{backgroundColor: '#fafafa'}}
                    onChangeItem={item => this.setState({
                      selectedResident: item.value
                    })}
                    
                  zIndex={10}
                />    
          </View>              
          
          <View  style={{paddingHorizontal: 15, alignSelf: "stretch", width: "100%"}} >
            <Input containerStyle={{marginTop: 15}} placeholder='Parcel type' disabled={(this.state.selectedResident == null ? true : false)}/>   
            <Input containerStyle={{width: "50%"}} placeholder='# of Pieces' disabled={(this.state.selectedResident == null ? true : false)}/>   
            <Input placeholder='Courier' disabled={(this.state.selectedResident == null ? true : false)}/>   
            <Input placeholder='Barcode' disabled={(this.state.selectedResident == null ? true : false)}/>
            <View style={{flexDirection: 'row'}}>
              <Input containerStyle={{width: "50%"}} placeholder='Date' disabled={(this.state.selectedResident == null ? true : false)}/>
              <Input containerStyle={{width: "50%"}} placeholder='Time' disabled={(this.state.selectedResident == null ? true : false)}/>
            </View>
            <Input placeholder='Description' disabled={(this.state.selectedUnit == null ? true : false)}/>


            <View style={{marginTop: 30, marginBottom: 10}}>
              <Button buttonStyle={{backgroundColor: "#1CB394", justifyContent: "center"}} title="Save" ></Button>
            </View>
          </View>
        </ScrollView>
      </View>
      {
                this.state.loaderVisible ?
                    <View style={{
                        backgroundColor: '#bbb', opacity: 0.7, width: screenWidth, height: screenHeight,
                        position: 'absolute', justifyContent: 'center',
                    }}>
                        <ActivityIndicator color="#1CB394" size={60} style={{ alignSelf: 'center' }}>
                        </ActivityIndicator>
                    </View>
                    :<View></View>
        }
    </View>

Info (please complete the following information):

• OS: Android(Emulator)

Notes
I look through "Index" problems but was not able to find any solution that will work for me.

[hossein-zare]

Hello,

zIndex broken when containers have a background color
facebook/react-native#23615

Try to remove the backgroundColor from the parent view of the drop-down pickers.
I hope react native finds a solution to the weird issue.

[Ahaseeb98]

i am facing the problem and removing the background color did not solve the issue

[vikastechment]

@hossein-zare I am also facing the same issue.

[CorpOnThron]

Hello, @hossein-zare

First of all, thank you for the quick reply, you saved me from getting out of deadlines. It worked!

@Ahaseeb98 @vikastechment, the other thing that you can try, is to use this fix + remove zIndex from the parent view.

Regards!

[hossein-zare]

Hello @Ahaseeb98 @vikastechment ,
As @CorpOnThron mentioned above, the zIndex property can only be used for iOS.
https://github.com/hossein-zare/react-native-dropdown-picker#zindex-conflicts-untouchable-items-overlapping-pickers

[rutul089]

Hello,

zIndex broken when containers have a background color
facebook/react-native#23615

Try to remove the backgroundColor from the parent view of the drop-down pickers.
I hope react native finds a solution to the weird issue.

Hello @hossein-zare I am facing same issue if I remove backgroundColor from parent view then it's working fine but I can not remove background color as its part of UI. I want to achieve UI like attached PNG is there any solution for that?

OS: Android

Code:
<View style={{ backgroundColor: '#2A3950', marginTop: 25, padding: 20 }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}> <TextView body2 color='#CCDCE9'>{strings.addIncome.taxCalc}</TextView> <TextView body2 color='#00E0C6' >{strings.addIncome.preferances}</TextView> </View> <DropDownPicker items={[ { label: '2020-21', value: '2020-21', }, { label: '2021-22', value: '2021-22' }, ]} placeholder="" containerStyle={{ height: 40, marginTop: 10 }} style={{ backgroundColor: 'white', color: "gray", width: '55%' }} dropDownStyle={{ backgroundColor: '#fff', width: '55%' }} onChangeItem={item => { this.setState({ selectedYear: item.value }); console.log("item is ", item.value); }} /> </View>

[minh-dai]

@rutul089 same issue, any update ??

[rutul089]

@rutul089 same issue, any update ??

Nope

[vfa-thanhld]

i have a same issue
any sollution?

[AugustoMarcelo]

I created a <View /> outside my dropdown and put position: 'relative'. For now, it's working.

[minh-dai]

@AugustoMarcelo it not working for me :(((. Can you show your code ??

[martinattin]

Same issue for me..
Removing background color is not proper solution as it doesn't achieve the required UI.
I don't understand why this isssue is closed

[roshnet]

I solved it by removing borderWidth and borderColor from the styles applied to the dropdown parent view (Android).

[bychung]

This library doesn't use Modal.
I think the solution for touchable dropdown on outside of parent view is using Modal.
So this should be updated using Modal.

[rizshivalli]

I have The same issue, Please reopen this

[Tharinducn]

I have The same issue, Please reopen this

did you try this?

[rizanw]

I have The same issue, Please reopen this

did you try this?

I tried all of those and get same issues in some of android devices. any solutions?

[SaifullahRazzaq]

give the zindex={10} its work for me

[recursive-o]

Give parent view position: "relative", zIndex: 10. this work for me(at ios)

<View
style={{
position: "relative",
zIndex: 10,
}}
>
<DropDownPicker
...
/>

[lingarajnaxtre242]

I created a <View /> outside my dropdown and put position: 'relative'. For now, it's working.

not working

[lingarajnaxtre242]

You Just need to give zindex=10,
Inside the parent .... element.
if you want to override any child aliment inside the parent, You just need to give the child element index property according to the need.
Regards!

[Huyhung99]

I solved it by removing borderWidth and borderColor from the styles applied to the dropdown parent view (Android).

it's work

[the-smart-home-maker]

still doesn't work for me. I have tried all proposed ideas and even more I found anywhere else. Is there any plan on solving this issue in the near future? Otherwise I would have to build my own dropdown menu I guess...

[mikehardy]

I just went on a deep dive on this one and learned more than I wanted to about zIndexing, sibling views, android layout optimizations, elevation etc. Would you believe if you have nested views you can reuse the dropdown open state to dynamically change container zindex all by itself and it seems to work ? Maybe solution, pending feedback #376

[lalitVer]

<View style={Platform.OS === 'ios'? {position:'relative', zIndex:99} : {position:'relative'}}>
       <DropDownPicker
            items={[
                   {label: 'All', value: "all"}
            ]}
            searchable={false}
            defaultIndex={1}
            value={this.state.filterItem}
            setValue={this.setMenuValue}
            style={styles.ddMenuBar}
            // onChangeValue={}
            open={this.state.openFilter}
            onPress={()=>this.setState(prevState=>
            ({openFilter:!prevState.openFilter}))}
            placeholder={"Select"}
            placeholderStyle={styles.ddPlaceholder}
            bottomOffset={100}
            dropDownDirection={"AUTO"}
            closeAfterSelecting={true}
            itemSeparator={true}
            itemSeparatorStyle={styles.ddItemSeparatorStyle}
            listItemContainerStyle={styles.ddListItemContainerStyle}
            listItemLabelStyle={styles.ddListItemLabelStyle}
            dropDownContainerStyle={styles.ddContainerStyle}
            maxHeight={hp(50)}
            selectedItemLabelStyle={styles.ddSelectedItemLabelStyle}
            arrowIconStyle={styles.ddArrowIconStyle}
            textStyle={styles.ddTextStyle}
            listMode={"SCROLLVIEW"}
            bottomOffset={100}
            zIndex={199}
        />
 </View>

Use zIndex in parent view just like that.

[khoana56]

I'm dealing with the same issue. I just found out that the selectable area is depends on the container of the dropDownView. I tried to set the container's height as equal as the dropdown view displayed and I can tap all item in there.

OS: Android.
Device: Galaxy S8+

[haridevks]

I'm also having similar issues and have been scratching my head for too long. In my case the dropdown list showing the options are rendered under another Text input like in the picture 1.
this is the codes .

<View style={{marginTop:'2%',marginBottom:'4%',}}>
<DropDownPicker items={categories}
placeholderStyle={{color:'#b2b2b2',fontFamily:'Poppins-Regular',fontWeight:'300'}}
placeholder="Select Service"
defaultValue={this.state.categories}
isVisible={this.state.isVisible}
containerStyle={{ height: 50, width: '90%',alignSelf:'center',borderRadius:10, }}
style={{ backgroundColor: '#fff',paddingVertical:1 }}
itemStyle={{justifyContent: 'flex-start',}}
dropDownStyle={{ backgroundColor: '#fafafa', }}
onChangeItem={this.onCategoryChange} />

                    </View>

                    <View style={styles.Service_TextInputContainer}>
                        <TextInput style={{flex:1,height:39,textAlign: 'left',marginLeft:2,color:'#333',fontFamily:'Poppins-Regular',fontSize:16,fontWeight:'300',paddingTop:3,paddingBottom:4,paddingLeft:10,borderRadius:10,paddingRight:10,textAlignVertical: 'center', width:'100%'}}
                        placeholder='landmark' placeholderTextColor='#b2b2b2' value={this.state.landMark} onChangeText={(text) => this.landMarkInput(text)}/>
                    </View>

[SaifullahRazzaq]

use rn picker for this

…

On Tue, Sep 28, 2021 at 4:47 PM haridevks ***@***.***> wrote: I'm also having similar issues and have been scratching my head for too long. In my case the dropdown list showing the options are rendered under another Text input like in the picture 1. this is the codes . <View style={{marginTop:'2%',marginBottom:'4%',}}> <DropDownPicker items={categories} placeholderStyle={{color:'#b2b2b2',fontFamily:'Poppins-Regular',fontWeight:'300'}} placeholder="Select Service" defaultValue={this.state.categories} isVisible={this.state.isVisible} containerStyle={{ height: 50, width: '90%',alignSelf:'center',borderRadius:10, }} style={{ backgroundColor: '#fff',paddingVertical:1 }} itemStyle={{justifyContent: 'flex-start',}} dropDownStyle={{ backgroundColor: '#fafafa', }} onChangeItem={this.onCategoryChange} /> </View> <View style={styles.Service_TextInputContainer}> <TextInput style={{flex:1,height:39,textAlign: 'left',marginLeft:2,color:'#333',fontFamily:'Poppins-Regular',fontSize:16,fontWeight:'300',paddingTop:3,paddingBottom:4,paddingLeft:10,borderRadius:10,paddingRight:10,textAlignVertical: 'center', width:'100%'}} placeholder='landmark' placeholderTextColor='#b2b2b2' value={this.state.landMark} onChangeText={(text) => this.landMarkInput(text)}/> </View> [image: issue_picker] <https://user-images.githubusercontent.com/56026418/135077739-bc27c40c-9fd9-4abd-9ad4-b205712d1537.JPG> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#40 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALNR4Z34UT5VUJJBWKNRPODUEGTOTANCNFSM4OL27GHQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[haridevks]

@SaifullahRazzaq I had earlier used RN picker, but it crashes when clicking on the picker. Due to that reason only I chose this package.

[SaifullahRazzaq]

because u have not integrated styles or u does not read proper docs how to show values in rn picker

…

On Tue, Sep 28, 2021 at 5:25 PM haridevks ***@***.***> wrote: @SaifullahRazzaq <https://github.com/SaifullahRazzaq> I had earlier used RN picker, but it crashes when clicking on the picker. Due to that reason only I chose this package. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#40 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALNR4ZZNPLMHAASADOWMSZ3UEGX2RANCNFSM4OL27GHQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[haridevks]

@SaifullahRazzaq For the record, I have used it as per the docs and the issue i have mentioned happens when we click on the middle portion of the picker instead of the icon. That bug was not solved until RN 64.0.

[SaifullahRazzaq]

i recently used this picker i have not faced any issue

…

On Tue, Sep 28, 2021 at 5:48 PM haridevks ***@***.***> wrote: @SaifullahRazzaq <https://github.com/SaifullahRazzaq> For the record, I have used it as per the docs and the issue i have mentioned happens when we click on the middle portion of the picker instead of the icon. That bug was not solved until RN 64.0. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#40 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALNR4ZZVIDPQTELYH5NRWZ3UEG2S7ANCNFSM4OL27GHQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[MudassirAziz]

Hi programmers!
i found a solution to this issue removing/commenting out the parent view. and apply parent view styles to my dropdown own style attribute and it worked. i was facing issue only on android.

{/* <View zIndex={10} style = {{ width:'90%',height:50,marginLeft:-10,marginTop:10}}> */}
<DropDownPicker
open={openPosition}
value={valuePosition}
items={positionArray}
setOpen={setOpenPosition}
setValue={setValPosition}
setItems={setPositionArray}
zIndex={50}
onChangeValue={(value) => _setPosSelection(value)}
placeholder={"Select Position"}
max={10}
showArrowIcon={true}
showTickIcon={true}
itemSeparator={true}
selectedItemContainerStyle={{ backgroundColor:MYCOLORS.GREY, color:'white' }}
selectedItemLabelStyle={{ fontWeight: "bold", color:'white' }}
dropDownContainerStyle={{ width:'90%', alignSelf:'center', backgroundColor:MYCOLORS.DIM_GREY, }}
arrowIconStyle={{ width: 20, height: 20,tintColor:'white' }}
dropDownDirection="BOTTOM" textStyle={{ fontSize: 15,color:'white',fontWeight:'600' }}
style={{width:'90%',backgroundColor:'blue',borderColor:'grey',height:50,marginLeft:10,marginRight:10,marginTop:10, alignSelf:'center'}}
ArrowUpIconComponent={({style}) =><FontAwesomeIcon size={15} icon={faArrowUp} color={MYCOLORS.WHITE}/>}
ArrowDownIconComponent={({style}) => <FontAwesomeIcon size={15} icon={faArrowDown} color={MYCOLORS.WHITE}/>}
/>
{/* </View> */}

[adarsh-dayanand]

Make the zIndex: -1 for the components that are overlapping

[biancadragomir]

thanks a lot @adarsh-dayanand !
I made it work on Android by using zIndex: 1 on the parent view and on iOS by setting zIndex:-1 on the overlapping views

[nbarshain]

Came from Issue #376

None of the above solutions worked for me on android.

I figured out that you can dynamically expand the padding and then set a negative margin of the parent view that contains the dropdown, and that solves the issue.

Here's an example that you can run:

import React, {useState} from 'react';
import {View, SafeAreaView, ScrollView, Text} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import {RFValue} from 'react-native-responsive-fontsize'; // Can scale numbers according to the display size

function getItemsArray() {
  return [
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'},
    {label: 'Cranberry', value: 'cranberr'},
    {label: 'Durian', value: 'durian'},
    {label: 'Eggplant', value: 'eggplant'},
  ];
}

export default function App() {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState(getItemsArray());
  const [open2, setOpen2] = useState(false);
  const [value2, setValue2] = useState(null);
  const [items2, setItems2] = useState(getItemsArray());
  const [open3, setOpen3] = useState(false);
  const [value3, setValue3] = useState(null);
  const [items3, setItems3] = useState(getItemsArray());

  const listItemHeight = RFValue(50, 747); // My phone is 747 UI pixels high
  const numberOfItemsToDisplay = items.length > 5 ? 5 : items.length;

  return (
    <>
      <View
        style={{
          zIndex: open ? 1 : 0,
          paddingBottom: open ? listItemHeight * numberOfItemsToDisplay : 0,
          marginBottom: open ? -listItemHeight * numberOfItemsToDisplay : 0,
          backgroundColor: 'red',
        }}>
        <DropDownPicker
          style={{height: RFValue(60, 747)}}
          dropDownContainerStyle={{
            maxHeight: listItemHeight * numberOfItemsToDisplay,
          }}
          listItemContainerStyle={{
            height: listItemHeight,
            borderBottomWidth: 1,
            borderBottomColor: '#DDD',
          }}
          listMode="SCROLLVIEW"
          open={open}
          value={value}
          items={items}
          setOpen={setOpen}
          setValue={setValue}
          setItems={setItems}
        />
      </View>
      <View
        style={{
          zIndex: open2 ? 1 : 0,
          paddingBottom: open2 ? listItemHeight * numberOfItemsToDisplay : 0,
          marginBottom: open2 ? -listItemHeight * numberOfItemsToDisplay : 0,
        }}>
        <DropDownPicker
          style={{height: RFValue(60, 747)}}
          dropDownContainerStyle={{
            height: listItemHeight * numberOfItemsToDisplay,
          }}
          listItemContainerStyle={{
            height: listItemHeight,
            borderBottomWidth: 1,
            borderBottomColor: '#DDD',
          }}
          listMode="SCROLLVIEW"
          open={open2}
          value={value2}
          items={items2}
          setOpen={setOpen2}
          setValue={setValue2}
          setItems={setItems2}
        />
      </View>
      <View
        style={{
          zIndex: open3 ? 1 : 0,
          paddingBottom: open3 ? listItemHeight * numberOfItemsToDisplay : 0,
          marginBottom: open3 ? -listItemHeight * numberOfItemsToDisplay : 0,
        }}>
        <DropDownPicker
          style={{height: RFValue(60, 747)}}
          dropDownContainerStyle={{
            height: listItemHeight * numberOfItemsToDisplay,
          }}
          listItemContainerStyle={{
            height: listItemHeight,
            borderBottomWidth: 1,
            borderBottomColor: '#DDD',
          }}
          listMode="SCROLLVIEW"
          open={open3}
          value={value3}
          items={items3}
          setOpen={setOpen3}
          setValue={setValue3}
          setItems={setItems3}
        />
      </View>
    </>
  );

[BiplovQss]

https://stackoverflow.com/a/66077413/8526684
Solved : Not able to click on items in android

[BiplovQss]

@MudassirAziz solutions also worked.

1. remove parent view
2. Add dropDownContainerStyle={{ backgroundColor: 'grey', borderColor: 'grey'}} in dropdown.

[bganeshk]

It worked for me when i do the below trick
<View style={isIOS? {position:'relative', zIndex:99} : {position:'relative'}}>
<DropDownPicker placeholder="Gender" style={{zIndex:10}}

[ahmed243200]

I'm also having similar issues and have been scratching my head for too long. In my case the dropdown list showing the options are rendered under another Text input like in the picture 1. this is the codes .

<View style={{marginTop:'2%',marginBottom:'4%',}}> <DropDownPicker items={categories} placeholderStyle={{color:'#b2b2b2',fontFamily:'Poppins-Regular',fontWeight:'300'}} placeholder="Select Service" defaultValue={this.state.categories} isVisible={this.state.isVisible} containerStyle={{ height: 50, width: '90%',alignSelf:'center',borderRadius:10, }} style={{ backgroundColor: '#fff',paddingVertical:1 }} itemStyle={{justifyContent: 'flex-start',}} dropDownStyle={{ backgroundColor: '#fafafa', }} onChangeItem={this.onCategoryChange} />

                    </View>

                    <View style={styles.Service_TextInputContainer}>
                        <TextInput style={{flex:1,height:39,textAlign: 'left',marginLeft:2,color:'#333',fontFamily:'Poppins-Regular',fontSize:16,fontWeight:'300',paddingTop:3,paddingBottom:4,paddingLeft:10,borderRadius:10,paddingRight:10,textAlignVertical: 'center', width:'100%'}}
                        placeholder='landmark' placeholderTextColor='#b2b2b2' value={this.state.landMark} onChangeText={(text) => this.landMarkInput(text)}/>
                    </View>

i have a same issue
any sollution?

[thangvo2404]

hi, I have the same problem. When I set zIndex: 9999 to parent view, it did not work properly. So I change to solution set index of overlap view to -1. Look like this:

<View style={styles.parentView}>
            <DropDownPicker
              style={styles.codePrefix}
              open={open}
              value={serialPrefix}
              items={items}
              setOpen={setOpen}
              setValue={setSerialPrefix}
              setItems={setItems}
              dropDownDirection={"BOTTOM"}
              multiple={false}
              placeholder=""
            />
            <TextInput
              style={styles.input}
              value={value}
              onChangeText={setValue}
              editable={false}
            />
          </View>
        </View>
        <View style={{ ...styles.overlapView, zIndex: open ? -9999 : 0 }}>
          <CustomText young weight="500" height={72} center style={styles.mt_50}>
            overlap view
          </CustomText>
        </View>

[usmanhaider140]

Here is the solution: Just give a height of 300 to the parent view.

import React, {useState} from 'react';
import {Text, View, Platform} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import {Colors} from '../../constants';
import styles from './style';

const Dropdown = ({title = 'title', onChange, placeholder}) => {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'},
    {label: 'Orange', value: 'orange'},
    {label: 'Pear', value: 'pear'},
    {label: 'Strawberry', value: 'strawberry'},
    {label: 'Strawberry', value: 'strawberry'},
    {label: 'Strawberry', value: 'strawberry'},
  ]);

  return (
    <View style={open && {minHeight: 300}}>
      <Text style={styles.title}>{title}</Text>
      <DropDownPicker
        style={styles.container}
        placeholder={placeholder}
        open={open}
        value={value}
        onChangeSearchText={text => console.log(text)}
        onChangeValue={onChange}
        items={items}
        setOpen={setOpen}
        setValue={setValue}
        setItems={setItems}
        placeholderStyle={{color: Colors.lightGray}}
        dropDownContainerStyle={styles.dropDownContainerStyle}
      />
    </View>
  );
};

export default Dropdown;

[shamsKhokhar56]

There is a prop for handling overlap issue.

<DropDownPicker
    listMode='SCROLLVIEW'
/>

[ainnotate]

For me on Android it worked well and on iOS I had the problem.

I'm on RN 0.72 with document picker 5.4.7-beta.1.

On iOS, I had simillar problem of the Dropdown being transparent and overlaping with other components.

For me, the issue got resolved after I added a zIndex to my parent view.

Note: keeping or removing backgroundcolor in parent view didn't make any difference to me.

Just adding zIndex solved the problem.

Thank you.