Why it is needed? Currently I don't have a way to hide the animate

After a bit if reflexion, it would be clearer with a TS union: <div class="highlig

Manual `hide` functionality when using `useHideAnimation` about react-native-bootsplash HOT 5 CLOSED

kyle-belle commented on July 18, 2024

Manual `hide` functionality when using `useHideAnimation`

from react-native-bootsplash.

Comments (5)

kyle-belle commented on July 18, 2024

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);
      }}
   />
 )}

from react-native-bootsplash.

zoontek commented on July 18, 2024

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,
});

from react-native-bootsplash.

kyle-belle commented on July 18, 2024

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.

from react-native-bootsplash.

zoontek commented on July 18, 2024

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");
        }}
      />
    )}
  </>
);