nx-react-native-cli 2.7.1 → 3.0.0

package/templates/shared/apps/mobile/src/components/molecules/ScreenContainer/screen-container.component.tsx

@@ -1,12 +1,9 @@
-import { useFocusEffect } from '@react-navigation/native';
 import React, { ReactElement } from 'react';
 import {
   NativeScrollEvent,
   NativeSyntheticEvent,
   Platform,
   RefreshControlProps,
-  StatusBar,
-  StatusBarStyle,
   StyleProp,
   View,
   ViewStyle,
@@ -15,20 +12,15 @@ import { ScrollView as RNScrollView } from 'react-native-gesture-handler';
 import { Edge, SafeAreaProviderProps, SafeAreaView } from 'react-native-safe-area-context';
 
 import { KeyboardAwareScrollView } from '@/components';
-import CONFIG from '@/config';
 import { tw } from '@/tailwind';
 
 type Props = SafeAreaProviderProps & {
-  barStyle?: StatusBarStyle;
   scrollViewRef?: React.RefObject<RNScrollView | null>;
   containerStyle?: StyleProp<ViewStyle>;
   excludedEdges?: Edge[];
   extraBottomPadding?: number;
   hasScroll?: boolean;
   refreshControl?: ReactElement;
-  shouldShowStatusBar?: boolean;
-  shouldBeTranslucent?: boolean;
-  statusBarColor?: string;
   useSafeAreaView?: boolean;
   onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 };
@@ -43,7 +35,6 @@ const safeAreaViewEdges: Edge[] = Platform.select({
 
 export function ScreenContainer(props: Props) {
   const {
-    barStyle = 'dark-content',
     children,
     containerStyle,
     excludedEdges = [],
@@ -52,20 +43,9 @@ export function ScreenContainer(props: Props) {
     onScroll,
     refreshControl,
     scrollViewRef,
-    shouldBeTranslucent = false,
-    shouldShowStatusBar = true,
-    statusBarColor = 'transparent',
     style,
     useSafeAreaView = true,
   } = props;
-  useFocusEffect(() => {
-    StatusBar.setHidden(!shouldShowStatusBar);
-    if (CONFIG.IS_ANDROID) {
-      StatusBar.setBackgroundColor(statusBarColor);
-      StatusBar.setTranslucent(!shouldBeTranslucent);
-      StatusBar.setBarStyle(barStyle);
-    }
-  });
 
   const defaultContainerStyle = [
     defaultStyle,
@@ -76,7 +56,7 @@ export function ScreenContainer(props: Props) {
 
   if (!useSafeAreaView) {
     return (
-      <View style={[tw`flex-1 bg-white`, style]}>
+      <View style={[tw`dark:bg-background flex-1 bg-white`, style]}>
         {hasScroll ? (
           <KeyboardAwareScrollView
             containerStyle={defaultContainerStyle}
@@ -99,7 +79,7 @@ export function ScreenContainer(props: Props) {
       : safeAreaViewEdges;
 
   return (
-    <SafeAreaView edges={edges} style={[tw`flex-1 bg-white`, style]}>
+    <SafeAreaView edges={edges} style={[tw`dark:bg-background flex-1 bg-white`, style]}>
       {hasScroll ? (
         <KeyboardAwareScrollView
           containerStyle={defaultContainerStyle}

package/templates/shared/apps/mobile/src/components/molecules/ScreenHeader/screen-header.component.tsx

@@ -39,7 +39,7 @@ export function ScreenHeader(props: Props) {
         {extraActionComponent ? (
           extraActionComponent
         ) : (
-          <GearIcon height={25} style={tw`text-black`} width={25} />
+          <GearIcon height={25} style={tw`dark:text-foreground text-gray-900`} width={25} />
         )}
       </View>
     </TouchableOpacity>
@@ -51,7 +51,7 @@ export function ScreenHeader(props: Props) {
         {hasBackButton && <BackButton style={tw`z-10`} onPress={onBackPress} />}
         <Typography
           style={[
-            tw`text-primary-700 absolute inset-x-0 top-4 text-center text-xl font-medium`,
+            tw`dark:text-foreground absolute inset-x-0 top-4 text-center text-xl font-medium text-gray-900`,
             titleStyle,
           ]}
         >

package/templates/shared/apps/mobile/src/hooks/index.ts

@@ -4,6 +4,7 @@ export * from './useDebounce.hook';
 export * from './useGetLayoutHeight.hook';
 export * from './useGetLayoutWidth.hook';
 export * from './useNavigation.hook';
+export * from './usePushNotifications.hook';
 export * from './useShakeAnimation.hook';
 export * from './useTextInputChangeFocus.hook';
 export * from './useThrottle.hook';

package/templates/shared/apps/mobile/src/hooks/usePushNotifications.hook.ts

@@ -0,0 +1,104 @@
+import { useEffect } from 'react';
+import { AppState, AppStateStatus, Linking } from 'react-native';
+import { checkNotifications, requestNotifications, RESULTS } from 'react-native-permissions';
+
+import { Alert } from '@/components/atoms';
+import { useLocalStorageStore } from '@/stores/local-storage.store';
+import { devLog } from '@/utils/log.util';
+
+function showEnableNotificationsAlert() {
+  Alert.info({
+    actions: [
+      { label: 'Later', variant: 'cancel' },
+      { label: 'Open Settings', onPress: () => Linking.openSettings() },
+    ],
+    message: 'Enable notifications to stay updated with important alerts and messages.',
+    title: 'Notifications Disabled',
+  });
+}
+
+function isGranted(status: string): boolean {
+  return status === RESULTS.GRANTED || status === RESULTS.LIMITED;
+}
+
+// TODO: Implement once @react-native-firebase/messaging is installed
+async function registerFcmToken() {
+  devLog('registerFcmToken: Firebase messaging not configured yet');
+}
+
+// TODO: Implement once @react-native-firebase/messaging is installed
+async function removeFcmToken() {
+  devLog('removeFcmToken: Firebase messaging not configured yet');
+}
+
+function syncPushNotificationState(status: string) {
+  useLocalStorageStore.getState().setPushNotificationsEnabled(isGranted(status));
+}
+
+export async function requestPushNotification() {
+  const { status } = await checkNotifications();
+  syncPushNotificationState(status);
+
+  if (isGranted(status)) {
+    await registerFcmToken();
+
+    return;
+  }
+
+  const { status: requestStatus } = await requestNotifications([]);
+
+  if (isGranted(requestStatus)) {
+    syncPushNotificationState(requestStatus);
+    await registerFcmToken();
+
+    return;
+  }
+
+  const isBlocked = status === RESULTS.BLOCKED || requestStatus === RESULTS.BLOCKED;
+  if (isBlocked) {
+    showEnableNotificationsAlert();
+  }
+}
+
+async function handleAppForeground() {
+  const { status } = await checkNotifications();
+  syncPushNotificationState(status);
+
+  if (!isGranted(status)) {
+    return;
+  }
+
+  await registerFcmToken();
+}
+
+export async function removeCurrentFcmToken(): Promise<void> {
+  try {
+    await removeFcmToken();
+  } catch (error) {
+    devLog('Failed to remove FCM token:', error);
+  }
+}
+
+export function usePushNotifications(isAuthenticated: boolean) {
+  useEffect(() => {
+    if (!isAuthenticated) {
+      return;
+    }
+
+    const handleAppStateChange = (nextState: AppStateStatus) => {
+      if (nextState !== 'active') {
+        return;
+      }
+
+      handleAppForeground().catch((error) => {
+        devLog('Failed to check notification permission on foreground:', error);
+      });
+    };
+
+    const subscription = AppState.addEventListener('change', handleAppStateChange);
+
+    return () => {
+      subscription.remove();
+    };
+  }, [isAuthenticated]);
+}

package/templates/shared/apps/mobile/src/hooks/useToggleDarkMode.hook.tsx

@@ -1,9 +1,31 @@
+import { useCallback } from 'react';
 import { useAppColorScheme } from 'twrnc';
 
+import { useLocalStorageStore } from '@/stores';
+import { ColorScheme } from '@/stores/theme.slice';
 import { tw } from '@/tailwind';
 
 export function useToggleDarkMode() {
-  const [, toggleColorScheme] = useAppColorScheme(tw);
+  const [colorScheme, , setTwColorScheme] = useAppColorScheme(tw);
+  const setStoredColorScheme = useLocalStorageStore((s) => s.setColorScheme);
 
-  return toggleColorScheme;
+  const toggleColorScheme = useCallback(() => {
+    const next: ColorScheme = colorScheme === 'dark' ? 'light' : 'dark';
+    setTwColorScheme(next);
+    setStoredColorScheme(next);
+  }, [colorScheme, setTwColorScheme, setStoredColorScheme]);
+
+  const setColorScheme = useCallback(
+    (scheme: ColorScheme) => {
+      setTwColorScheme(scheme);
+      setStoredColorScheme(scheme);
+    },
+    [setTwColorScheme, setStoredColorScheme],
+  );
+
+  return {
+    colorScheme: (colorScheme ?? 'light') as ColorScheme,
+    setColorScheme,
+    toggleColorScheme,
+  };
 }

package/templates/shared/apps/mobile/src/icons/alert-triangle.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
+  <path d="M12 9v4"/>
+  <path d="M12 17h.01"/>
+</svg>

package/templates/shared/apps/mobile/src/icons/check-circle.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+  <path d="m9 11 3 3L22 4"/>
+</svg>

package/templates/shared/apps/mobile/src/icons/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>

package/templates/shared/apps/mobile/src/icons/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>

package/templates/shared/apps/mobile/src/icons/index.ts

@@ -1,6 +1,23 @@
+import AlertTriangleIcon from './alert-triangle.svg';
 import ArrowLeftIcon from './arrow-left.svg';
+import CheckCircleIcon from './check-circle.svg';
+import ChevronDownIcon from './chevron-down.svg';
+import ChevronRightIcon from './chevron-right.svg';
 import CrossIcon from './cross.svg';
 import GearIcon from './gear.svg';
+import InfoIcon from './info.svg';
 import KeyboardHideIcon from './keyboard-hide.svg';
+import XCircleIcon from './x-circle.svg';
 
-export { ArrowLeftIcon, CrossIcon, GearIcon, KeyboardHideIcon };
+export {
+  AlertTriangleIcon,
+  ArrowLeftIcon,
+  CheckCircleIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CrossIcon,
+  GearIcon,
+  InfoIcon,
+  KeyboardHideIcon,
+  XCircleIcon,
+};

package/templates/shared/apps/mobile/src/icons/info.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"/>
+  <path d="M12 16v-4"/>
+  <path d="M12 8h.01"/>
+</svg>

package/templates/shared/apps/mobile/src/icons/x-circle.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"/>
+  <path d="m15 9-6 6"/>
+  <path d="m9 9 6 6"/>
+</svg>

package/templates/shared/apps/mobile/src/routes/index.tsx

@@ -1,14 +1,13 @@
-import { DefaultTheme, NavigationContainer, Theme } from '@react-navigation/native';
+import { DarkTheme, DefaultTheme, NavigationContainer, Theme } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import React, { useEffect } from 'react';
-import { StatusBar } from 'react-native';
+import React, { useMemo } from 'react';
 import BootSplash from 'react-native-bootsplash';
 
-import CONFIG from '@/config';
 import { Routes } from '@/routes';
 import PrivateRoutes from '@/routes/privateRoutes';
 import PublicRoutes from '@/routes/publicRoutes';
 import { screenOptions } from '@/routes/screen-options';
+import { useLocalStorageStore } from '@/stores';
 import { colors } from '@/tailwind';
 
 const RootStack = createNativeStackNavigator();
@@ -17,11 +16,19 @@ export const noAnimation = {
   animationEnabled: false,
 };
 
-const navigationTheme: Theme = {
+const lightNavigationTheme: Theme = {
   ...DefaultTheme,
   colors: {
     ...DefaultTheme.colors,
-    background: colors.gray[50],
+    background: colors.white,
+  },
+};
+
+const darkNavigationTheme: Theme = {
+  ...DarkTheme,
+  colors: {
+    ...DarkTheme.colors,
+    background: colors.background,
   },
 };
 
@@ -30,15 +37,13 @@ export default function ApplicationRoutes() {
   // const isUserAuthenticated = useLocalStorageState((state) => !!state.accessToken);
   const isUserAuthenticated = false;
   const initialRouteName = isUserAuthenticated ? Routes.PRIVATE : Routes.PUBLIC;
+  const colorScheme = useLocalStorageStore((s) => s.colorScheme);
+  const isDark = colorScheme === 'dark';
 
-  useEffect(() => {
-    StatusBar.setHidden(false);
-    if (CONFIG.IS_ANDROID) {
-      StatusBar.setBackgroundColor('transparent');
-      StatusBar.setTranslucent(true);
-      StatusBar.setBarStyle('dark-content');
-    }
-  }, []);
+  const navigationTheme = useMemo(
+    () => (isDark ? darkNavigationTheme : lightNavigationTheme),
+    [isDark],
+  );
 
   // if (isLoading) {
   //   return <ScreenLoader />;

package/templates/shared/apps/mobile/src/screens/LandingScreen/landing.screen.tsx

@@ -1,17 +1,241 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Image, View } from 'react-native';
 
-import { ScreenContainer, ScreenHeader } from '@/components';
+import {
+  Alert,
+  BottomSheet,
+  Button,
+  DateModalInput,
+  DateTextInput,
+  Divider,
+  InputLayout,
+  Modal,
+  OutlinedButton,
+  ScreenContainer,
+  ScreenHeader,
+  SelectDropdown,
+  Skeleton,
+  TextInput,
+  Toast,
+  Typography,
+  useBottomSheet,
+  useModal,
+} from '@/components';
+import { requestPushNotification, useToggleDarkMode } from '@/hooks';
 import { PublicScreenProps, Screens } from '@/routes';
-import { toast } from '@/utils';
+import { tw } from '@/tailwind';
 
-export function LandingScreen(props: PublicScreenProps<Screens.LANDING>) {
-  function toastHi() {
-    toast('Hi!');
-  }
+const DROPDOWN_OPTIONS = [
+  { id: '1', label: 'React Native' },
+  { id: '2', label: 'Flutter' },
+  { id: '3', label: 'SwiftUI' },
+  { id: '4', label: 'Jetpack Compose' },
+];
+
+function SectionTitle({ title }: { title: string }) {
+  return <Typography style={tw`mb-2 mt-6 text-lg font-semibold`}>{title}</Typography>;
+}
+
+export function LandingScreen(_props: PublicScreenProps<Screens.LANDING>) {
+  const [textValue, setTextValue] = useState('');
+  const [dateModalValue, setDateModalValue] = useState<Date | undefined>();
+  const [dateTextValue, setDateTextValue] = useState<Date | undefined>();
+  const [selectedDropdown, setSelectedDropdown] = useState<string | undefined>();
+  const { hideModal, isVisible: isModalVisible, showModal } = useModal();
+  const { closeSheet, expandSheet, sheetRef } = useBottomSheet();
+  const { colorScheme, toggleColorScheme } = useToggleDarkMode();
+  const isDark = colorScheme === 'dark';
 
   return (
     <ScreenContainer>
-      <ScreenHeader title="Landing" onExtraActionPress={toastHi} />
+      <ScreenHeader hasBackButton={false} title="Component Showcase" />
+      <View style={tw`px-4 pb-8`}>
+        {/* Logo */}
+        <View style={tw`mt-4 items-center`}>
+          <Image source={require('@/assets/images/logo.png')} style={{ height: 80, width: 80 }} />
+        </View>
+
+        {/* Theme Toggle */}
+        <SectionTitle title="Theme" />
+        <Button
+          title={isDark ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
+          onPress={toggleColorScheme}
+        />
+
+        <Button
+          style={tw`mt-3`}
+          title="Request Push Notifications"
+          onPress={() => requestPushNotification()}
+        />
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Typography */}
+        <SectionTitle title="Typography" />
+        <Typography style={tw`text-2xl font-bold`}>Heading Bold</Typography>
+        <Typography style={tw`text-lg font-semibold`}>Subheading Semibold</Typography>
+        <Typography style={tw`text-base`}>Body text regular</Typography>
+        <Typography style={tw`text-sm text-gray-500`}>Caption text</Typography>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Buttons */}
+        <SectionTitle title="Buttons" />
+        <View style={tw`gap-3`}>
+          <Button title="Primary Button" onPress={() => {}} />
+          <Button isLoading title="Loading Button" onPress={() => {}} />
+          <Button isDisabled title="Disabled Button" onPress={() => {}} />
+          <OutlinedButton title="Outlined Button" onPress={() => {}} />
+        </View>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* TextInput */}
+        <SectionTitle title="Text Input" />
+        <View style={tw`gap-3`}>
+          <InputLayout isRequired label="Name">
+            <TextInput
+              placeholder="Enter your name"
+              value={textValue}
+              onChangeText={setTextValue}
+            />
+          </InputLayout>
+          <InputLayout error="This field is required" label="With Error">
+            <TextInput placeholder="Something went wrong" value="" onChangeText={() => {}} />
+          </InputLayout>
+        </View>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Select Dropdown */}
+        <SectionTitle title="Select Dropdown" />
+        <InputLayout label="Framework">
+          <SelectDropdown
+            options={DROPDOWN_OPTIONS}
+            placeholder="Choose a framework"
+            selectedId={selectedDropdown}
+            onSelect={setSelectedDropdown}
+          />
+        </InputLayout>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Date Inputs */}
+        <SectionTitle title="Date Modal Input" />
+        <InputLayout label="Birthday">
+          <DateModalInput
+            maximumDate={new Date()}
+            placeholder="Pick a date"
+            value={dateModalValue}
+            onChange={setDateModalValue}
+          />
+        </InputLayout>
+
+        <SectionTitle title="Date Text Input" />
+        <InputLayout label="Date of Birth">
+          <DateTextInput value={dateTextValue} onChange={setDateTextValue} />
+        </InputLayout>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Skeleton */}
+        <SectionTitle title="Skeleton" />
+        <View style={tw`gap-2`}>
+          <Skeleton isLoading>
+            <View style={tw`h-5 w-3/4 rounded`} />
+          </Skeleton>
+          <Skeleton isLoading>
+            <View style={tw`h-5 w-1/2 rounded`} />
+          </Skeleton>
+          <Skeleton isLoading>
+            <View style={tw`h-10 w-full rounded-xl`} />
+          </Skeleton>
+        </View>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Alert */}
+        <SectionTitle title="Alerts" />
+        <View style={tw`gap-3`}>
+          <Button
+            title="Show Error Alert"
+            onPress={() =>
+              Alert.error({
+                message: 'Something went wrong. Please try again.',
+                title: 'Request Failed',
+              })
+            }
+          />
+          <Button
+            title="Show Success Alert"
+            onPress={() =>
+              Alert.success({
+                title: 'Profile Updated',
+              })
+            }
+          />
+          <Button
+            title="Show Warning Alert"
+            onPress={() =>
+              Alert.warning({
+                actions: [
+                  { label: 'Cancel', variant: 'cancel' },
+                  { label: 'Delete', onPress: () => {} },
+                ],
+                message: 'This action cannot be undone.',
+                title: 'Delete Account',
+              })
+            }
+          />
+        </View>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Toast */}
+        <SectionTitle title="Toasts" />
+        <View style={tw`gap-3`}>
+          <Button title="Success Toast" onPress={() => Toast.success('Profile saved')} />
+          <Button title="Error Toast" onPress={() => Toast.error('Something went wrong')} />
+          <Button title="Info Toast" onPress={() => Toast.info('New version available')} />
+          <Button title="Warning Toast" onPress={() => Toast.warning('Check your connection')} />
+        </View>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Modal */}
+        <SectionTitle title="Modal" />
+        <Button title="Open Modal" onPress={showModal} />
+        <Modal isVisible={isModalVisible} onBackButtonPress={hideModal} onBackdropPress={hideModal}>
+          <View pointerEvents="box-none" style={tw`flex-1 items-center justify-center`}>
+            <View style={tw`dark:bg-sheet mx-8 w-[85%] rounded-2xl bg-white p-6`}>
+              <Typography style={tw`text-lg font-semibold`}>Modal Title</Typography>
+              <Typography style={tw`dark:text-subtitle mt-2 text-sm text-gray-500`}>
+                This is a custom modal with any content you want.
+              </Typography>
+              <Button style={tw`mt-4`} title="Close" onPress={hideModal} />
+            </View>
+          </View>
+        </Modal>
+
+        <Divider style={tw`mt-4`} />
+
+        {/* Bottom Sheet */}
+        <SectionTitle title="Bottom Sheet" />
+        <Button title="Open Bottom Sheet" onPress={expandSheet} />
+        <BottomSheet
+          backgroundStyle={tw`dark:bg-sheet bg-white`}
+          sheetRef={sheetRef}
+          snapPoints={['40%']}
+        >
+          <View style={tw`p-6`}>
+            <Typography style={tw`text-lg font-semibold`}>Bottom Sheet</Typography>
+            <Typography style={tw`dark:text-subtitle mt-2 text-sm text-gray-500`}>
+              Swipe down or tap the backdrop to dismiss.
+            </Typography>
+            <Button style={tw`mt-4`} title="Close" onPress={closeSheet} />
+          </View>
+        </BottomSheet>
+      </View>
     </ScreenContainer>
   );
 }

package/templates/shared/apps/mobile/src/stores/local-storage.store.ts

@@ -1,15 +1,17 @@
 import { StateCreator, create } from 'zustand';
 import { PersistOptions, createJSONStorage, persist } from 'zustand/middleware';
 
+import { createThemeSlice, ThemeSlice } from './theme.slice';
 import { createUserSlice, UserSlice } from './user.slice';
 
 import { MmkvStorage } from '@/stores/mmkvStorage';
 
-export type LocalStorageStore = UserSlice & {
-  _hasHydrated: boolean;
-  setHasHydrated: (hasHydrated: boolean) => void;
-  clear: () => void;
-};
+export type LocalStorageStore = UserSlice &
+  ThemeSlice & {
+    _hasHydrated: boolean;
+    setHasHydrated: (hasHydrated: boolean) => void;
+    clear: () => void;
+  };
 
 type MyPersist = (
   config: StateCreator<LocalStorageStore>,
@@ -21,9 +23,11 @@ export const useLocalStorageStore = create<LocalStorageStore, []>(
     (set, get, store) =>
       (() => {
         const userSlice = createUserSlice(set, get, store);
+        const themeSlice = createThemeSlice(set, get, store);
 
         return {
           ...userSlice,
+          ...themeSlice,
           _hasHydrated: false,
           clear: () => {
             userSlice.signOut();

package/templates/shared/apps/mobile/src/stores/theme.slice.ts

@@ -0,0 +1,15 @@
+import { StateCreator } from 'zustand';
+
+export type ColorScheme = 'light' | 'dark';
+
+export type ThemeSlice = {
+  colorScheme: ColorScheme;
+  setColorScheme: (scheme: ColorScheme) => void;
+  toggleColorScheme: () => void;
+};
+
+export const createThemeSlice: StateCreator<ThemeSlice> = (set, get) => ({
+  colorScheme: 'light',
+  setColorScheme: (scheme: ColorScheme) => set({ colorScheme: scheme }),
+  toggleColorScheme: () => set({ colorScheme: get().colorScheme === 'light' ? 'dark' : 'light' }),
+});