Merge pull request #295 from mrzachnugent/@zach/277-device-color-scheme

mrzachnugent · web-flow · commit 89af21d1f44d · 2025-01-01T15:21:40.000-05:00
fix(#277): remove async local storage and Splashscreen prevent auto hide
diff --git a/apps/docs/src/content/docs/getting-started/initial-setup.mdx b/apps/docs/src/content/docs/getting-started/initial-setup.mdx
@@ -166,14 +166,14 @@ Follow the installation guide for NativeWind from the  <a target="_blank" href="
    **Platforms:** Web, iOS, and Android
 
     ```bash
-    npx expo install tailwindcss-animate @react-native-async-storage/async-storage class-variance-authority clsx tailwind-merge
+    npx expo install tailwindcss-animate class-variance-authority clsx tailwind-merge
     ```
   </TabItem>
   <TabItem label="Native only">
   **Platforms:** iOS and Android
 
     ```bash
-    npx expo install @react-native-async-storage/async-storage class-variance-authority clsx tailwind-merge
+    npx expo install class-variance-authority clsx tailwind-merge
     ```
    </TabItem>
 </Tabs>
@@ -361,9 +361,8 @@ and store the selected theme in the async storage.
   code={`
 import '~/global.css';
 
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import { Theme, ThemeProvider } from '@react-navigation/native';
-import { SplashScreen, Stack } from 'expo-router';
+import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import * as React from 'react';
 import { Platform } from 'react-native';
@@ -384,36 +383,22 @@ export {
   ErrorBoundary,
 } from 'expo-router';
 
-// Prevent the splash screen from auto-hiding before getting the color scheme.
-SplashScreen.preventAutoHideAsync();
-
 export default function RootLayout() {
-  const { colorScheme, setColorScheme, isDarkColorScheme } = useColorScheme();
+  const hasMounted = React.useRef(false);
+  const { colorScheme, isDarkColorScheme } = useColorScheme();
   const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
 
-  React.useEffect(() => {
-    (async () => {
-      const theme = await AsyncStorage.getItem('theme');
-      if (Platform.OS === 'web') {
-        // Adds the background color to the html element to prevent white background on overscroll.
-        document.documentElement.classList.add('bg-background');
-      }
-      if (!theme) {
-        AsyncStorage.setItem('theme', colorScheme);
-        setIsColorSchemeLoaded(true);
-        return;
-      }
-      const colorTheme = theme === 'dark' ? 'dark' : 'light';
-      if (colorTheme !== colorScheme) {
-        setColorScheme(colorTheme);
-
-        setIsColorSchemeLoaded(true);
-        return;
-      }
-      setIsColorSchemeLoaded(true);
-    })().finally(() => {
-      SplashScreen.hideAsync();
-    });
+  useIsomorphicLayoutEffect(() => {
+    if (hasMounted.current) {
+      return;
+    }
+
+    if (Platform.OS === 'web') {
+      // Adds the background color to the html element to prevent white background on overscroll.
+      document.documentElement.classList.add('bg-background');
+    }
+    setIsColorSchemeLoaded(true);
+    hasMounted.current = true;
   }, []);
 
   if (!isColorSchemeLoaded) {
@@ -427,6 +412,10 @@ export default function RootLayout() {
     </ThemeProvider>
   );
 }
+
+const useIsomorphicLayoutEffect =
+  Platform.OS === 'web' && typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+
 `} />
 
 ### Install and Set Up Icons
diff --git a/apps/showcase/app.json b/apps/showcase/app.json
@@ -7,6 +7,7 @@
     "icon": "./assets/images/icon.png",
     "scheme": "example",
     "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
     "runtimeVersion": {
       "policy": "appVersion"
     },
diff --git a/apps/showcase/app/_layout.tsx b/apps/showcase/app/_layout.tsx
@@ -1,9 +1,8 @@
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import { Theme, ThemeProvider, DefaultTheme, DarkTheme } from '@react-navigation/native';
 import { PortalHost } from '@rn-primitives/portal';
 import { DeprecatedUi } from '@rnr/reusables';
-import { SplashScreen, Stack } from 'expo-router';
+import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import * as React from 'react';
 import { Platform } from 'react-native';
@@ -35,38 +34,23 @@ export const unstable_settings = {
   initialRouteName: '(tabs)',
 };
 
-// Prevent the splash screen from auto-hiding before getting the color scheme.
-SplashScreen.preventAutoHideAsync();
-
 export default function RootLayout() {
-  const { colorScheme, setColorScheme, isDarkColorScheme } = useColorScheme();
+  const hasMounted = React.useRef(false);
+  const { colorScheme, isDarkColorScheme } = useColorScheme();
   const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
 
-  React.useEffect(() => {
-    (async () => {
-      const theme = await AsyncStorage.getItem('theme');
-      if (Platform.OS === 'web') {
-        // Adds the background color to the html element to prevent white background on overscroll.
-        document.documentElement.classList.add('bg-background');
-      }
-      if (!theme) {
-        setAndroidNavigationBar(colorScheme);
-        AsyncStorage.setItem('theme', colorScheme);
-        setIsColorSchemeLoaded(true);
-        return;
-      }
-      const colorTheme = theme === 'dark' ? 'dark' : 'light';
-      setAndroidNavigationBar(colorTheme);
-      if (colorTheme !== colorScheme) {
-        setColorScheme(colorTheme);
+  useIsomorphicLayoutEffect(() => {
+    if (hasMounted.current) {
+      return;
+    }
 
-        setIsColorSchemeLoaded(true);
-        return;
-      }
-      setIsColorSchemeLoaded(true);
-    })().finally(() => {
-      SplashScreen.hideAsync();
-    });
+    if (Platform.OS === 'web') {
+      // Adds the background color to the html element to prevent white background on overscroll.
+      document.documentElement.classList.add('bg-background');
+    }
+    setAndroidNavigationBar(colorScheme);
+    setIsColorSchemeLoaded(true);
+    hasMounted.current = true;
   }, []);
 
   if (!isColorSchemeLoaded) {
@@ -111,6 +95,9 @@ export default function RootLayout() {
   );
 }
 
+const useIsomorphicLayoutEffect =
+  Platform.OS === 'web' && typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+
 function toOptions(name: string) {
   const title = name
     .split('-')
diff --git a/apps/showcase/components/ThemeToggle.tsx b/apps/showcase/components/ThemeToggle.tsx
@@ -1,4 +1,3 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import { Pressable, View } from 'react-native';
 import { setAndroidNavigationBar } from '~/lib/android-navigation-bar';
 import { MoonStar } from '~/lib/icons/MoonStar';
@@ -8,14 +7,16 @@ import { cn } from '~/lib/utils';
 
 export function ThemeToggle() {
   const { isDarkColorScheme, setColorScheme } = useColorScheme();
+
+  function toggleColorScheme() {
+    const newTheme = isDarkColorScheme ? 'light' : 'dark';
+    setColorScheme(newTheme);
+    setAndroidNavigationBar(newTheme);
+  }
+
   return (
     <Pressable
-      onPress={() => {
-        const newTheme = isDarkColorScheme ? 'light' : 'dark';
-        setColorScheme(newTheme);
-        setAndroidNavigationBar(newTheme);
-        AsyncStorage.setItem('theme', newTheme);
-      }}
+      onPress={toggleColorScheme}
       className='web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2'
     >
       {({ pressed }) => (
diff --git a/apps/showcase/package.json b/apps/showcase/package.json
@@ -16,7 +16,6 @@
   "dependencies": {
     "@gorhom/bottom-sheet": "^4.6.0",
     "@hookform/resolvers": "^3.3.4",
-    "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/slider": "4.5.5",
     "@react-navigation/material-top-tabs": "^7.0.0",
     "@react-navigation/native": "^7.0.0",
@@ -33,31 +32,31 @@
     "@tanstack/react-table": "^8.11.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "expo": "^52.0.7",
+    "expo": "^52.0.23",
     "expo-blur": "~14.0.1",
     "expo-clipboard": "~7.0.0",
-    "expo-font": "~13.0.1",
+    "expo-font": "~13.0.2",
     "expo-haptics": "~14.0.0",
-    "expo-image": "~2.0.0",
+    "expo-image": "~2.0.3",
     "expo-linear-gradient": "~14.0.1",
-    "expo-linking": "~7.0.2",
-    "expo-navigation-bar": "~4.0.3",
-    "expo-router": "~4.0.5",
-    "expo-splash-screen": "~0.29.10",
+    "expo-linking": "~7.0.3",
+    "expo-navigation-bar": "~4.0.6",
+    "expo-router": "~4.0.15",
+    "expo-splash-screen": "~0.29.18",
     "expo-status-bar": "~2.0.0",
-    "expo-system-ui": "~4.0.3",
+    "expo-system-ui": "~4.0.6",
     "lucide-react-native": "^0.378.0",
     "nativewind": "^4.1.23",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-hook-form": "^7.49.2",
-    "react-native": "0.76.2",
+    "react-native": "0.76.5",
     "react-native-calendars": "^1.1302.0",
     "react-native-gesture-handler": "~2.20.2",
-    "react-native-pager-view": "6.4.1",
+    "react-native-pager-view": "6.5.1",
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "^4.0.0",
+    "react-native-screens": "^4.4.0",
     "react-native-svg": "15.8.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-toast-message": "^2.2.0",
diff --git a/packages/reusables/package.json b/packages/reusables/package.json
@@ -190,7 +190,7 @@
     "@tsconfig/recommended": "^1.0.1",
     "@types/react": "~18.3.12",
     "react": "18.3.1",
-    "react-native": "0.76.2"
+    "react-native": "0.76.5"
   },
   "peerDependencies": {
     "react": "*",
diff --git a/packages/templates/starter-base/app.json b/packages/templates/starter-base/app.json
@@ -7,12 +7,15 @@
     "icon": "./assets/images/icon.png",
     "scheme": "myapp",
     "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
     "splash": {
       "image": "./assets/images/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
       "supportsTablet": true
     },
@@ -27,9 +30,11 @@
       "output": "static",
       "favicon": "./assets/images/favicon.png"
     },
-    "plugins": ["expo-router"],
+    "plugins": [
+      "expo-router"
+    ],
     "experiments": {
       "typedRoutes": true
     }
   }
-}
+}
diff --git a/packages/templates/starter-base/app/_layout.tsx b/packages/templates/starter-base/app/_layout.tsx
@@ -1,8 +1,7 @@
 import '~/global.css';
 
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import { DarkTheme, DefaultTheme, Theme, ThemeProvider } from '@react-navigation/native';
-import { SplashScreen, Stack } from 'expo-router';
+import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import * as React from 'react';
 import { Platform } from 'react-native';
@@ -26,37 +25,23 @@ export {
   ErrorBoundary,
 } from 'expo-router';
 
-// Prevent the splash screen from auto-hiding before getting the color scheme.
-SplashScreen.preventAutoHideAsync();
-
 export default function RootLayout() {
-  const { colorScheme, setColorScheme, isDarkColorScheme } = useColorScheme();
+  const hasMounted = React.useRef(false);
+  const { colorScheme, isDarkColorScheme } = useColorScheme();
   const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
 
-  React.useEffect(() => {
-    (async () => {
-      const theme = await AsyncStorage.getItem('theme');
-      if (Platform.OS === 'web') {
-        // Adds the background color to the html element to prevent white background on overscroll.
-        document.documentElement.classList.add('bg-background');
-      }
-      if (!theme) {
-        AsyncStorage.setItem('theme', colorScheme);
-        setIsColorSchemeLoaded(true);
-        return;
-      }
-      const colorTheme = theme === 'dark' ? 'dark' : 'light';
-      if (colorTheme !== colorScheme) {
-        setColorScheme(colorTheme);
-        setAndroidNavigationBar(colorTheme);
-        setIsColorSchemeLoaded(true);
-        return;
-      }
-      setAndroidNavigationBar(colorTheme);
-      setIsColorSchemeLoaded(true);
-    })().finally(() => {
-      SplashScreen.hideAsync();
-    });
+  useIsomorphicLayoutEffect(() => {
+    if (hasMounted.current) {
+      return;
+    }
+
+    if (Platform.OS === 'web') {
+      // Adds the background color to the html element to prevent white background on overscroll.
+      document.documentElement.classList.add('bg-background');
+    }
+    setAndroidNavigationBar(colorScheme);
+    setIsColorSchemeLoaded(true);
+    hasMounted.current = true;
   }, []);
 
   if (!isColorSchemeLoaded) {
@@ -79,3 +64,6 @@ export default function RootLayout() {
     </ThemeProvider>
   );
 }
+
+const useIsomorphicLayoutEffect =
+  Platform.OS === 'web' && typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
diff --git a/packages/templates/starter-base/components/ThemeToggle.tsx b/packages/templates/starter-base/components/ThemeToggle.tsx
@@ -1,4 +1,3 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import { Pressable, View } from 'react-native';
 import { setAndroidNavigationBar } from '~/lib/android-navigation-bar';
 import { MoonStar } from '~/lib/icons/MoonStar';
@@ -8,14 +7,16 @@ import { cn } from '~/lib/utils';
 
 export function ThemeToggle() {
   const { isDarkColorScheme, setColorScheme } = useColorScheme();
+
+  function toggleColorScheme() {
+    const newTheme = isDarkColorScheme ? 'light' : 'dark';
+    setColorScheme(newTheme);
+    setAndroidNavigationBar(newTheme);
+  }
+
   return (
     <Pressable
-      onPress={() => {
-        const newTheme = isDarkColorScheme ? 'light' : 'dark';
-        setColorScheme(newTheme);
-        setAndroidNavigationBar(newTheme);
-        AsyncStorage.setItem('theme', newTheme);
-      }}
+      onPress={toggleColorScheme}
       className='web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2'
     >
       {({ pressed }) => (
diff --git a/packages/templates/starter-base/package.json b/packages/templates/starter-base/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
