Is it possible to show/hide the bars programmatically?

[fredrikburmester]

Hi, I would like to hide/show the top/bottom bars with say an async hook or similar. The goal is to delay rendering of my components until the bars have disappeared.

Thanks for any help!

[zoontek]

@fredrikburmester Sure (for the programmatically part), if you prefer a hook or something similar:

const useHideSystemBars = (hidden: boolean) => {
  useEffect(() => {
    const entry = SystemBars.pushStackEntry({ hidden });

    return () => {
      SystemBars.popStackEntry(entry);
    };
  }, [hidden]);
};

Usage:

useHideSystemBars(true);
useHideSystemBars(false);

[zoontek]

Android doesn't fire an event when the hide animation is done, but you can add and adjust a small delay:

const useHideSystemBars = (hidden: boolean, callback: () => void) => {
  useEffect(() => {
    const entry = SystemBars.pushStackEntry({ hidden });
    const timeout = setTimeout(callback, 250); // adjust delay

    return () => {
      SystemBars.popStackEntry(entry);
      clearTimeout(timeout);
    };
  }, [hidden, callback]);
};

useHideSystemBars(
  true,
  useCallback(() => {
    // do stuff, like updating state
  }, []),
);

[fredrikburmester]

Thank you!