Hello does anyone knows why UI is flickering when I implement the same logic using redux it does not happen but for reason on zustand it's happen here is my code
App.tsx
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { MytabBarone } from "@src/navigations/BottomNavigation/MytabBarone";
import { HomeTabParamList, RootStackParamList } from "@src/navigations/type";
import HomeScreen from "@src/screens/Home/HomeScreen";
import Login from "@src/screens/Login/Login";
import OnBoarding from "@src/screens/OnBoardingScreen/OnBoardingScreen";
import { useAppLaunchStore } from "@src/store/AppLaunch";
import { StyleSheet } from "react-native";
import "react-native-gesture-handler";
const Stack = createStackNavigator<RootStackParamList>();
const BottomTab = createBottomTabNavigator<HomeTabParamList>();
export default function App() {
const isAppLaunchFirst = useAppLaunchStore((state) => state.isAppLaunchFirst);
console.log(isAppLaunchFirst);
const isAuth = false;
return (
<>
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
{isAuth && (
<Stack.Screen name='Appartment' component={AppartmentBottomTab} />
)}
{isAppLaunchFirst ? (
<Stack.Screen name='OnBoarding' component={OnBoarding} />
) : null}
<Stack.Screen name='Login' component={Login} />
</Stack.Navigator>
</NavigationContainer>
</>
);
}
const AppartmentBottomTab = () => {
return (
<BottomTab.Navigator
tabBar={(props) => <MytabBarone {...props} />}
initialRouteName={"Home"}
screenOptions={{ headerShown: false }}
>
<BottomTab.Screen name='Home' component={HomeScreen} />
</BottomTab.Navigator>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
const OnBoarding = ({ navigation }: RootStackScreenProps<"OnBoarding">) => {
const setIsAppLaunchFirst = useAppLaunchStore(
(state) => state.setIsAppLaunchFirst
);
return (
<View style={styles.container}>
<TouchableOpacity
style={{
height: 50,
width: "50%",
backgroundColor: COLORS.blue,
borderRadius: 5,
justifyContent: "center",
position: "absolute",
bottom: 120,
}}
onPress={() => {
setIsAppLaunchFirst(false);
navigation.navigate("Login");
}}
>
<Text style={{ textAlign: "center", color: COLORS.white }}>
COMMENCER
</Text>
</TouchableOpacity>
</View>
);
};
zustand store
import { deleteItemAsync, getItemAsync, setItemAsync } from "expo-secure-store";
import { create } from "zustand";
import { PersistStorage, persist } from "zustand/middleware";
interface AppLaunchType {
isAppLaunchFirst: boolean | null;
setIsAppLaunchFirst: (value: boolean) => void;
}
const storage: PersistStorage<AppLaunchType> = {
setItem: async (key, value) => {
await setItemAsync(key, JSON.stringify(value));
},
getItem: async (name) => {
const value = await getItemAsync(name);
return value !== null ? JSON.parse(value) : undefined;
},
removeItem: async (key) => {
await deleteItemAsync(key);
},
};
export const useAppLaunchStore = create(
persist<AppLaunchType>(
(set) => ({
isAppLaunchFirst: true,
setIsAppLaunchFirst: (value) => {
set(() => ({ isAppLaunchFirst: value }));
},
}),
{
name: "AppFirstLaunch",
storage,
}
)
);
please any I tried all the possible solution in this topic
I have tried all the implementations related to the same topic on Stack Overflow, but none of them seem to work.