onChangeItem not getting triggerred and items in scrollview don't scroll

[abdullateef97]

Describe the bug

1. The onChangeItem function is not been triggered
2. When the items are much it doesn't scroll

To Reproduce
Here is my picker component

            items={items}
            defaultValue={this.state.activeValue}
            containerStyle={{
              flex: 1,
              height: getResponsiveHeight(50),
            }}
            style={{
              backgroundColor: 'rgba(151, 151, 151, 0.05)',
            }}
            dropDownStyle={{
              backgroundColor: 'rgba(151, 151, 151, 0.05)',
            }}
            placeholder={placeholder}
            itemStyle={{justifyContent: 'flex-start'}}
            labelStyle={styles.inputStyle}
            arrowColor={'#C8DAFF'}
            zIndex={200}
            onOpen={() => this.setState({open: true})}
            onClose={() => this.setState({open: false})}
            disabled={false}
            scrollViewProps={{
              scrollEnabled: true,
              showsVerticalScrollIndicator: true,
              horizontal: false,
              // style: {flex: 1, flexDirection: 'column'},
              // contentContainerStyle: {alignItems: 'flex-start', flexDirection: 'column'},
            }}
            dropDownMaxHeight={200}
            onChangeItem={(item) => {
              console.log({item});
              this.setState({activeValue: item.value});
              onChangeItem(item);
            }}
          />```
and this is how it's been used
```<Picker
                  placeholder={'Gender'}
                  items={[
                    {label: 'Male', value: 'male'},
                    {label: 'Female', value: 'female'},
                    {label: 'Male1', value: 'male1'},
                    {label: 'Female1', value: 'fem1ale'},
                    {label: 'Male11', value: 'male2'},
                    {label: 'Female11', value: 'fem2ale'},
                    {label: 'Male', value: 'male3'},
                    {label: 'Female', value: 'fem3ale'},
                    {label: 'Male2', value: 'male4'},
                    {label: 'Female2', value: 'fem4ale'},
                    {label: 'Male22', value: 'male5'},
                    {label: 'Female22', value: 'fem5ale'},
                    {label: 'Male', value: 'male6'},
                    {label: 'Female', value: 'fem6ale'},
                    {label: 'Male12', value: 'male7'},
                    {label: 'Female12', value: 'fem7ale'},
                    {label: 'Male123', value: 'male8'},
                    {label: 'Female123', value: 'fem8ale'},
                    {label: 'Male', value: 'male9'},
                    {label: 'Female', value: 'fem9ale'},
                    {label: 'Male3', value: 'mal10e'},
                    {label: 'Female3', value: 'fem10ale'},
                    {label: 'Male33', value: 'male11'},
                    {label: 'Female33', value: 'fema11le'},
                    {label: 'Male333', value: 'male12'},
                    {label: 'Female333', value: 'fema12le'},
                    {label: 'Male', value: 'male13'},
                    {label: 'Female', value: 'fema13le'},
                  ]}
                  // activeValue={'female'}
                  // editable={false}
                />```


**Expected behavior**
onClickItem should be triggered and items should be scrollable

**Screenshots**


**Info (please complete the following information):**
 - OS: [Android]
 - Package version [^3.6.7]

**Edited**
[Snack reproduction link](https://snack.expo.io/@bellemeee/dropdown-picker-issue)
Works on snack, but doesn't work on emulator or real device

[waohwaohwaoh]

same problem, any solution pls

[hossein-zare]

@abdullateef97 @waohwaohwaoh
Hello,
Please reproduce the behavior on Snack.
I guess it's a zIndex conflict.

[abdullateef97]

@hossein-zare this is snack link it works well on snack with the smae code I'm using to test on a real device, but it doesn't work on a real device, is expo needed for it to work

[hossein-zare]

Your styles.inputContainerStyle contains illegal props.

DropDownPicker wrapped by <View style={{backgroundColor: ..., border[...]: ..., elevation: ...}}>
These props will make your dropdown untouchable.
Remove all the backgroundColor, border[...], elevation, ... style properties from the parent element.
#40 (comment)

https://github.com/hossein-zare/react-native-dropdown-picker#zindex-conflicts-untouchable-items-overlapping-pickers

[abdullateef97]

yo @hossein-zare thanks man, works fine. I removed all the wrapper divs. also made use of the comment on containerStyle and style