Picker items on iOS modal does not respect SafeArea when device is horizontal

I have gone through these following points

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

  • node: v10.16.0
  • npm: 6.9.0 (using yarn)
  • yarn: 1.17.3
  • react-native: 0.61.2
  • native-base: 2.13.8
  • xcode: 11.2

not using expo

Expected behaviour

The picker items should not be displayed beneath screen space that would be outside of a SafeAreaView.

Actual behaviour

image

Steps to reproduce

import { View, Picker, Container, Content, Item, Label } from 'native-base';
import React from 'react';
import { SafeAreaView } from 'react-native';

export function SomeApp() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <Container style={{ flex: 1 }}>
          <Content>
            <Item picker>
              <Label>{'Pick an option'}</Label>
              <Picker>
                {Array(10)
                  .fill(null)
                  .map((_, i) => (
                    <Picker.Item
                      label={'Item ' + (i + 1) + ''}
                      value={'Item ' + (i + 1)}
                      key={i}
                    />
                  ))}
              </Picker>
            </Item>
          </Content>
        </Container>
      </View>
    </SafeAreaView>
  );
}

Is the bug present in both iOS and Android or in any one of them?

Only tested on iOS because of SafeAreaView on iPhone X and forward.

Any other additional info which would help us debug the issue quicker.

###Important

If you want your issue to be looked at quicker, attach a snack reproducible with your issue. Makes it easier for us!

  • I can’t find a way to rotate the device in a snack to a horizontal position.

1 possible answer(s) on “Picker items on iOS modal does not respect SafeArea when device is horizontal