Not working for IOS

[sravanpronteff]

<Picker selectedValue={selectedLanguage} onValueChange={(itemValue, itemIndex) => setSelectedLanguage(itemValue) }> <Picker.Item label="Java" value="java" /> <Picker.Item label="JavaScript" value="js" /> </Picker>

not working on IOS from expo

[deggertsen]

Experiencing this problem as well.

<Picker
    selectedValue={selectedOption.value}
    onValueChange={(itemValue, itemIndex) =>
        onSelect(options.filter(option => option.value === itemValue)[0])
    }
    style={headerStyle}
  >
    {options.map((option, index) => {
      return (
        <Picker.Item
          key={option.value + option.id}
          label={option.value}
          value={option.value}
          style={{
            ...baseStyles,
          }}
        />
      )
    })}
  </Picker>

Looks like this in IOS and pressing or any other gesture doesn't seem to do anything. If I remove the styles then it doesn't show anything at all. Seems to work just fine on web and Android. IPhone 11 with IOS 13.4

[deggertsen]

I removed some padding I had in the styles and that seems to have fixed it to some degree. I can at least see options now even though the picker boxes are still huge. I think what remains of my issue is simply that it seems like IOS picker doesn't show up as a modal as mentioned in this issue: #184

[florianf22]

experiencing the same issue. can't get it working no matter what

[ghost]

Same Problem here

[davormaric53]

Same problem here. I have discovered that the style property alignItems: 'center' is causing some problems. With it only the background colour is shown. Without it the dialogue list is shown even if the mode is set to the dropdown. On Android, it looks fine

[tendaimaswaya]

Facing the same issue. Has anyone found a solution to this yet?

[PoojaPiprotar]

Facing issue in IOS, in android it's working fine. 'React/UIView+React.h' file not found

[CodingLime]

~Also facing the same issue in iOS. On Android it's working normally.~ ~Any tips/workarounds for now ?~ Correction, it's working. After some testing around, my problem was the spacing/flex of using it inside a ScrollView.

Although I tested in a simple View and wasn't showing up, but removing the alignItems: 'center' like recommended above made it work, and after that I can add it back again and it's still working, even after restarting the app. So i'm kind lost on what it made work in the end, sorry to everyone.

[yesIamFaded]

Is there some more information? I removed some if the styles but it still does not work it wont even show the pickers on IOS, Android is perfect.

[pedro-ernesto]

Hey guys!

Had some style issues, this made it work for me (using styled-components):

Removed flex-direction, justify-content and align-items

Here's my code:

import styled from "styled-components/native";

import { Picker } from "@react-native-picker/picker";

import { RFValue } from "react-native-responsive-fontsize";

interface ContainerProps {
  size?:number;
}

export const Container = styled(Picker)<ContainerProps>`
  background-color: ${({theme}) => theme.colors.background};
  width:${({size}) => size ? size : 48}%;
  border-radius: 5px;
  margin-bottom: ${RFValue(15)}px;
`;

[bytesagar]

Why isn't someone posting some real solution for this, this package doesn't work with IOS why is that. I tried everything.

[noemipisano96]

I ran in a similar issue. My project is managed with expo 44. While the app is running in Expo Client (locally or published in channels) everything works fine, but when I build an ipa or apk and install on device my app crashes.

Any solution?

[PaxLyj]

It seems like Picker on iOS need to be specified width. I just solved same issue just give width: '100%'.

[bytesagar]

@noemipisano96 yes installing react-native-picker/picker solved the issue for me.

[markedwards]

I also found that it was necessary to set itemStyle, because the default text color was the same as my background, so the text was invisible.

[jarig]

It actually exactly the same issue on Android too, if align-items: center is set on any of parent views (even transitively) - it doesn't show anything then.

One workaround is to wrap it with <View style={{ alignSelf: 'stretch' }}>, but then it might become misaligned with the reset stuff