CODEWITHSUNDEEP
reactjsreact-nativenative-base
Mani Shankar
Mani Shankar

Reputation: 39

Native base Picker Icon is not clickable

The caret icon of picker in react native base is not responding properly on click. Sometimes on clicking exactly on caret icon , it responds , sometimes it does not .

Upvotes: 1

Views: 2907

Answers (2)

Abdul Karim Khan
Abdul Karim Khan

Reputation: 4935

This works fine: 

import { Picker,Item } from 'native-base';

<View>
<Item rounded style={[styles.inputStyle, { marginTop: 6 }]}>
      <Picker
          mode="dropdown"
          iosIcon={<Icon name="arrow-down" />}
          placeholderStyle={{ color: "#bfc6ea" }}
          placeholderTextColor="white" 
          placeholderIconColor="#007aff"
          style={[styles.inputmain, {height: 44}]}
          selectedValue={this.state.selected}
          onValueChange={this.onValueChange.bind(this)}
      >
          <Picker.Item label="Select Gender" value=""/>
          <Picker.Item label="Male" value="male"/>
          <Picker.Item label="Female" value="female"/>
          <Picker.Item label="Other" value="other"/>
      </Picker>
 </Item>
 </View>

Style: 

inputStyle: {
    borderColor: "transparent",
    justifyContent: "center",
    alignSelf: "center",
    width: Metrics.WIDTH * 0.8
  },
  inputmain: {
    justifyContent: "center",
    alignSelf: "center",
    paddingTop: 7,
    paddingBottom: 7,
    paddingLeft: 20,
    borderRadius: 40,
    width: Metrics.WIDTH * 0.8,
    backgroundColor: "rgba(102,102,102,0.6)"
  },

Upvotes: 1

slavlazar
slavlazar

Reputation: 224

For anyone running into this issue - the problem with me was that I was wrapping my picker inside an Item input field (with the picker prop set to true - as outlined in the official NativeBase docs) - which was causing the icon caret on Android to be not tappable.

import { Item, Picker } from 'native-base';

<Item picker style={styles.picker}>
    <Picker .... />
</Item>

Removing this Item input field and replacing it with a View (and applying the appropriate styling) fixed this issue.

import { View } from 'react-native';
import { Picker } from 'native-base';

<View style={styles.picker}>
    <Picker ... />
</View>

Upvotes: 7

Related Questions