Autocomplete - The option fields are overflow above the autocomplete #Bug

🐛 Bug Report

The option fields are overflow above the autocomplete

To Reproduce

Steps to reproduce the behavior:

Use the autocomplete with position absolute on Pixel 2 API 29 2 device.

import { Autocomplete, Layout, Text, AutocompleteOption } from '@ui-kitten/components';
import AwesomeDebouncePromise from 'awesome-debounce-promise';
import { toJS } from 'mobx';
import moment from 'moment';
import React from 'react';
import { ListRenderItemInfo, StyleSheet, TouchableOpacity } from 'react-native';
import { useStores } from '../store/context';
import { percentageVH } from '../styles';
import { shadowSmall } from '../styles/common';
import { GoogleMapApi, GOOGLE_API_KEY } from '../utils/http/http';
import CloseIcon from './Icons/Close';
interface Props {
    onValueSelected: (place) => void
}
const onFetchLocations = (query: string) => GoogleMapApi.get('/json', {
    params: {
        query,
        key: GOOGLE_API_KEY
    }
}).then(result => result?.data?.results)


const fetchLocations = AwesomeDebouncePromise(onFetchLocations, 400);



const MapAutocomplete: React.FC<Props> = ({ onValueSelected }) => {

    const {
        store
    } = useStores();

    const [value, setValue] = React.useState('');
    const [data, setData] = React.useState(store.markers);
    const onSelect = (item) => {

        const {
            description
        } = item;
        setValue(description);

        item && onValueSelected(item);
    };

    const onChangeText = (query) => {
        setValue(query);
        if (query) {
            const newData = store.markers
                .slice()
                .filter(marker => marker?.description?.toLowerCase()
                    .startsWith(query.toLowerCase())
                );
            setData(newData);
        } else {
            setData(store.markers.slice());
        }
    };

    const onRenderItem = ({ item, index, separators }: ListRenderItemInfo<AutocompleteOption & any>) => (
        <TouchableOpacity onPress={() => onSelect(item)} style={{
            width: '100%',
            justifyContent: 'space-between'
        }}>
            <Text>
                {item.description}
            </Text>
            <Text style={{ fontSize: 10 }}>
                Found In: {moment(item.startDate).fromNow()}
            </Text>
        </TouchableOpacity>
    )

    return (
        <Layout style={styles.container}>
            <Autocomplete
                placeholder='Search a place...'
                value={value}
                data={data.slice().map(item => ({ title: item.description, ...item }))}
                onChangeText={onChangeText}
                onSelect={onSelect as any}
                style={styles.input}
                returnKeyLabel={'Search'}
                returnKeyType={'search'}
                status={'primary'}
                renderItem={onRenderItem}
            />
        </Layout>
    );
}
const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        top: percentageVH(6),
        alignSelf: 'center',
        width: '90%',
        backgroundColor: 'transparent',
        ...shadowSmall
    },
    input: {
        borderRadius: 50
    }
});
export default MapAutocomplete

UI Kitten and Eva version

Package	Version
@eva-design/eva	^1.4.0
@ui-kitten/components	^4.4.1

Environment information

  System:
    OS: macOS 10.15.2
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
  Binaries:
    Node: 13.2.0 - /usr/local/bin/node
    Yarn: 1.17.0 - /usr/local/bin/yarn
    npm: 6.14.1 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 27, 28, 29
      Build Tools: 28.0.3, 29.0.0, 29.0.3
      System Images: android-27 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: ~16.9.0 => 16.9.0 
    react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4 
  npmGlobalPackages:
    react-native-cli: 2.0.1

[jseed]

Having the same issue.
There have been a few issues about other similar components behaving this way (#935 for example), which were closed, pointing to #743.
This says the fix is to add a margin to the popover to adjust for the height of the status bar, but I can’t seem to find a way to configure the popover on the autocompelete

[artyorsh]

@JSeed btw, thanks for pointing on this. I forgot about the status bar issue even myself 😃 This will be mentioned in the docs in future to avoid such type of issues.