Sometimes picker does not respond on click (iOS only)

[redko-o]

Sometimes picker does not respond on click.

When clicking the first time on picker it always responds properly. Then next clicks do not make picker to popup. On Android works well.

Reproduces on iOS emulator and device

Steps to reproduce the behavior:

Expected behavior

Expecting picker reacts on touches all time.

Screenshots

n/a

Additional details

• Device: iPhone7 or iPhone 11 (emulator)
• OS: iOS
• react-native-picker-select version: [e.g. 4.3.0]
• react-native version: 0.61.5
• react version: 16.9.0

Reproduction code sample

<View style={styles.row} >
  <RNPickerSelect
    placeholder={{}}
    onValueChange={(value) => onValueChange(value)}
    items={data}
    style={{
      ...pickerSelectStyles,
      iconContainer: {
        top: 16,
        right: 16,
      },
      placeholderColor: "#000000"
    }}
    Icon={() => {
      return <Image style={styles.picker_img} source={{uri: 'arrow_drop'}} />;
    }}
  />
</View>

[redko-o]

Reproduce on Expo (iOS emulator)
https://snack.expo.io/FrJttBHAj

Sourcecode

import React from 'react';
import {
  Button,
  Text,
  TextInput,
  Platform,
  ScrollView,
  StyleSheet,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import { Chevron } from 'react-native-shapes';
import { Ionicons } from '@expo/vector-icons';
import RNPickerSelect, { defaultStyles } from 'react-native-picker-select';
// import RNPickerSelect, { defaultStyles } from './debug';

const sports = [
  {
    label: 'Football',
    value: 'football',
  },
  {
    label: 'Baseball',
    value: 'baseball',
  },
  {
    label: 'Hockey',
    value: 'hockey',
  },
];

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.inputRefs = {
      firstTextInput: null,
      favSport0: null,
      favSport1: null,
      lastTextInput: null,
      favSport5: null,
    };

    this.state = {
      numbers: [
        {
          label: '1',
          value: 1,
          color: 'orange',
        },
        {
          label: '2',
          value: 2,
          color: 'green',
        },
      ],
      favSport0: undefined,
      favSport1: undefined,
      favSport2: undefined,
      favSport3: undefined,
      favSport4: 'baseball',
      previousFavSport5: undefined,
      favSport5: null,
      favNumber: undefined,
    };

  }

  render() {
    const placeholder = {
      label: 'Select a sport...',
      value: null,
      color: '#9EA0A4',
    };

    return (
      <View style={styles.container}>
        <View style={styles.row} >
          <Text style={[styles.subtitle, {marginBottom: -24, marginLeft: 16}]}>Sports
            <Text style={styles.required}>{"*"}</Text>
          </Text>
          <RNPickerSelect
            placeholder={{}}
            onValueChange={value => {
                this.setState({
                  favSport0: value,
                });
              }}
            items={sports}
            style={{
              ...pickerSelectStyles,
              iconContainer: {
                top: 24,
                right: 16,
              },
              placeholderColor: "#000000"
            }}
              Icon={() => {
                return <Chevron size={1.5} color="gray" />;
              }}
          />
        </View> 
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 54,
    paddingHorizontal: 16,
  },
  row: {  
    flex: 1,
    minHeight: 56,
    maxHeight: 56,
    width: '100%',
    borderRadius: 4,
    marginBottom: 16,
    justifyContent: 'center',
    paddingVertical: 8,
    backgroundColor: 'rgba(0, 0, 0, 0.07)',
    borderBottomWidth: 2,
    borderBottomColor: '#00BCD4'
  },
  subtitle: {
    color: 'rgba(0, 0, 0, 0.3)',
    fontSize: 12,
    fontFamily: 'Roboto-Regular',
  },
  required: {
    color: 'rgba(230, 57, 53, 0.3)'
  },
});

const pickerSelectStyles = StyleSheet.create({
  inputIOS: {    
    paddingHorizontal: 16,
    fontSize: 16,
    flex: 1,
    minHeight: 56,
    maxHeight: 56,
    width: '100%',
    borderRadius: 4,
    marginBottom: 16,    
    justifyContent: 'center',
    paddingTop: 18,
  },
  viewContainer: {
    flex: 1,
  },
  inputAndroid: {
    marginLeft: 8,
    marginTop: 6,
    fontSize: 16,
    flex: 1,
    minHeight: 56,
    maxHeight: 56,
    width: '100%',
    borderRadius: 4,
    marginBottom: 16,
    justifyContent: 'center',
    paddingTop: 18,
  },
  placeholder: {color: "#000000"},
});

[Kamalnrf]

Same issue. I see this happening in Android as well.

[nickmcmillan]

I'm finding this predominantly occurs when tapping on the Icon.

[ideopunk]

This is an issue for me on iOS as well. I'm using an Icon for taps. The picker responds to the first click, but after that it requires multiple clicks to pull up the menu again.

[slolkunchik]

the same

[AdamLee321]

I had this issue too and noticed that the view that triggers the touch event is not the same width as the container. To resolve this I added a backgroundColor into inputAndroid and inputIOS to see the problem and had to set the width myself.

Additional note for some reason set width: '100%' didn't fix the width I had to add a value which I got using -> const {width, height} = Dimensions.get('screen')

[renorari]

I don't know some reason, but adding overflow:hidden to the style of inputIOSContainer improved it…
Why?

[panvourtsis]

same here, first render is perfect then it doesn't work. I am on v9.3.1 and rn 0.76.6

[bjCorrosionInstruments]

After closing the modal there's a delay as to when the picker is clickable again. @renorari thanks for the workaround to fix the "clickable area" issue. Worked in 0.76.5.