CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
fun joker
fun joker

Reputation: 1727

React navigation params doesn't reset?

I have filter screen and search screen. When user navigates from search screen I am passing search term from search screen to Home screen. Similarly I am doing samething for filter screen (passing filterOptions from filter screen to Home screen).

Now when I come from filter screen to home screen I want to set searchTerm to null and similarly if I am coming from search screen to home screen I want to set filterOptions to null how can I do that ?

In below code Line A and Line B doesn't set filterOptions and searchTerm to null thats why filter and search is not working because when filterOptions is not null I want searchTerm to be null that means only filter should work at that instance. Similarly if filterOptions is null then searchTerm must not be null that means only search should work at that instance.

Code: 

filterProjectResults = (projects) => {

      let filterOptions = this.props.navigation.getParam('filterOptions', null);
      let searchTerm = this.props.navigation.getParam('searchTerm', null);

      console.log('Initial filterOptions ', filterOptions);  --> initially null
      console.log('intital searchTerm ', searchTerm); --> initially null


      if(filterOptions !== null){ 
        console.log('Inisde filter screen ', filterOptions)
        let display_filtered_projects = projects.filter((item) => item.floorplans.some(val => filterOptions.includes(val.bhk)));
        searchTerm = null;  <--- Line A
        return display_filtered_projects;

      } else if (searchTerm !== null) {
        console.log('Inside Search screen ', searchTerm);
        let search_filter_projects = projects.filter(
          (project) => {
            return project.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1
          }
        );
        filterOptions = null;   <<--- Line B
        return search_filter_projects;

      }

  }

search.js:

<TouchableOpacity onPress={() => this.props.navigation.navigate('Projects', {searchTerm : this.state.text})}>
    <Image source={require('../../assets/images/search.png')} style={{width: 24, height: 24, resizeMode: 'contain'}}/>
</TouchableOpacity>

filter.js:

<TouchableOpacity onPress={() => this.props.navigation.navigate('Projects', {filterOptions: this.state.filterOptions})}>
    <View style={styles.filterButton}>
        <Text style={styles.filterButtonText}>Apply Filters</Text>
    </View>
</TouchableOpacity>

I am passing this filtered or searched data inside Flatlist to display the results. If I try to implement it using state I get error -> https://i.sstatic.net/g4l1o.jpg code: https://gist.github.com/aditodkar/1df0175e2b13727daaae0373040f8dcf

Upvotes: 4

Views: 5946

Answers (3)

Vengleab SO
Vengleab SO

Reputation: 816

You can update the params with navigation life cycle on blur when the screen is leaving event, also your params must is specified, because the params does shallow update instead of override the value

search.js:

import {useFocusEffect} from '@react-navigation/native';
import React, {useCallback} from 'react';

useFocusEffect(
    useCallback(() => {
      return () => {
        navigation.setParams({ searchTerm: null });
      };
    }, []),
);

Upvotes: 2

kai zhou
kai zhou

Reputation: 11

This issue on github, issue#6674, is the same question.

It's the default behaviour.

Upvotes: 1

Alec Lorraine
Alec Lorraine

Reputation: 398

When you call

this.props.navigation.navigate('Projects', {searchTerm : this.state.text})}> can you also add filterOptions: null like this

this.props.navigation.navigate('Projects', {searchTerm : this.state.text, filterOptions: null})}?

And then for the other one you can call

this.props.navigation.navigate('Projects', {searchTerm : this.state.text, searchTerm: null})}

you can also call this.props.navigation.setParams(params) and set them to null whenever you want.

Hope that helps!

Upvotes: 4

Related Questions