1

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.

0 Answers0