Hits changes everytime in my react native application

Hello,

Normally, for one render hits are normal. But when i use a tab system with 2 indices, hits changes every time i clicked different tab. At the end, only 6 hits remain and stay this way.

Here is my code:

render() {
    const { isModalOpen, searchState } = this.state;
    return (
      <SafeAreaView style={styles.safe}>
        <StatusBar barStyle="light-content" />
        <View style={styles.container}>
          <InstantSearch
            searchClient={client}
            indexName={searchState.query === '' || searchState.query === undefined ? this.state.activeScreen == "mostHits" ? "keywords" : "keywords-updates" : "keywords"}
            root={this.root}
            searchState={searchState}
            onSearchStateChange={this.onSearchStateChange}>
            <SearchBox />
            
            {client.clearCache()}
            {searchState.query === '' || searchState.query === undefined ? (
              <View>
                <View style={{ flexDirection: 'row', marginLeft: 10, width: "100%" }}>

                  <TouchableOpacity style={styles.mainViewStyle} onPress={() => this.setState({ activeScreen: "mostHits" })}>
                    <Text style={styles.textStyle}>En Çok Tıklananlar</Text>
                  </TouchableOpacity>

                  <TouchableOpacity style={styles.mainViewStyle} onPress={() => this.setState({ activeScreen: "lastHits" })}>
                    <Text style={styles.textStyle}>En Son Tıklananlar</Text>
                  </TouchableOpacity>

                </View>

                {this.state.activeScreen === "mostHits"
                  ? <InfiniteHits searchState={searchState} />
                  : this.state.activeScreen === "lastHits"
                    ? <InfiniteHitsUpdates searchState={searchState} />
                    : null
                }
              </View>
            ) : <InfiniteHits searchState={searchState} />}

          </InstantSearch>
        </View>
      </SafeAreaView>
    );
  }

Hi there,
Thanks for reaching out to us.

It seems you have only one InstantSearch component and you update its indexName depending on which tab user is in. That’s why every time you move to another tab, the result gets reloaded.

I recommend you to have two separate views containing InstantSearch component in it, and when tab changes, you only swap which view should be displayed. I think it will fix your problem.

Please let me know how it goes and if you have any other question.

Best,