Render tab only if a user select the tab

[salisuabubakar]

Hi, is there a way to render tab only if a user select the tab. Currently my app renders all the screens in the tab even if i have not visited the that particular tab. Thanks

[grahammendick]

Hey, the Navigation router doesn't render inactive tabs as long as they've been visited at least once. If you want to prevent your inactive tabs from rendering even before they've been visited then you use the TabBarItemContext. It has an onLoad function that you call to freeze your tab.

In a Twitter example, here's how to prevent the notifications tab from rendering.

const NotificationsTab = () => {
  const {onLoad} = useContext(TabBarItemContext);
  const [notifications, setNotifications] = useState();
  useEffect(() => {
    onLoad();
    const data = await fetch();
    setNotifications(data);
  }, [])
}

This is better than lazy tabs that you might be familiar with in other libraries because you start fetching the notifications data straight away. The tab doesn't render but the data is still fetched. That way, when the user selects the tab they'll instantly see the notifications instead of an annoying spinner.

[grahammendick]

@salisuabubakar have you had time to try this yet?

[salisuabubakar]

@salisuabubakar have you had time to try this yet?

Yes its working perfectly. I wish it is documented well so others can also benefit. Thanks