Refresh a scene or a component

[salisuabubakar]

Hi, is there a way to refresh a scene or a component using The Navigation Router. Thanks

[grahammendick]

There is, but can you tell me what you're trying to do so I can answer correctly, please?

[salisuabubakar]

Hi, Thanks for your response. Am trying to refresh my app homepage to update a prop value i added as a badge to display a counter. Thanks

[grahammendick]

Can you give me a bit more information. I'm guessing you want to communicate from one scene to another? Why not use React Context or a 3rd party state library for that?

You see, I need to understand what you're doing before I can recommend refreshing a scene.

[salisuabubakar]

Hi, let me break it down. i want to display number of items in a shopping cart basket badge on one of the tabs scene. am using React context to pass the pros to the badge but the its not updating untill i close the app and open again before the badge shopping cart changes to the current number items in the shopping cart basket. Hope this helps. Thanks

[grahammendick]

I tried it in the twitter sample and it works great. There's a badge on the notifications tab. Calling setNotified(true) removes the badge. I passed the setNotified function as a prop to the Home component (Context or prop works the same). Then in the Home component I added a useEffect that calls setNotified(true) after 7 seconds.

export default ({tweets, setNotified}) => {
  useEffect(() => {
    const timer = setTimeout(() => {
      setNotified(true)
    }, 7000);
    return () => clearTimeout(timer);
  }, [])

I removed the setNotified call when the notifications tab is active because I wanted the badge to stay around until the useEffect turned it off. Then I toggled between the tabs and settled on the home tab until the timer ran. The badge disappeared as expected.

If you want to test it for yourself I created a gist with the changes. You can paste them into the Tabs and Home components of the twitter sample. (I also tested them in the fabric sample - you have to set a Material3 theme to get the badge to show on Android).

[grahammendick]

@salisuabubakar Are you happy with this?

[salisuabubakar]

Yes sorry for the late response. Its working. Thanks

[salisuabubakar]

Hi, When it’s changing but it goes zero and comes back. Can you please advise. Below is a video to show it.

https://github.com/grahammendick/navigation/assets/6886556/4a13ecb6-d563-4d13-9e42-7370fc846e01

[grahammendick]

There's no way I can tell what's wrong from that video. Why do you think it's anything to do with the Navigation router?

[salisuabubakar]

Hi Graham, Thanks for your response. Am not sure if it has something to do with The Navigation Router. But am just asking if there is a way i can refresh the component/scene when i click on the tab.

Example: The video is having a counter which is currently 35. when a user submist a form press on the tab screen you see on the video, i want to update the count.

this is what am doing now: const [submiperuserLength, setsubmiperuserLength] = useState("0")

export default ({tweets, setNotified}) => { useEffect(() => { const timer = setTimeout(() => { setsubmiperuserLength() }, 7000); return () => clearTimeout(timer); }, [submiperuserLength])

it updates the counter to 36 but it flashes. i would like to know if there is a function that can trigger the component to rerender.

Am also thinking if i can rerender the component when user press on the myAnih.js tab screen.

Please forgive me if am asking too much.

Thanks for your time.

[grahammendick]

I'm confused. Do you want to update one tab from another tab? You can use React Context or a 3rd party state library for that. If that's not what you mean then please can you explain what you want to do in more detail, thanks