connectGeoSearch does only receive one hit from props.hits

Hello… I have a working implementation of AlgoliaSearch and I have always used InfiniteHits for showing results, which works perfectly fine. However, I now want to include a map where users can visualize the results they have searched for as well, and I checked that the component I made wrapped in connectGeoSearch does only receive one result in props.hits.

This is the code of my map component:

import React from 'react';
import { Dimensions, StyleSheet } from 'react-native';
import { connectGeoSearch } from 'react-instantsearch/connectors';
import MapView, { Marker } from 'react-native-maps';

const { height, width } = Dimensions.get('screen');
const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = ....;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

const MapSearch = connectGeoSearch(({ hits }) => {
  return (
    <MapView
      ref={map => (this.map = map)}
      loadingEnabled={true}
      initialRegion={{...}}
      showsUserLocation
      style={styles.map}
    >
      {hits.map(hit => {
        return (
          <Marker
            key={hit.objectID}
            coordinate={{
              latitude: hit._geoloc.lat,
              longitude: hit._geoloc.lng
            }}
            title={hit.name}
            description={hit.description}
          />
        );
      })}
    </MapView>
  );
});

export default MapSearch;

const styles = StyleSheet.create({...});

And the render method of the component that shows the results:

  renderResults = () => {
    return this.state.showingMap ? <MapSearch /> : <ConnectedHits />;
  };

  render() {
    return (
      <InstantSearch
        appId={appId}
        apiKey={searchApiKey}
        indexName={commercesIndex}
        stalledSearchDelay={0}
        root={{ Root: View, props: { style: { flex: 1 } } }}
      >
        {this.renderAlgoliaSearchBar()}
        <Configure
          {...{ ...this.obtainFacetProps(), ...this.obtainGeolocationProps() }}
        />
        <ConnectedStateResults />
        {this.renderResults()}
        <Fab
          style={{ backgroundColor: MAIN_COLOR }}
          position="bottomRight"
          onPress={() => this.setState({ showingMap: !this.state.showingMap })}
        >
          <Ionicons name="md-pin" />
        </Fab>
      </InstantSearch>
    );
  }

I don’t think it has anything to do with the Configure component… All I do with the “obtain” methods is validations and assignment of props, but that works just fine for my “normal” search.

Thanks in advance for the help!

Hey @manu.carba96,
Thanks for sharing the code and this issue. At first it seemed similar to this post, and indeed the way you are wrapping using connectGeoSearch is exactly the same.

Does it work as expected without the Configure? What exactly are the facet and geolocation props that get passed to the Configure?

Have you tried running the same query either in the dashboard or using an API client and validating that there are in fact multiple hits for that particularly geo query?