React-native-google-places-autocomplete: Autocomplete Pushes Down Other Components

[ericm999]

First of all thanks for making this wrapper around the places api. I have an issue here where i have another component below the autocomplete search box. I simply want to elevate the list view.I already tried playing with position, zindex, elevation and overflow, but instead of elevating it is showing below the component

          <ScrollView enableAutoAutomaticScroll={false} contentContainerStyle={{ borderRadius:6,borderColor:'rgba(112, 112, 112, 0.3)', borderWidth:1, shadowColor: '#000000', shadowOpacity: 0.16, shadowRadius:6, shadowOffset: {width:0, height:0}, elevation:5 ,backgroundColor: '#FFFFFF', marginHorizontal:15, marginVertical:25}}>

            <View style={{flex: 1,marginBottom:20 }}>

              <View style={{marginHorizontal:15,marginTop:20,flex:1,backgroundColor:'red'}}>
              <GooglePlacesAutocomplete
      placeholder='Enter Location'
      minLength={2} // minimum length of text to search
      autoFocus={false}
      returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
      keyboardAppearance={'light'} // Can be left out for default keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
      listViewDisplayed={false}   // true/false/undefined
      fetchDetails={true}
      keyboardShouldPersistTaps="handled"
      renderDescription={row => row.description} // custom description render
      onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
        console.log(data,details);
      }}
      enablePoweredByContainer={false}
      getDefaultValue={() => ''}
      query={{
        // available options: https://developers.google.com/places/web-service/autocomplete
        key: 'api_key',
        language: 'en', // language of the results
        types: '', // default: 'geocode'
      }}
      styles={{
        container: { zIndex: 999,
      overflow: 'visible',
      flexGrow: 0,
      flexShrink: 0},  //The conainer of the searchbox and list
        listView:{backgroundColor:'#FFF',position: 'absolute',
      top: 60,
      left: 10,
      right: 10,
      backgroundColor: 'white',
      borderRadius: 5,
      overflow:'visible',
      elevation:999,
      zIndex: 999},  //The listview styling listing all the placing
        textInputContainer: {},
        textInput: { },
        description: {color:'#808080', //The text color of the suggestion text },
      }}
      currentLocation={false} 
      nearbyPlacesAPI='GooglePlacesSearch' 
      GooglePlacesSearchQuery={{
        rankby: 'distance',
        type: 'cafe'
      }}

      GooglePlacesDetailsQuery={{
        fields: 'formatted_address',
      }}

      filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
      debounce={200}
    />
</View>
              <View style={{marginHorizontal:15,marginVertical:15}}>
                  <Text style={{fontFamily:12,color:'rgba(128, 128, 128, 1)'}}>
                    Session Time
                  </Text>
                </View>

                <View>
                <View style={{ flexDirection: 'row', marginBottom:10}}>


                  <View style={{flex:1, marginHorizontal:5}}>
                    <DatePicker
                showIcon={false}
        style={{}}
        ref={(ref)=>this.date=ref}
        date={this.state.date}
        mode="date"
        placeholder='Select Date'
        format="YYYY-MM-DD"
        minDate={new Date()}
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          placeholderText:{fontSize:10,color: '#808080'},
          dateTouchBody:{maxHeight:30,maxWidth:125,padding: 0,marginLeft: 0,borderBottomWidth:1, borderColor: '#000000',paddingHorizontal:15,
          backgroundColor:'#f1f1f1'},
        }}
        onDateChange={(date) => {this.setState({date: date})} }
      />
                   </View>


              </View>

              <View style={{flexDirection: 'row'}}>

              <View style={{flex:1, maxWidth:100,marginHorizontal:5}}>
                    <DatePicker
                showIcon={false}
        style={{}}
        date={this.state.start_time}
        mode="time"
        placeholder='Select time'
        format="HH:MM"
        minDate="2016-05-01"
        maxDate="2016-06-01"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          placeholderText:{fontSize:10,color: '#808080', fontFamily: Platform.OS == 'ios' ? "Krub" : "Krub Medium Italic", fontWeight:Platform.OS == 'ios' ? "normal" : "normal",fontStyle: Platform.OS == 'ios' ? "italic" : "normal",},
          dateTouchBody:{maxHeight:30,maxWidth:100,padding: 0,marginLeft: 0,borderBottomWidth:1, borderColor: '#000000',paddingHorizontal:15,
          backgroundColor:'#f1f1f1',fontFamily: Platform.OS == 'ios' ? "Krub" : "Krub Medium Italic", fontStyle: Platform.OS == 'ios' ? "italic" : "normal",},
          dateInput: {borderWidth:0
          }
          // ... You can check the source to find the other keys.
        }}
        onDateChange={(start_time) => {this.setState({start_time: start_time})}}
      />
                </View>

                <View style={{flex:1, marginHorizontal:10,justifyContent: 'center',alignItems: 'center',backgroundColor: 'transparent'}}>
                    <Text style={{fontFamily: Platform.OS == 'ios' ? "Krub" : "Krub Medium Italic", fontWeight:Platform.OS == 'ios' ? "normal" : "normal",fontStyle: Platform.OS == 'ios' ? "italic" : "normal", color: '#808080'}}>Until</Text>
                  </View>
                  <View style={{flex:1,maxWidth:100, marginHorizontal:5}}>
                      <DatePicker
                showIcon={false}
        style={{}}
        date={this.state.end_time}
        mode="time"
        placeholder='Select time'
        format="HH:MM"
        minDate="2016-05-01"
        maxDate="2016-06-01"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          placeholderText:{fontSize:10,color: '#808080', fontFamily: Platform.OS == 'ios' ? "Krub" : "Krub Medium Italic", fontWeight:Platform.OS == 'ios' ? "normal" : "normal",fontStyle: Platform.OS == 'ios' ? "italic" : "normal",},
          dateTouchBody:{maxHeight:30,maxWidth:100,padding: 0,marginLeft: 0,borderBottomWidth:1, borderColor: '#000000',paddingHorizontal:15,
          backgroundColor:'#f1f1f1',fontFamily: Platform.OS == 'ios' ? "Krub" : "Krub Medium Italic", fontStyle: Platform.OS == 'ios' ? "italic" : "normal",},
          dateInput: {borderWidth:0
          }
          // ... You can check the source to find the other keys.
        }}
        onDateChange={(end_time) => {this.setState({end_time: end_time})}}
      />
                  </View>
              </View>

              </View>
              </View>
      </View>  
          </ScrollView>

Thanks for an answer

[sostenesg7]

I solve this problem by making autocomplete position absolute.

[ajaysaini-sgvu]

@sostenesg7 Can you suggest how and where you set position 'absolute' ?

[sostenesg7]

I do not have my old code any more, i completely changed this component to work for me. But i remember code that i put is only:

````
styles={{
listView:{
position: 'absolute',
backgroundColor: '#FFF',
zIndex: 10,//Forcing it to front
}
}}

[jkdc]

Hi, Does work this for anyone? I can't touch any row from listView that overflow component view on android. any ideas to fix?

[ws7one]

The absolute position works, but weirdly it looks like this

The background, given is a solid color, still it's not fully opaque. Plus when i try to click on the first or second element, the textbox behind it gets in focus.

[talmog]

@ws7one I solved that by adding

container: { width: '100%', zIndex: 1, },

[juanlet]

I want to add that in some cases the list gets in the way of the input, you can

import {
heightPercentageToDP as hp,
} from 'react-native-responsive-screen'; //to keep it responsive

listView: {
position: 'absolute',
backgroundColor: '#FFF',
zIndex: 10,
marginTop: hp('8%')
},

And sometimes if your font is a little bigger you need to give each row more height, so you could do:

row: {
minHeight: hp('9%'),
},