React-native-ui-kitten: Autocomplete - The option fields are overflow above the autocomplete #Bug

[tzachbon]

🐛 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 you don't need adding margins if you configure status bar properly, that's what was discussed in mentioned issues. This way it will be automatically fixed for all popover-based components, including Autocomplete.

[artyorsh]

I'm going to close this, since it was discussed multiple times, and this is really not the case that should be handled out of the box - there are multiple ways to do this, also it is a platform-specific case (only on Android, and only for translucent status bar, which is default for any reason and is changed in mostly every application).

You may see how it is solved in our demo app (you may also need to configure app.json in case of Expo applications)

Guides:

• Expo apps
• Bare React Native apps

[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.

[r0b0t3d]

as @JSeed pointed above, there is no way to pass custom style for Popover to Autocomplete component. So one way to support this kind of issue, @artyorsh I think you just need to expose the custome style for Popover component.
For now, I ended up with using patch-package and edit directly in Autocomplete component. Will open a PR if I have time.

[eyalyoli]

Hello, anything new with this issue?