listitem is behind another element

[Akhmad Romadlon Zainur Rofiq]

hello. i have a problem when i used this, i have the autocomplete and another element below it.
but when i start typing on autocomplete. the suggestions element is behind that another element below it.

[Ali Ghanavatian]

Hi @zera272,
It could be because of you other component ZIndex or elevation you may override the suggestion element style to fix it. try setting listStyle props. something like
<Autocomplete ... listStyle={{zIndex: 999}} />

[Samip Subedi]

Hi @zera272,
It could be because of you other component ZIndex or elevation you may override the suggestion element style to fix it. try setting listStyle props. something like
<Autocomplete ... listStyle={{zIndex: 999}} />

Doesn't work!

[Ali Ghanavatian]

Please consider reviewing other styles or provide a snack example showing this issue.
you may consider checking out the example/snack to get the idea of using this component.

[Deleted user]

Hi have the same problem, my page looks like this

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
  },
  listContainer: {
    zIndex: 900
  }
});

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}
                listStyle={styles.listContainer}
                style={{ color: Colors.searchTextInput, backgroundColor: 'white' }}
                onChangeText={(text) => this.setState({ text })}
                renderItem={item => (
                    <ListItem 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);

[Deleted user]

this is a more simplified version of a page; consider that i am using react-navigation

import React, { Component } from 'react';
import { Text, StyleSheet, View } from 'react-native';
import { ListItem } from 'native-base';
import Autocomplete from 'native-base-autocomplete';
import axios from 'axios';

import Colors from '../../../util/Colors';

const styles = StyleSheet.create({
  autocompleteContainer: {
    flex: 1,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
    zIndex: 1
  },
  listContainer: {
    flex: 1,
    zIndex: 2
  }
});

const filterData = (query) => {
  const suggest = {
    suggest: {
      vehicle_suggest: {
        prefix: query,
        completion: {
          field: 'name',
          skip_duplicates: true
        }
      }
    }
  };

  return axios.get('http://172.28.2.164:9200/suggestions/_search', {
    params: {
      source: JSON.stringify(suggest),
      source_content_type: 'application/json'
    }
  });
};

const getResults = (response) => {
  const results = [];
  for (const v of response.data.suggest.vehicle_suggest[0].options) {
    results.push(v);
  }
  return results;
};

class SearchScreen2 extends Component {
  constructor(props) {
    super(props);
    this.state = { text: null, data: [] };
  }

  render() {
    return (
        <Autocomplete
            data={this.state.data}
            containerStyle={styles.autocompleteContainer}
            listStyle={styles.listContainer}
            style={{ color: Colors.searchTextInput, backgroundColor: 'white' }}
            onChangeText={(query) => filterData(query)
                .then(response => this.setState({ text: query, data: getResults(response) }))}
            renderItem={item => (
                <ListItem onPress={() => this.setState({ text: item.text })}>
                  <Text>{item.text}</Text>
                </ListItem>
            )}
        />
    );
  }
}

export default SearchScreen2;