The results of the first Autocomplete float behind the second Autocomplete field

If you have two or more vertically stacked components, the results float behind those below (as well as my Picker components). zIndex does not seem to help

renderItem({item, i, separators}) {
        return (
            <TouchableOpacity style={styles.acResult} key={i} onPress={() => this.onSelect(item)}>
                <Text style={styles.acResultText}>
                    {item.label}
                </Text>
            </TouchableOpacity>
        )
    }

<View style={styles.autocompleteContainer}>
                    <Autocomplete
                        autoCapitalize="none"
                        autoCorrect={false}
                        keyExtractor={item => item.id}
                        data={this.findResult(this.state.query)}
                        placeholder={this.props.field.label}
                        defaultValue={this.state.query}
                        onChangeText={text => this.setState({query: text})}
                        renderItem={this.renderItem}
                    />
                </View>

My styles are:

acResult: {
        zIndex:99999,
        backgroundColor:Colors.snow,
    },
    acResultText: {
        paddingVertical:5,
        paddingLeft:5,
        fontSize: 18,
        backgroundColor:Colors.snow,
        color:Colors.charcoal
    },
    autocompleteContainer: {
        backgroundColor:Colors.snow,
        flex: 1,
        left: 0,
        position: 'absolute',
        right: 0,
        top: 0,
        zIndex: 1
    }

[ahtisham09]

@paritosh-yadav i solve this issue with any styling like ZIndex Follow this snippet Code
<View mainContainer> <AutoComplete/> <View> <AutoComplete/> <View> <AutoComplete/> <View ( if you want to add button any other component add in this view/> </View> </View> </View>

I hope this snippet will help you for solving this problem

[iamsrikanthnani]

@paritosh-yadav simply set the zIndex:10 to the below component(second autocomplete).