Bottom margin of around 40 in iOS when using Select or OverflowMenu components

[trurohit]

🐛 Bug Report

In iOS devices, we're seeing a margin-bottom of 40 between the component and its child elements. This is manageable in OverflowMenu as we can give a margin-bottom of -40 but when using a Select component, we're unable to manage this and we're seeing a space of 40 between the dropdown and options

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.0.0
@ui-kitten/components	5.0.0

Environment information

  System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 12.16.1 - /usr/local/bin/node
    Yarn: 1.6.0 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.7, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6392135
    Xcode: 11.7/11E801a - /usr/bin/xcodebuild
  npmPackages:
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    react-native-cli: 2.0.1

[be90728]

maybe you can go to node_modules\@ui-kitten\components\ui\select\select.component.js and set the "popover" stylesheet to

popover: {
        overflow: 'hidden',
        top: -40
    },

[artyorsh]

I would suggest looking for the correct StatusBar implementation. Please see #743

[m4ttheweric]

I am seeing this happen in iOS 14.2 except the margin is around 24 on my iPad and about 40 on iPhone 11.

Follow up: So for the I was able to solve this by doing this in the style:

{ top: 0 - safeAreaInsets.top }

The safeAreaInsets is from the useSafeAreaInsets. But the issue still happens in the and there's no place to alter the style for that component. As this is iOS only, I have to use conditional code based on Platform.

JustinRohweller commented 3 years ago

Hey I ran into this issue on 5.0.0. Solved it by adjusting the mapping for the popover right before using the mapping. As in, added: if (Platform.OS === "ios") { mapping.components.Popover.appearances.default.mapping.top = 0 - insets.top; } directly before calling <ApplicationProvider. Also added "top": { "type": "number" } to mapping.components.Popover.meta.parameters. I don't use the actual Popover component in my app so it's possible it messes that component up. Hopefully this helps someone else.

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[JustinRohweller]

Hey I ran into this issue on 5.0.0. Solved it by adjusting the mapping for the popover right before using the mapping. As in, added: if (Platform.OS === "ios") { mapping.components.Popover.appearances.default.mapping.top = 0 - insets.top; } directly before calling <ApplicationProvider. Also added "top": { "type": "number" } to mapping.components.Popover.meta.parameters. I don't use the actual Popover component in my app so it's possible it messes that component up. Hopefully this helps someone else.