Suggestion list hidden below next UI element

Hi,

I am making an address form where country, state and city are autocompletable inputs. When placing the Autocomplete elements one below the other the only the bottom most list is showing properly. The lists of the Autocomplete elements above are getting hidden behind the bottom elements.

  renderAddressForm = () => {
  const address = this.state.formLabel === 'Edit Address' ? this.state.submitAddress : this.state.addressOffline;

  const { countryQuery, searchCountry, stateQuery, searchState } = this.state;
  const countries = this.findCountry(countryQuery);
  const states = this.findState(stateQuery);

return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', paddingBottom: 5 }}>

  <Text style={{ padding: 5, fontSize: 15 }}>{this.state.formLabel}</Text>
  
  <View style={{ flexDirection: 'row', marginTop: 2 }}>
    <View style={{ flex: 0.3, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginLeft: 10 }}>
      <Text style={{ fontSize: 15 }}>Street</Text>
    </View>
    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginRight: 10 }}>
      <Item style={{ flex: 1, paddingLeft: 10, borderRadius: 5, backgroundColor: '#e5e5e5' }}>
        <Input
          placeholder='Enter Street'
          onChangeText={(text) => this.onChangeStreet(text)}
          value={address.street}
          onContentSizeChange={(event) => {
			this.setState({ streetHeight: event.nativeEvent.contentSize.height });
          }}
          style={{ height: Math.max(35, this.state.streetHeight), fontSize: 16 }} />
      </Item>
    </View>
  </View>


  <View style={{ flexDirection: 'row', marginTop: 2 }}>
    <View style={{ flex: 0.3, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginLeft: 10 }}>
      <Text style={{ fontSize: 15 }}>Area</Text>
    </View>
    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginRight: 10 }}>
      <Item style={{ flex: 1, paddingLeft: 10, borderRadius: 5, backgroundColor: '#e5e5e5' }}>
        <Input
          placeholder='Enter Area'
          onChangeText={(text) => this.onChangeArea(text)}
          value={address.area}
          onContentSizeChange={(event) => {
            this.setState({ areaHeight: event.nativeEvent.contentSize.height });
          }}
          style={{ height: Math.max(35, this.state.areaHeight), fontSize: 16 }} />
        </Item>
    </View>
  </View>

  <View style={{ flexDirection: 'row', marginTop: 2 }}>
    <View style={{ flex: 0.3, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginLeft: 10 }}>
      <Text style={{ fontSize: 15 }}>Landmark</Text>
    </View>
    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginRight: 10 }}>
      <Item style={{ flex: 1, paddingLeft: 10, borderRadius: 5, backgroundColor: '#e5e5e5' }}>
        <Input
          placeholder='Enter Landmark'
          onChangeText={(text) => this.onChangeLandmark(text)}
          value={address.landmark}
          onContentSizeChange={(event) => {
            this.setState({ landmarkHeight: event.nativeEvent.contentSize.height });
          }}
          style={{ height: Math.max(35, this.state.landmarkHeight), fontSize: 16 }} />
        </Item>
    </View>
  </View>

  <View style={{ flexDirection: 'row', marginTop: 2 }}>
    <View style={{ flex: 0.3, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginLeft: 10 }}>
      <Text style={{ fontSize: 15 }}>Pincode</Text>
    </View>
    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginRight: 10 }}>
      <Item style={{ flex: 1, paddingLeft: 10, borderRadius: 5, backgroundColor: '#e5e5e5' }}>
        <Input
          placeholder='Enter Pincode'
          onChangeText={(text) => this.onChangePincode(text)}
          value={address.pincode}
          style={{ height: 35, fontSize: 16 }} />
      </Item>
    </View>
  </View>

  <View style={{ flexDirection: 'row', marginTop: 2 }}>
    <View style={{ flex: 0.3, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginLeft: 10 }}>
      <Text style={{ fontSize: 15 }}>Country</Text>
    </View>
    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginRight: 10 }}>
      <Autocomplete
        placeholder='Select Country'
        autoCorrect={false}
        data={searchCountry ? countries : []}
        onChangeText={(text) => this.setState({
          countryQuery: text,
          searchCountry: true,
        })}
        style={{ height: 35, fontSize: 16, paddingLeft: 18, borderRadius: 5, backgroundColor: '#e5e5e5' }}
        defaultValue={countryQuery}
        containerStyle={{ flex: 1 }}
        inputContainerStyle={{ borderWidth: 0 }}
        listStyle={{ zIndex: 2, position: 'absolute' }}
        renderItem={item => (
          <TouchableOpacity onPress={() => this.onSelectCountry(item)}>
            <Text style={{ fontSize: 15, margin: 2 }}>{item.name}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  </View>

  <View style={{ flexDirection: 'row', marginTop: 2 }}>
    <View style={{ flex: 0.3, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginLeft: 10 }}>
      <Text style={{ fontSize: 15 }}>State</Text>
    </View>
    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginRight: 10 }}>
      <Autocomplete
        placeholder='Select State'
        autoCorrect={false}
        data={searchState ? states : []}
        onChangeText={(text) => this.setState({
          stateQuery: text,
          searchState: true,
        })}
        style={{ height: 35, fontSize: 16, paddingLeft: 18, borderRadius: 5, backgroundColor: '#e5e5e5' }}
        defaultValue={stateQuery}
        containerStyle={{ flex: 1 }}
        inputContainerStyle={{ borderWidth: 0 }}
        listStyle={{ zIndex: 2, position: 'absolute' }}
        renderItem={item => (
          <TouchableOpacity onPress={() => this.onSelectState(item)}>
            <Text style={{ fontSize: 15, margin: 2 }}>{item.name}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  </View>

</View>
 );
}//end of renderAddressForm

How can I get the country suggestion list to appear on top of the state list ?

[panuhorsmalahti]

The problem is probably caused by this: “every new view creates a zIndex stacking context.”. In other words, if the later element which is on top of the autocomplete input creates a new view, no zIndex setting will solve it. I fixed it by moving both the autocomplete and the next component to the same view.

[hdornier-reeliant]

With this configuration:

<View container with higher zIndex>
   <Autocomplete>
</view>
<View with results />

I achieve to have the suggestions above the result view.