React-native-picker-select: Picker modal is triggering from a press anywhere on the screen

Created on 11 Dec 2018  路  5Comments  路  Source: lawnstarter/react-native-picker-select

Describe the bug
Pressing anywhere on the screen (except my TabNavigator) is causing the Selection modal to appear.

To Reproduce

            <Picker
              hideIcon={true}
              items={[ {label: '+1', value: '+1'}, {label: '+64', value: '+64'} ]}
              onValueChange={(value, idx) => this.handleCodeSelection(value, idx)}
              placeholder={{}}
              style={{inputAndroid: { color: colors.white, height: 50, width: 50, backgroundColor: colors.white }}}
              useNativeAndroidPickerStyle={false}
            />

Expected behavior
Only open the Selection modal when the Picker element is pressed.

Smartphone (please complete the following information):

  • Device: Pixel 2XL
  • OS: Android v9
  • react-native-picker-select version: 5.1.1
  • react-native version: 0.57.7
  • react version: 16.6.0-alpha.8af6728

Reproduction and/or code sample
Provide a link to a reproduction of this issue on https://snack.expo.io or a good explanation on why you can not. Not including a link will result in a significant delay in our ability to address this issue.

question

Most helpful comment

To solve this problem you should only add the following

聽聽 viewContainer: { 聽聽聽聽 position: 'relative', 聽聽 }, 聽聽 headlessAndroidPicker: { 聽聽聽聽 left: 0, 聽聽聽聽 width: '100%', 聽聽聽聽 height: '100%', 聽聽 },

He painted the blue background to show what happens with headlessAndroidPicker

https://imgur.com/a/5v6gDnE

All 5 comments

Can you attach a snack.expo.io reproduction of the issue?

Hi @Friendly-Robot. I had the same problem as you. It's weird, but when I pass style for headlessAndroidContainer with backgroundColor property it's no longer reproducing. Maybe it will help you too.

<Picker
    ...
    style={{
       headlessAndroidContainer: Styles.headlessAndroidContainer
    }}
/>
...
  headlessAndroidContainer: {
    backgroundColor: 'transparent',
  },

To solve this problem you should only add the following

聽聽 viewContainer: { 聽聽聽聽 position: 'relative', 聽聽 }, 聽聽 headlessAndroidPicker: { 聽聽聽聽 left: 0, 聽聽聽聽 width: '100%', 聽聽聽聽 height: '100%', 聽聽 },

He painted the blue background to show what happens with headlessAndroidPicker

https://imgur.com/a/5v6gDnE

Possibly solved by #128

@Friendly-Robot @VKravchukEleks @apolineaire - can you check if v5.2.3 fixes the issue? (thanks @andercard )

Was this page helpful?
0 / 5 - 0 ratings