react-native-dropdown-picker
react-native-dropdown-picker copied to clipboard
hossein-zare
Not able to select item from list that overlaps different view
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.
Hello,
zIndex broken when containers have a background color https://github.com/facebook/react-native/issues/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.
i am facing the problem and removing the background color did not solve the issue
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!
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
Hello,
zIndex broken when containers have a background color facebook/react-native#23615
Try to remove the
backgroundColorfrom 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>
I created a <View /> outside my dropdown and put position: 'relative'. For now, it's working.
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
I solved it by removing borderWidth and borderColor from the styles applied to the dropdown parent view (Android).
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.
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?
Give parent view position: "relative", zIndex: 10. this work for me(at ios)
<View style={{ position: "relative", zIndex: 10, }} > <DropDownPicker ... /> </View>
I created a
<View />outside my dropdown and putposition: 'relative'. For now, it's working.
not working
You Just need to give zindex=10, Inside the parent <View>....</View> 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!
I solved it by removing
borderWidthandborderColorfrom the styles applied to the dropdown parent view (Android).
it's work
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...
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
<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.
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+
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>
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 https://github.com/hossein-zare/react-native-dropdown-picker/issues/40#issuecomment-929113386, 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.
@SaifullahRazzaq I had earlier used RN picker, but it crashes when clicking on the picker. Due to that reason only I chose this package.
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 https://github.com/hossein-zare/react-native-dropdown-picker/issues/40#issuecomment-929152973, 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.