Nativebase: Picker on Android's Caret Icon is Not Clickable

[effortlesscoding]

When using Native Base's Picker, the caret icon is not clickable on Android.

On iOS, the caret is not showing at all.

react-native, react and native-base version

Using Expo's react native fork.

"expo": "^21.0.2",
"native-base": "^2.3.2",
"react": "^16.0.0-alpha.12",
"react-native": "https://github.com/expo/react-native/archive/sdk-21.0.2.tar.gz",

Expected behaviour

It shows a picker that is full width, as defined in styles.picker (width: '100%'), and you can open the options modal / dropdown by clicking anywhere within the "hitbox" of the picker.

Actual behaviour

The picker renders with a caret icon on the right on Android, and clicking on the caret does nothing.

Steps to reproduce (code snippet or screenshot)

<View style={styles.wrapper}>
      <Picker
        mode="dropdown"
        placeholder="Press to select a region"
        selectedValue={props.defaultValue}
        onValueChange={props.onValueChange}
        style={styles.picker}
      >
        {pickerItems}
      </Picker>
    </View>

Screenshot of emulator/device

Is the bug present in both ios and android or in any one of them?

Android OS 6.0.1

iOS is not showing the caret, at all.

Any other additional info which would help us debug the issue quicker.

[shivrajkumar]

@githubandrewd The Picker for Android is React Native Picker.. So if it works with React Native Picker, it should definitely work with Native Base Picker. And for iOS, you need to add the icon on your own if you need. There is no icon for Picker as per iOS guidelines, thus there is no icon with it in NativeBase.

[DaniilDem]

@githubandrewd Did you find solution?

[filippoitaliano]

@DaniilDem I had the same problem. I was wrapping the Picker component inside an Item to have the bordered input style. The problem was related to this choice.
Wrapping instead the Picker inside a normal View with custom style solved the "bug" enabling the tap handling even on the caret.

[TomBerriot]

I had the same problem, thank you @filippoitaliano
Don't understand why this issue has been closed @shivrajkumar

[Aequitas737]

Also experiencing this bug, not sure what you mean, @filippoitaliano could you provide code examples?

I tried removing the styling from the views but it didn't change the carat's clickability

[filippoitaliano]

@Aequitas737 Wrapping NativeBase Picker in a NativeBase Item make the caret un-clickable, for my experience. To enable the click on the caret I use the Picker wrapped in a custom View (or basicly NOT wrapped in an Item). The custom style of my View is probably irrelevant, becouse the issue is related to some logic/style of the NativeBase Item that break the caret.

This is my working custom component to render the Picker with the roundedStyle. It's a bit complex couse has animations but the point is that it works fine if I DON'T use the NativeBase Item that i'd rather to use to get the default NativeBase rounded style on the inset Picker:

<Animated.View
  style={[styles.roundedItem, wrapperStyle, animated ? this.buildAnimation() : null]}
>
  <TouchableHighlight
    disabled={enabled}
    onPress={onNotPermittedFocus}
    underlayColor="transparent"
    style={{ flex: 1, justifyContent: 'center' }}
  >
    <View pointerEvents={enabled ? 'auto' : 'none'}>
      <Picker
        enabled={enabled}
        iosHeader={iosHeader}
        selectedValue={selectedValue}
        onValueChange={onValueChange}
        textStyle={Platform.OS === 'ios' ? pickerStyle : null}
        style={Platform.OS === 'android' ? pickerStyle : null}
        returnKeyType={returnKeyType}
        headerBackButtonText={tC('common:indietro')}
      >
        {children}
      </Picker>
    </View>
  </TouchableHighlight>
  {smartButton && (
    <Button light onPress={smartButton.onPress} style={styles.smartButton}>
      <Icon
        type={smartButton.iconType}
        name={smartButton.iconName}
        style={[buttonInnerIconDefaultStyle, styles.smartButtonIcon]}
      />
    </Button>
  )}
</Animated.View>

What I'd rather to have (excluding animations):

<Item rounded>
    <Picker
         enabled={enabled}
         ...
    >
</Item>

EDIT: Right now I found a prop picker avaiable on the Item component. Probably it fixes something? I have to try it. See https://docs.nativebase.io/Components.html#Form.

[Aequitas737]

@filippoitaliano ah my use case is slightly different, I thought was similar because you mentioned item but I was actually using Picker.Item like so:

            <Picker
                selectedValue={this.props.selected.value}
                onValueChange={value => this.onSelect(value)}
                mode='dropdown'
                style={this.props.selectContainerStyle}
            >
                {this.props.items.map(item => (
                    <Picker.Item
                        key={item.value}
                        label={item.label}
                        value={item.value}
                    />
                ))}
            </Picker>

And this is giving me the issue of the carat not being clickable. What is children in your case?

[filippoitaliano]

@Aequitas737 I use Picker.Item as children, exactly like you.

[WaterCityFlame]

@filippoitaliano thank you, you have saved me

(if anyone is wondering: no, the 'picker' attribute didn't help. I wound up making my own styles to make it look right)

[dhcmega]

In case it helps someone/any one

https://stackoverflow.com/questions/53278113/native-base-picker-icon-is-not-clickable