Manual hide functionality when using useHideAnimation

[kyle-belle]

Why it is needed?

Currently I don't have a way to hide the animated bootsplash only after load. it automatically hides on its own. When using the regular bootsplash i can call hide when i want which has been helpful for my use case. I'd really like to be able to call hide manually for the animated version. also react-navigation's initialization causes the animation to lag/hang and i am not able to delay it until onReady

Possible implementation

No response

Code sample

const {container, logo, hide /*, brand */} = BootSplash.useHideAnimation({
...
})

useEffect(() => {
  isReady && hide();
}, [isReady]);

[kyle-belle]

I kinda get around it by having the visible state default to null then then only showing the animated bootSplash (setting visible to true) when the onReady is called

const [bootSplashVisible, setBootSplashVisible] = useState<boolean | null>(
    null
  );

useEffect(() => {
    SetNavBarColor(bootSplashVisible !== false? 'transparent' : isDarkMode ? '#242424' : '#FFFFFF', !isDarkMode, true);
  }, [isDarkMode, bootSplashVisible]);

...

<StatusBar translucent={bootSplashVisible !== false} backgroundColor={bootSplashVisible !== false ? 'transparent' : isDarkMode ? '#242424' : '#FFFFFF' }
 barStyle={isDarkMode ? 'light-content' : 'dark-content'} />

<NavigationContainer
    onReady={() => {
      setBootSplashVisible(true); 
      // void BootSplash.hide({fade: true});
    }}
}}>
   <MainNavigator />
</NavigationContainer>

{bootSplashVisible && (
   <AnimatedBootSplash
      onAnimationEnd={() => {
         setBootSplashVisible(false);
      }}
   />
 )}

[zoontek]

This is a good idea, but having a hide function to call is actually a breaking change as we will need to fire it.

What do you think about this instead?

// ready is a prop and handled by the parent. default to true (auto hide)
const { container, logo } = BootSplash.useHideAnimation({
  ready: isReady,
});

[kyle-belle]

This is a good idea, but having a hide function to call is actually a breaking change as we will need to fire it.

What do you think about this instead?

// ready is a prop and handled by the parent. default to true (auto hide)
const { container, logo } = BootSplash.useHideAnimation({
  ready: isReady,
});

Hi. Yeah i also think this would be fine.

[zoontek]

After a bit if reflexion, it would be clearer with a TS union:

const [bootSplashState, setBootSplashState] = useState<
  "visible" | "hiding" | "hidden"
>("visible");

const barColor =
  bootSplashState === "hidden"
    ? isDarkMode
      ? "#242424"
      : "#FFFFFF"
    : "transparent";

useEffect(() => {
  SetNavBarColor(barColor, !isDarkMode, true);
}, [barColor, isDarkMode]);

// ...

return (
  <>
    <StatusBar
      translucent={bootSplashState !== "hidden"}
      barStyle={isDarkMode ? "light-content" : "dark-content"}
      backgroundColor={barColor}
    />

    <NavigationContainer
      onReady={() => {
        setBootSplashState("hiding");
      }}
    >
      <MainNavigator />
    </NavigationContainer>

    {bootSplashState === "hiding" && (
      <AnimatedBootSplash
        onAnimationEnd={() => {
          setBootSplashState("hidden");
        }}
      />
    )}
  </>
);

[maksim-romanov]

You can hide splash screen manually call start animation function