All works fine on android but in iOS my picker doesn't open. I have tried to change style, remove style, but nothing works.

My picker :

<View style={[styles.pickerWrapper, styles.marge]}>
                                <RNPickerSelect
                                    placeholder={{}}
                                    onValueChange={(itemValue) => setSelectedTypeTest(itemValue)}
                                    items={Constants.getTypeTest().map((test) => ({
                                        label: t(test.label),
                                        value: test.value,
                                    }))}
                                    style={{
                                        inputAndroid: styles.inputAndroid,
                                        inputIOS: styles.inputIOS,
                                        viewContainer: styles.viewContainer,
                                    }}
                                    value={selectedTypePlanet}
                                    useNativeAndroidPickerStyle={false}
                                    doneText="OK"
                                />
                            </View>

Style for iOS :

inputIOS: {
    height: 30,
    paddingTop: 0,
    paddingBottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
    backgroundColor: '#074183',
    color: 'aliceblue',
    borderRadius: 50,
    borderWidth: 1,
    borderColor: 'aliceblue',
    paddingHorizontal: 10,
    lineHeight: 15,
    width: width * 0.4,
    fontWeight: 500,
},

Style for container:

 viewContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: 50,
    width: '100%',
},

I have seen on other topics: "overflow: 'hidden'" can resolve it, but don't change something for me.

All works fine on android but in iOS my picker doesn't open. I have tried to change style, remove style, but nothing works.

My picker :

<View style={[styles.pickerWrapper, styles.marge]}>
                                <RNPickerSelect
                                    placeholder={{}}
                                    onValueChange={(itemValue) => setSelectedTypeTest(itemValue)}
                                    items={Constants.getTypeTest().map((test) => ({
                                        label: t(test.label),
                                        value: test.value,
                                    }))}
                                    style={{
                                        inputAndroid: styles.inputAndroid,
                                        inputIOS: styles.inputIOS,
                                        viewContainer: styles.viewContainer,
                                    }}
                                    value={selectedTypePlanet}
                                    useNativeAndroidPickerStyle={false}
                                    doneText="OK"
                                />
                            </View>

Style for iOS :

inputIOS: {
    height: 30,
    paddingTop: 0,
    paddingBottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
    backgroundColor: '#074183',
    color: 'aliceblue',
    borderRadius: 50,
    borderWidth: 1,
    borderColor: 'aliceblue',
    paddingHorizontal: 10,
    lineHeight: 15,
    width: width * 0.4,
    fontWeight: 500,
},

Style for container:

 viewContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: 50,
    width: '100%',
},

I have seen on other topics: "overflow: 'hidden'" can resolve it, but don't change something for me.

• ios
• react-native
• picker

1 Answer 1

I haven't solved the problem, but I found a workaround that works well:

react-native-dropdown-picker