Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Describe the bug

The onChangeItem function is not been triggered
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

Issue Analytics

State:
Created 3 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

abdullateef97commented, Aug 30, 2020

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

0reactions

hossein-zarecommented, Aug 30, 2020

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. https://github.com/hossein-zare/react-native-dropdown-picker/issues/40#issuecomment-651744446

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