react native searchbar overlapping mapview but cant zoom or pitch mapview

Question

i managed to overlapped my searchbar over react native mapview, however with that i wont be able to pitch or zoom onto my map, are there any solution to this?

reason i wanted to add touchablewithoutfeedback over googleplacesautocomplete is due that googleplacesautocomplete will always prompt out virtual keyboard

return (
    <Provider>
      
      <MapView style={{
        height: '100%', 
        width: '100%',
        }}
        ref={mapRef}
        onMapReady={goToMyLocation}
        initialRegion={location}
        showsUserLocation={true}
        showsMyLocationButton={true}
        followsUserLocation={true}
        scrollEnabled={true}
        zoomEnabled={true}
        pitchEnabled={true}
        rotateEnabled={true}
        showsTraffic={true}> 
        {location &&           
          <Marker 
          image={require ('../../assets/map_icon.png')}
          title="You are here"
          coordinate={location.coords} /> }
      </MapView>  

      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={{position: 'absolute', top: '5%', width: '100%', height: '100%'}}>
          <GooglePlacesAutocomplete 
            placeholder="Search"
            query={{
              key: GOOGLE_PLACES_API_KEY,
              language: 'en',
              components: 'country:my'
            }}
            GooglePlacesDetailsQuery={{fields: 'geometry'}}
            fetchDetails={true}
            listViewDisplayed='auto'
            autoFocus={false}
            enableHighAccuracyLocation={true}
            enablePoweredByContainer={false}
            onPress={(data, details = null) => {
              console.log('data:', data)
              console.log('details:', details)
              console.log(JSON.stringify(details?.geometry?.location))
            }}
            onFail={error => console.log(error)}
            onNotFound={() => console.log('no results')}
            textInputProps={{
              autoFocus: true,
              blurOnSubmit: false,
            }}
            isRowScrollable={true}
            styles={{
              textInput: {
                height: 35,
                width: '80%',
                fontSize: 16,
                borderRadius: 12,
                borderColor: '#5A5A5A',
                borderWidth: 1,
                marginHorizontal: '3%',
                backgroundColor: '#ECECEC',
              },
              predefinedPlacesDescription: {
                color: '#1faadb'
              },
              container: {
                marginHorizontal: '3%',
              },
              listView: {
                borderRadius: 12,
                elevation: 1,
              },
              row: {
                backgroundColor: '#ECECEC',
                height: 35,
                paddingTop: 10,
              }
            }}
            renderRightButton={() => 
            <TouchableOpacity onPress={() => navigation.navigate('Profile')}>
              <Image 
                style={{height: 35, width: 35, marginRight: '3%', borderRadius: 36}}
                source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
              />
            </TouchableOpacity>}
          />
        </View>
      </TouchableWithoutFeedback>
      
      <StatusBar style='auto' />
    </Provider>

i tried wrapping mapview and view under touchablewithoutfeedback but that would result in react.children.only expected to receive single react.element.child
i also tried creating another view and wrapped mapview and googleplacesautocomplete in it then wrap that particular view in touchablewithoutfeedback, but still unable to zoom or pitch map

current view

based on the image attached, im not able to pitch or zoom into the map

Perhaps your searchbar container is covering the entire screen (so, not the searchbar itself, but the container)? What happens if you (temporarily) try something as simple as setting its background colour to red? If your entire screen (just not the searchbar) turns red, that might be why you cant interact with the map. If that turns out to be the case, perhaps you could solve it via CSS alone. — FiddlingAway, Jan 30 '23 at 18:51
sorry, i forgot to include your approach in (solutions ive tried), your approach works partially, this is due keyboard dismiss will only work on whatever height you set for view, assuming now if view is set at 20% of the screen layout, by tapping on the 20% of screen will only dismiss the keyboard, that also result in 20% of the mapview not being able to rotate or zoom whatsoever — Nicholas Cheah, Jan 31 '23 at 06:09

Dustin Spengler · Answer 1 · 2023-01-30T17:23:57.280

I would try setting the height of the View element containing the GooglePlacesAutocomplete to a small fixed height like this:

 <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
    <View style={{position: 'absolute', top: '5%', width: '100%', height: 65}}>
      <GooglePlacesAutocomplete />
    </View>
  </TouchableWithoutFeedback>

Since the position of the View is set to absolute, its sitting on top of you MapView and not allowing you to interact with it properly. The only problem is now the encompassing View is set to a static height of 65 and when options become visible, they will drop out of view.

The GooglePlacesAutocomplete can be really tricky to overlay on a map because its position must be set to absolute in order to work on mobile. This means the height of the encompassing View will have to be toggled when the user is focused on the GooglePlacesAutocomplete.

Your final solution might look something like this (warning did not test):

 <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
    <View 
       style={{
          position: 'absolute',
          top: '5%', 
          width: '100%', 
          height: this.state.autoCompleteFocused? "100%": 65
       }}
     >
       <GooglePlacesAutocomplete 
          focus={()=>{this.setState({autoCompleteFocused: true})}
          blur={()=>{this.setState({autoCompleteFocused: false})}
       />
    </View>
</TouchableWithoutFeedback>

react native searchbar overlapping mapview but cant zoom or pitch mapview

1 Answers1