Picker Modal not opening on ios with the new architecture

[THE-REK]

Library version: 9.3.1
React native version: 0.75.4, new architecture enabled

#542
When I do this I can click on the picker, but the modal that opens goes to the top of the screen and is not visible.

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

Add screenshots to help explain your problem. If screenshots aren't applicable to this issue, write "n/a".

Additional details

• Device: Iphone 15
• OS: [17.4]
• react-native-picker-select version: [9.3.1]
• react-native version: [0.75.4]

[DeepakM02]

pass the mode. it should work

pickerProps={{
mode: 'dropdown',
}}

[THE-REK]

renderIOS() {
    const { style, modalProps, pickerProps, touchableWrapperProps } = this.props;
    const { animationType, orientation, selectedItem, showPicker } = this.state;

    return (
      <View style={[defaultStyles.viewContainer, style.viewContainer]}>
        <TouchableOpacity
          testID="ios_touchable_wrapper"
          onPress={() => {
            this.togglePicker(true);
          }}
          activeOpacity={1}
          {...touchableWrapperProps}
        >
          {this.renderTextInputOrChildren()}
        </TouchableOpacity>
        <View>
        <Modal
          testID="ios_modal"
          visible={showPicker}
          transparent
          animationType={animationType}
          supportedOrientations={['portrait', 'landscape']}
          onOrientationChange={this.onOrientationChange}
          {...modalProps}
        >
          <TouchableOpacity
            style={[defaultStyles.modalViewTop, style.modalViewTop]}
            testID="ios_modal_top"
            onPress={() => {
              this.togglePicker(true);
            }}
          />
          {this.renderInputAccessoryView()}
          <View
            style={[
              defaultStyles.modalViewBottom,
              this.isDarkTheme() ? defaultStyles.modalViewBottomDark : {},
              { height: orientation === 'portrait' ? 215 : 162 },
              this.isDarkTheme() ? style.modalViewBottomDark : style.modalViewBottom,
            ]}
          >
            <Picker
              testID="ios_picker"
              onValueChange={this.onValueChange}
              selectedValue={selectedItem.value}
              {...pickerProps}
            >
              {this.renderPickerItems()}
            </Picker>
          </View>
        </Modal>
        </View>
      </View>
    );
  }

// Wrapping the Modal with a View resolves the issue.

[tonynnabs]

Any fix for this issue please? Doesn't work with expo 52 and the new architecture. Use to work for the previous react architecture and expo. Does it have anything to do with the Bridgeless Mode?

<RNPickerSelect onValueChange={onChangeText} value={value} style={pickerSelectStyles} useNativeAndroidPickerStyle={false} items={data} />

[BrandonJFrey]

I am having the same issue

[Dofamen]

I have the same issue here

[Anassedemnati]

I am having the same issue

[itseriqq]

Same issue here.

[itseriqq]

Actually, when building my app I got those logs on expo doctor. I didn't try at all updating those packages to the version expo doctor recommended cause right now my app is not launched to iOS yet, I just found the issue cuz I use expo go on my iOS smartphone to test my app, but I'll take a try later on upgrading to those versions, but before I'll check if they're dependent of each other.

[gustavomanolo]

Meanwhile, until this pull request #542 , you can set the following:
style={{ inputIOSContainer: { pointerEvents: "none" } }}
This worked for me, hope it helps.

[itseriqq]

Meanwhile, until this pull request #542 , you can set the following: style={{ inputIOSContainer: { pointerEvents: "none" } }} This worked for me, hope it helps.

this worked for me too.
thanks!

[Katznicho]

I have a similar issue and nothing has worked for me as per now

[mtapiafdez]

Same here @Katznicho

[Jeferson-BSI]

Adding an icon worked for me:

<RNPickerSelect
  style={selected ? customStyle : style}
  placeholder={{
    label: label ?? 'Selecionar',
  }}
  doneText="Selecionar"
  useNativeAndroidPickerStyle={false}
  pickerProps={{ mode: 'dropdown' }}
  Icon={() => <Feather name="chevron-down" size={24} color="#707070" />}
  {...rest}
/>