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>

1. i tried wrapping mapview and view under touchablewithoutfeedback but that would result in react.children.only expected to receive single react.element.child

2. 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

Answer 1

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>