Prevented inactive tabs from rendering

[grahammendick]

This work was triggered by the Lazy Initialized TabBar discussion.

Used the same technique from #547 to freeze inactive tabs. By default, the Navigation router only freezes a tab once it’s been visited. There’s no way for the Navigation router to know when it’s safe to freeze a tab before it’s been visited.

The typical way is to wait to render the tab until it’s pressed. But this isn’t good because most tabs need to fetch data. Freezing before the fetch starts means that the tab will be in a loading state when activated. It’s better to freeze once the fetch has begun so that it’s completed by the time the tab is activated. This avoids a loading state because it only has to render the already fetched data when it’s unfrozen.

So moved the decision about when to freeze an unvisited tab into userland. Created a TabBarItemContext with an onLoad function. The user calls onLoad once it’s safe to freeze. In a Twitter example, the user freezes the notifications tab once the data is fetched,

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

Also added this change to Navigation React Native Web. Added a lazy prop so the tab can be frozen immediately. Couldn’t add the lazy prop on Native because it can cause a blank flash . The tab press happens first in native and the tab goes blank while it waits for the first render to complete in JavaScript.