Comments (19)
Useless library!
from react-native-dropdown-picker.
Hello,
Try adding zIndex={5000}
to the component, if it doesn't work you can put it into a View
with zIndex: 5000
.
Method 1:
<DropDownPicker
items={[
{label: 'UK', value: 'uk'},
{label: 'France', value: 'france'},
]}
defaultValue={'uk'}
containerStyle={{height: 40}}
style={{backgroundColor: '#fafafa'}}
dropDownStyle={{backgroundColor: '#fafafa'}}
onChangeItem={(item) => {
console.log(item);
}}
zIndex={5000}
/>
Method 2:
<View style={{zIndex: 5000}}>
<DropDownPicker
items={[
{label: 'UK', value: 'uk'},
{label: 'France', value: 'france'},
]}
defaultValue={'uk'}
containerStyle={{height: 40}}
style={{backgroundColor: '#fafafa'}}
dropDownStyle={{backgroundColor: '#fafafa'}}
onChangeItem={(item) => {
console.log(item);
}}
/>
</View>
Try both of them and let me know if it's working please.
from react-native-dropdown-picker.
Tried both. Both failed
from react-native-dropdown-picker.
What about this one?
Make sure the items are touchable.
containerStyle={{height: 40, zIndex: 5009}}
Add your code snippet with styles, I'll try to reproduce the behavior.
from react-native-dropdown-picker.
i got same issue
Not best solution
My solution is put DropDownPicker
into a View
style position:'absolute', top:0
then put View
after FlatList or Any Component with marginTop: 40 (DropDownPicker height).
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item, index) => 'key' + index}
onEndReachedThreshold={0.4}
onEndReached={this.handleLoadMore.bind(this)}
style={{marginTop: 40}}
/>
<View style={{ position:'absolute', top:0 }}>
<DropDownPicker
items={[
{ label: 'UK', value: 'uk' },
{ label: 'France', value: 'france' },
]}
placeholder="Day range"
containerStyle={{height: 40}}
style={{ backgroundColor: '#ffffff' }}
dropDownStyle={{ backgroundColor: 'white' }}
onChangeItem={item => {
}}
/>
</View>
from react-native-dropdown-picker.
Hello @gillgill12 ,
Did you try the second method?
<View style={{zIndex: 5000}}>
<DropDownPicker
items={[
{label: 'UK', value: 'uk'},
{label: 'France', value: 'france'},
]}
placeholder="Day range"
containerStyle={{height: 40}}
style={{ backgroundColor: '#ffffff' }}
dropDownStyle={{ backgroundColor: 'white' }}
onChangeItem={item => {
}}
/>
</View>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item, index) => 'key' + index}
onEndReachedThreshold={0.4}
onEndReached={this.handleLoadMore.bind(this)}
style={{marginTop: 40}}
/>
Expo snack doesn't reproduce the behavior unfortunately i can't fix the bug.
from react-native-dropdown-picker.
@GangadharG @gillgill12
Please run this code and tell me whats been printed:
import { Platform } from 'react-native';
componentDidMount() {
console.log(Platform.OS); // android | ios
}
I think there's something going wrong with the Platform
recognizing operating system.
from react-native-dropdown-picker.
Hey !
Same problem here...
from react-native-dropdown-picker.
Hello @razzium
@gillgill12 @GangadharG
Please check this out: (Beta Version)
npm install [email protected]
from react-native-dropdown-picker.
Same problem with the "3.0.1-beta.0" version...
from react-native-dropdown-picker.
@razzium
Create an Expo Snack and share the link.
https://snack.expo.io/
from react-native-dropdown-picker.
Ok i do this when i have time (in 4-5 hours).
from react-native-dropdown-picker.
Ready Environment with react-native-dropdown-picker
installed & FlatList
as described in the issues.
https://snack.expo.io/21EPiOOPb
from react-native-dropdown-picker.
Here is the snack to reproduce :
https://snack.expo.io/@rrazzi-digital-paca/dropdown-overlapping-ios
from react-native-dropdown-picker.
(you can notice that it's work fine on android)
from react-native-dropdown-picker.
@razzium
I made a minor change in the snack, Check it out.
https://snack.expo.io/5I9RQVTzn
from react-native-dropdown-picker.
OK it works :)
But is this the optimal solution ?
(do you gonna push the new release ?)
from react-native-dropdown-picker.
Yes, It has nothing to do with the packge.
That's because of position: 'absolute'
which is a requirement for the dropdown box.
Nested Views
https://github.com/hossein-zare/react-native-dropdown-picker#zindex-conflicts-untouchable-items-overlapping-pickers
v3.0.3 has been published.
from react-native-dropdown-picker.
So what is the solution?
from react-native-dropdown-picker.
Related Issues (20)
- iOS - Modal not working in landscape and FLATLIST in iOS is behind the view
- Searching and updating Item Issue
- modalTitleStyle being overwritten
- Can't select item in multi choices when search text input is focused and keyboard open HOT 1
- Not switching DarkMode when rendered
- overriding the ui HOT 3
- If i do truncated string so why the left string is not getting for the search result.
- if i delete string from the back so i did not get data HOT 1
- Changing Icon Color "tintColor" gives error HOT 2
- Custom Value after clicking the dropdown items.
- Search string in Searchable picker is not cleared
- Picker should have Label option
- "loading" is not working when "addCustomItem" is set to true.
- How to update the colour of view separator
- dropdown list conflict with below View HOT 5
- search and label fields HOT 1
- When in landscape mode, the dropdown can appear off screen
- Accessibility Issues
- react-native-gesture-handler dependency resolution issues
- measureInWindow returns wrong value on Android
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-dropdown-picker.