react-native-autocomplete result list not touchable - react-native

Question

I have this implementation of a screen
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);
It had to be this way to provide the ui visual representation that was designed (not my idea); the autocomplete component is working, the result list is displayed but the items in the list are not clickable
I supossed the zIndex property should fix this, but to no avail, and i am out of ideas
Any help or suggestions ?