Не удается прокрутить FlatList с абсолютным позиционированием, если за ним ничего нет

Question

Что я пытаюсь сделать:

Сделать панель поиска и показать результаты в виде плоского списка под строкой.

Что у меня есть:

Iиметь SearchBar и FlatList, FlatList нужно, но в абсолютном положении, чтобы он покрывал содержимое в нижней части панели поиска

Проблема:

FlatList покрывает панель поиска, когдаон активен, и я не могу прокрутить список или выбрать элемент.Что я заметил, так это то, что если я пытаюсь выбрать элемент или прокрутить список при нажатии, где должна отображаться панель поиска, я могу выбрать и прокрутить список.

Что мне нужно:

FlatList, чтобы показать под SearchBar и иметь возможность прокручивать его.Я мог бы использовать top: 50, чтобы показать FlatList под панелью поиска, но он не выглядит хорошим

Наблюдения: Я не так хорош в стилях

import React, { Component } from 'react'
import { Text, View, StyleSheet, TouchableHighlight, FlatList } from 'react-native'
import {
    Slider,
    SearchBar,
    ListItem,
} from 'react-native-elements'

export default class SearchForm extends Component {

    state = {
        pages: 1,
        displayList: false,
        itemsPerPage: 5,
    }

    componentDidMount = async () => {
        const {
            data = [],
            itemsPerPage = 5,
        } = this.props


        await fetch('https://servicodados.ibge.gov.br/api/v1/localidades/estados', {
            method: 'GET',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
            },
        })
            .then(res => res.json())
            .then(data => this.setState({ 
                data: data, 
                displayData: data.slice(0, itemsPerPage) 
            }))

        console.log(this.state.data.length)
    }

    updateSearch = search => {
        const { data, itemsPerPage } = this.state
        let s = search ? search.toLowerCase() : ''
        this.setState({
            displayData: data.filter(res => res.nome.toLowerCase().includes(s)).slice(0, itemsPerPage),
            displayList: true,
            search: search,
            pages: 1,
        })
        if(this.flatListRef){
            this.flatListRef.scrollToOffset({ animated: true, offset: 0 })
        }
    }

    loadMore = () => {
        const { pages, displayData, data, search, itemsPerPage } = this.state
        const start = pages * itemsPerPage
        let end = (pages + 1) * itemsPerPage
        let s = search ? search.toLowerCase() : ''
        const newData = data.filter(res => res.nome.toLowerCase().includes(s)).slice(start, end)
        this.setState({
            displayData: [...displayData, ...newData],
            pages: pages + 1,
        })
        console.log(this.state.displayData.length)
    }

    selectItem = (value) => {
        this.setState({
            search: value,
            displayList: false,
        })
    }

    renderItem = ({ item, index }) => {
        return (
            <ListItem
                style={styles.flatListItem}
                containerStyle={styles.flatListItemCointainer}
                key={index}
                title={item.nome}
                onPress={() => this.selectItem(item.nome)}
            />
        );
    }

    render() {

        const {
            search,
            displayData = [],
            displayList,
        } = this.state

        return (
            <View style={styles.container}>
                <SearchBar
                    ref={search => { this.search = search }}
                    placeholder="Type Here..."
                    leftIcon={false}
                    noIcon
                    onChangeText={this.updateSearch}
                    value={search}
                />
                {displayList && <FlatList
                    style={styles.flatList}
                    ref={ref => this.flatListRef = ref}
                    data={displayData}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={this.renderItem}
                    onEndReached={this.loadMore}
                    onEndReachedThreshold={0.5}
                />}
                <TextInput
                    style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
                    onChangeText={(text) => this.setState({ text })}
                    value={this.state.text}
                />
                <TextInput
                    style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
                    onChangeText={(text) => this.setState({ text })}
                    value={this.state.text}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        alignSelf: 'stretch',
        backgroundColor: '#fff',
    },
    flatList: {
        height: 200,
        width: '100%',
        position: 'absolute',
    },
    flatListItemCointainer: {
        backgroundColor: 'rgba(0,0,0,1)'
    }
})

Редактировать: Я просто немного изменил код, чтобы показать, что я пытаюсь сделать.Под SearchBar будут другие компоненты (например, TextInput), и когда список активен, список должен идти поверх этих компонентов.С ответом Shashin Bhayani это не идет поверх вещей под этим, только отталкивает это.