CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
CrystalCase
CrystalCase

Reputation: 187

react-native navigation false route params in navigation listener

I am using react native navigation and have two tabs. One of them has a list of entites, the other has a form to submit entities. When ever a new entity is submitted, I'd like to refresh the first tab to be sure, the newest data gets loaded.

I navigate to the first tab like this:

navigation?.navigate('Main', {refresh: true});

This props gets saved as follows:

let {refresh} = route.params;

To check, if the screen needs to refresh, I added a listener in useEffect() like this:

    useEffect(() => {

        const unsubscribe = navigation.addListener('focus', () =>{

            if(refresh){
                doRefresh()
            }

        })

    }, [])

Unfortunately, neither "refresh" nor "route.params" directly is ever true inside the listener. Passing the param works, because I took a closer look at the var and it gets true, whenever I submit.

Do I need to access the route.params inside a navigation listener in another way?

Thanks and hit me up, if you need more information on this

Upvotes: 0

Views: 1034

Answers (2)

Sourabh Gera
Sourabh Gera

Reputation: 1006

const onPressCountry = (item,index) => {
    navigation.push('SignUp2', {selectedCountryId:item?.countryID, selectedCountryName: item?.name} )
}

use navigation.push instead of navigation.navigate

Upvotes: 1

Valentin Briand
Valentin Briand

Reputation: 3683

The issue is that your useEffect only runs once as your dependencies array [] is empty, and therefore your listener only receives the initial value of refresh.
You need to pass refresh as a dependency to useEffect, and I don't think you even need the focus listener in your case so you would end up with this:

useEffect(() => {
  if (refresh) {
    doRefresh()
  }
}, [refresh])

Upvotes: 1

Related Questions