toggle not working in Android.

[hasn-ab]

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

1. Use TouchableWithoutFeedback
2. onPress I am toggling with this.pickerRef.current.togglePicker(false)

Expected behavior

Should open the picker

Screenshots

null

Additional details

• Device: Android
• OS: 10
• react-native-picker-select version: 8.0.4
• react-native version: 0.63.3
• expo sdk version: [ n/a]

Reproduction and/or code sample

<RNPickerSelect
          disabled={!editable}
          onValueChange={(v) => this.handleValueChange(v)}
          value={selectedValue}
          style={{ maxHeight: 0 }}
          ref={this.pickerRef}
          onUpArrow={this.onArrowUp}
          InputAccessoryView={this.InputAccessoryView}
          onDownArrow={this.onDownArrow}
          style={{
            chevronUp: {
              fontSize: 0,
              color: 'white',
            },
          }}
          items={values}>
          <View style={{ height: 0 }}></View>
        </RNPickerSelect>

        <TouchableWithoutFeedback
          onPress={() => {
            console.log('toogle');
            this.pickerRef.current.togglePicker(false);
          }}>
          <View style={[styles.inputContainer, style]}>
            {selectedValue.trim().length > 0 ? (
              <>
                <Text style={styles.labelStyle}>{placeholder}</Text>
                <Text style={styles.textInputStyle}>{label}</Text>
              </>
            ) : (
              <>
                <Text style={styles.labelStyle}>{placeholder}</Text>
              </>
            )}
          </View>
        </TouchableWithoutFeedback>
      </>

[vladcorn]

Also you can reproduce this bug with any onPress function

[nakullondhe]

I have the same issue, can anyone help?

[NvIGA]

I have the same issue

[Lucas-Alvino]

I have the same issue

[bacarybruno]

@hasnaina-entertainer this should work.
As per this commit react-native-picker/picker#258 (thanks @mateusz1913)

     <>
        <RNPickerSelect
          disabled={!editable}
          onValueChange={(v) => this.handleValueChange(v)}
          value={selectedValue}
          style={{ maxHeight: 0 }}
          pickerProps={{ ref: this.pickerRef }}
          ref={this.pickerRef}
          onUpArrow={this.onArrowUp}
          InputAccessoryView={this.InputAccessoryView}
          onDownArrow={this.onDownArrow}
          style={{
            chevronUp: {
              fontSize: 0,
              color: 'white',
            },
          }}
          items={values}>
          <View style={{ height: 0 }}></View>
        </RNPickerSelect>

        <TouchableWithoutFeedback onPress={() => { this.pickerRef.current.focus(); }}>
          {content}
        </TouchableWithoutFeedback>
     </>

Short answer (Android only)

<RNPickerSelect
   {...otherProps}
   pickerProps={{ ref: this.pickerRef }}
/>

and then

<TouchableWithoutFeedback onPress={this.pickerRef.current.focus}>
  {content}
</TouchableWithoutFeedback>

To make this work for Android & iOS you can do something like this

class PickerSelect extends React.Component {
  pickerRef = React.createRef()

  openPicker() {
    if (Platform.OS === 'android') {
      this.pickerRef.current.focus()
    } else {
      this.pickerRef.current.togglePicker(true)
    }
  }

  render() {
    const { onValueChange, items, value } = this.props
    return (
      <RNPickerSelect
        onValueChange={onValueChange}
        items={items}
        style={{ viewContainer: { height: 0 } }}
        ref={Platform.OS === 'ios' ? this.pickerRef : null}
        pickerProps={{ ref: Platform.OS === 'android' ? this.pickerRef : null }}
        value={value}
      />
    )
  }
}

and then

const pickerRef = useRef();

<PickerSelect
  ref={pickerRef}
  items={values}
/>

<TouchableWithoutFeedback onPress={pickerRef.current.openPicker}>
  {content}
</TouchableWithoutFeedback>

[valeriashpiner]

I got message for pickerProps={{ ref: this.pickerRef }}: Type '{ ref: React.MutableRefObject; }' is not assignable to type 'CustomPickerProps'.
Also, I tried @bacarybruno solution and I always get Cannot read properly "openPicker" of null.

[romanmatus]

Hello, this problem still presist on android devices, or is it only for me ?

const handlePickerToggle = () => {
if (dropDownRef.current) {
dropDownRef.current.togglePicker();
}
};

      <TouchableOpacity className="bg-blue-200" onPress={handlePickerToggle}>
      <View className="h-full flex-row items-center">
        <Image
          className="h-6 w-6 mr-2 ml-2"
          source={getImageSource(nationalPrefix)}
        />
        <DropDown 
          ref={dropDownRef}
          fixAndroidTouchableBug={true}
          useNativeAndroidPickerStyle={false}
          placeholder={{
            label: ".",
            value: ".",
            inputLabel: ".",
          }}
          onValueChange={(value) => {
            setNationalPrefix(value);
            handleValueChange();
          }}
          style={pickerStyle}
          items={[
            { label: "a", value: "+4", inputLabel: "+4" },
            { label: "b", value: "+3", inputLabel: "+3" },
          ]}
          
        />
        
        <Feather
          className="ml-2 mr-2"
          name={"chevron-down"}
          size={20}
          color="#899295"
        />
      </View>
    </TouchableOpacity>

it works perfectly on ios, but on android it is working only if you press inside red square.

any advice please?

[lfkwtz]

#22

[Ke0x]

The solution above doesnt work for me,
No matter what i tried i cant open the Picker with the focus function, i dont have any error.

[vahidd]

@Ke0x

pickerRef.current.togglePicker(true);