Stringsaeed · March 2, 2022 16:00 · Mar 2, 2022 · Mar 2, 2022 · Mar 2, 2022 · Mar 2, 2022
diff --git a/useGetFirstTime.md b/useGetFirstTime.md
@@ -1,4 +1,54 @@
 ### useGetFirstTime
 
-#### Description
-React Hook used for when user first time opens the app so if you want to show tutorial modal or load only onboarding stack in react-navigation & react-native 
+#### Description:
+React Hook used for when user first time opens the app so if you want to show tutorial modal or load only onboarding stack in react-navigation & react-native 
+
+#### Usage:
+```tsx
+import React, { useEffect } from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+
+const OnBoardingStack = createStackNavigator();
+const AppStack = createStackNavigation();
+
+const OnboardingNavigator = ({ setFirstTime }) => {
+  useEffect(() => {
+    setFirstTime();
+  }, [setFirstTime]);
+
+  return (
+    <OnBoardingStack.Navigator>
+      <OnBoardingStack.Screen
+        name="onBoarding1"
+        component={OnBoardingOneScreen}
+      />
+      <OnBoardingStack.Screen
+        name="onBoarding2"
+        component={OnBoardingTwoScreen}
+      />
+    </OnBoardingStack.Navigator>
+  );
+};
+
+const AppNavigator = () => {
+  return (
+    <AppStack.Navigator>
+      <AppStack.Screen name="App1" component={AppOneScreen} />
+      <AppStack.Screen name="App2" component={AppTwoScreen} />
+    </AppStack.Navigator>
+  );
+};
+
+const App = () => {
+  const [firstTime, setFirstTime] = useGetFirstTime();
+
+  return (
+    <NavigationContainer>
+      {firstTime ? <OnboardingNavigator /> : <AppNavigator />}
+    </NavigationContainer>
+  );
+};
+
+export default App;
+```
diff --git a/useGetFirstTime.md b/useGetFirstTime.md
@@ -1,3 +1,4 @@
 ### useGetFirstTime
 
-    #react-native #react 
+#### Description
+React Hook used for when user first time opens the app so if you want to show tutorial modal or load only onboarding stack in react-navigation & react-native 
diff --git a/useGetFirstTime.md b/useGetFirstTime.md
@@ -1 +1,3 @@
-‎‎
+### useGetFirstTime
+
+    #react-native #react 
diff --git a/useGetFirstTime → useGetFirstTime.md b/useGetFirstTime → useGetFirstTime.md
diff --git a/Introduction.md → useGetFirstTime b/Introduction.md → useGetFirstTime
diff --git a/Introduction.md b/Introduction.md
@@ -0,0 +1 @@
+‎‎
diff --git a/useGetFirstTime.js b/useGetFirstTime.js
@@ -1,28 +1,28 @@
 import { useCallback, useLayoutEffect, useState } from "react";
 import { useAsyncStorage } from "@react-native-async-storage/async-storage";
 
-const useGetFirstTimeTipping = () => {
-  const [firstTimeTipping, setFirstTimeTipping] = useState(false);
-  const { getItem, setItem } = useAsyncStorage("TippingModalVisited");
+const useGetFirstTime = () => {
+  const [firstTime, setFirstTime] = useState(false);
+  const { getItem, setItem } = useAsyncStorage("FirstTime");
   const readItemFromStorage = useCallback(async () => {
     const item = await getItem();
-    setFirstTimeTipping(!item);
+    setFirstTime(!item);
   }, [getItem]);
 
-  const setTippingModalVisited = useCallback(async () => {
-    setFirstTimeTipping(true);
+  const setModalVisited = useCallback(async () => {
+    setFirstTime(true);
     await setItem(true);
   }, [setItem]);
 
   // using useLayoutEffect to avoid re-rendering
   // so it get value before view mounts
-  // of course the modal won't mount before
+  // of course, the modal won't mount before
   // we check for layout height or the position.
   useLayoutEffect(() => {
     readItemFromStorage();
   }, [readItemFromStorage]);
 
-  return [firstTimeTipping, setTippingModalVisited];
+  return [firstTime, setModalVisited];
 };
 
-export default useGetFirstTimeTipping;
+export default useGetFirstTime;
diff --git a/useGetFirstTime.js b/useGetFirstTime.js
@@ -0,0 +1,28 @@
+import { useCallback, useLayoutEffect, useState } from "react";
+import { useAsyncStorage } from "@react-native-async-storage/async-storage";
+
+const useGetFirstTimeTipping = () => {
+  const [firstTimeTipping, setFirstTimeTipping] = useState(false);
+  const { getItem, setItem } = useAsyncStorage("TippingModalVisited");
+  const readItemFromStorage = useCallback(async () => {
+    const item = await getItem();
+    setFirstTimeTipping(!item);
+  }, [getItem]);
+
+  const setTippingModalVisited = useCallback(async () => {
+    setFirstTimeTipping(true);
+    await setItem(true);
+  }, [setItem]);
+
+  // using useLayoutEffect to avoid re-rendering
+  // so it get value before view mounts
+  // of course the modal won't mount before
+  // we check for layout height or the position.
+  useLayoutEffect(() => {
+    readItemFromStorage();
+  }, [readItemFromStorage]);
+
+  return [firstTimeTipping, setTippingModalVisited];
+};
+
+export default useGetFirstTimeTipping;
No results found