SearchBox's "showLoadingIndicator" prop does not work in React Native

Just like the title says, I am trying to enable “showLoadingIndicator” in the connected SearchBox component but it does not work even after lowering the stalled search delay down to zero. Other props like “autoFocus” will work.

class SearchBox extends Component {
  render() {
    return (
      <View style={styles.mainContainer}>
        <SearchBar
          {...this.props}
          platform="android"
          onChangeText={text => this.props.refine(text)}
          onCancel={this.props.onCancel}
          value={this.props.currentRefinement}
          ... styles ...
        />
      </View>
    );
  }
}

const ConnectedSearchBox = connectSearchBox(SearchBox);

The following code is the main component that imports the wrapped stateless connected component that the previous code creates.

  renderAlgoliaSearchBar = () => {
    if (this.state.searchVisible) {
      return (
        <SearchBox
          autoFocus={true}
          showLoadingIndicator
          onCancel={this.onCancelPress}
        />
      );
    }
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <InstantSearch
          appId={appId}
          apiKey={searchApiKey}
          indexName={commercesIndex}
          stalledSearchDelay={0}
        >
          {this.renderAlgoliaSearchBar()}
          <ConnectedHits />
          <ConnectedStateResults />
        </InstantSearch>
      </View>
    );
  }

Thank you very much in advance for your help!

Hi,

Before we can help you out, since it seems you’ve done everything right, can you try the same pattern using a regular desktop version?

Please create a reproducible example using React InstantSearch and our template here: https://instantsearch-templates.netlify.com/ then share it with us.

If it works with Desktop then we will know it’s an issue of the lib. If it fails with both desktop and native maybe there’s something else.

Best regards,