toggle not working in Android.

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>
      </>

[bacarybruno]

@hasnaina-entertainer this should work. As per this commit https://github.com/react-native-picker/picker/pull/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<undefined>; }’ is not assignable to type ‘CustomPickerProps’. Also, I tried @bacarybruno solution and I always get Cannot read properly "openPicker" of null.