Open undefinedzain opened 5 years ago
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}} />
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!
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.
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);
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;
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.