In iOS, Dropdown is overlapping with the below content

[hossein-zare]

In iOS, Dropdown is overlapping with the below content

[erald14]

Useless library!

[hossein-zare]

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.

[GangadharG]

Tried both. Both failed

[hossein-zare]

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.

[gillgill12]

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>

[hossein-zare]

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.

[hossein-zare]

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

[razzium]

Hey !
Same problem here...

[hossein-zare]

Hello @razzium
@gillgill12 @GangadharG

Please check this out: (Beta Version)

npm install [email protected]

[razzium]

Same problem with the "3.0.1-beta.0" version...

[hossein-zare]

@razzium
Create an Expo Snack and share the link.
https://snack.expo.io/

[razzium]

Ok i do this when i have time (in 4-5 hours).

[hossein-zare]

Ready Environment with react-native-dropdown-picker installed & FlatList as described in the issues.
https://snack.expo.io/21EPiOOPb

[razzium]

Here is the snack to reproduce :
https://snack.expo.io/@rrazzi-digital-paca/dropdown-overlapping-ios

[razzium]

(you can notice that it's work fine on android)

[hossein-zare]

@razzium
I made a minor change in the snack, Check it out.
https://snack.expo.io/5I9RQVTzn

[razzium]

OK it works :)

But is this the optimal solution ?

(do you gonna push the new release ?)

[hossein-zare]

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.

[erald14]

So what is the solution?