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

Question

У меня есть эта реализация экрана

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Icon, View, Text, ListItem } from 'native-base';
import { createMaterialTopTabNavigator } from 'react-navigation';
import { connect } from 'react-redux';
import Autocomplete from 'native-base-autocomplete';

import EventsResults from './EventsResults';
import VehiclesResults from './VehiclesResults';
import { performSearch } from '../actions/search';
import Colors from '../../../util/Colors';
import GlobalStyle from '../../../util/GlobalStyle';

const styles = StyleSheet.create({
  autocompleteContainer: {
    zIndex: 800
  }
});

const mapStateToProps = ({ searchResults }) => ({
  searchResults
});

const SearchTabNavigatorStack = createMaterialTopTabNavigator(
    {
      EventsTab: {
        screen: EventsResults,
        navigationOptions: { tabBarLabel: 'Events' }
      },
      VehiclesTab: {
        screen: VehiclesResults,
        navigationOptions: { tabBarLabel: 'Vehicles' }
      }
    },
    {
      initialRouteName: 'EventsTab',
      navigationOptions: () => ({
        tabBarVisible: true
      }),
      swipeEnabled: true,
      tabBarOptions: {
        upperCaseLabel: false,
        activeTintColor: Colors.defaultPrimaryColor,
        inactiveTintColor: Colors.defaultPrimaryColor,
        indicatorStyle: {
          backgroundColor: Colors.defaultPrimaryColor,
        },
        tabStyle: {
          height: 48,
          alignItems: 'center',
          justifyContent: 'center',
        },
        style: {
          backgroundColor: Colors.primaryBackgroundColor,
        },
        statusBarStyle: 'light-content',
      },
    }
);

const filterData = (query) => {
  const cars = [];
  cars.push({ text: 'Chevrolet Trailblazer 2011' });
  cars.push({ text: 'Chevrolet Spark 2011' });
  cars.push({ text: 'Chevrolet Silverado 2011' });
  cars.push({ text: 'Ford Explorer 2010' });
  cars.push({ text: 'Ford Escape 2012' });
  cars.push({ text: 'Ford Ecosport 2014' });

  const result = (query === null || query.trim() === '') ? [] : cars.filter(car => car.text.indexOf(query) !== -1);

  return result;
};

class HeaderComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { text: null };
  }

  render() {
    const data = filterData(this.state.text);
    return (
        <View
            style={{
              flex: 0,
              flexDirection: 'column',
              justifyContent: 'space-between',
              backgroundColor: Colors.primaryBackgroundColor
            }}
        >
          <View
              style={{
                flex: 0,
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center'
              }}
          >
            <Text style={[GlobalStyle.textTitleStyle, { marginLeft: 10 }]}>search</Text>
            <Icon active style={{ color: Colors.defaultPrimaryColor, margin: 10 }} name='ios-close' />
          </View>
          <View
              style={{
                flex: 0,
                flexDirection: 'row',
                justifyContent: 'space-evenly',
                alignItems: 'center',
                backgroundColor: Colors.defaultPrimaryColor,
                marginLeft: 10,
                marginRight: 10
              }}
          >
            <Autocomplete
                data={data}
                containerStyle={styles.autocompleteContainer}
                style={{ color: Colors.searchTextInput, backgroundColor: 'white' }}
                onChangeText={(text) => this.setState({ text })}
                renderItem={item => (
                    <ListItem style={{ zIndex: 900 }} onPress={() => this.setState({ text: item.text })}>
                      <Text>{item.text}</Text>
                    </ListItem>
                )}
            />
          </View>
        </View>
    );
  }
}

const HeaderContainer = connect(mapStateToProps, { performSearch })(HeaderComponent);

class SearchScreen extends Component {
  static router = SearchTabNavigatorStack.router;
  static navigationOptions = ({ navigation }) => ({
    header: <HeaderContainer />
  });

  render() {
    return (
        <SearchTabNavigatorStack navigation={this.props.navigation} />
    );
  }
}

export default connect(mapStateToProps, null)(SearchScreen);

Это должен был быть способ обеспечить визуальное представление пользовательского интерфейса, которое было разработано (не моя идея); компонент автозаполнения работает, список результатов отображается, но элементы списка не активируются

Я предположил, что свойство zIndex должно это исправить, но безрезультатно, и у меня нет идей

Любая помощь или предложения?