@mediacubeco/expo-template-fsd 2.0.1 → 2.1.0

package/.claude/settings.local.json

@@ -1,11 +1,5 @@
 {
   "permissions": {
-    "allow": [
-      "Read(//Users/alkhimenok/Public/Programing/Work/kit/**)",
-      "Bash(npm view *)",
-      "Bash(npx expo *)",
-      "Bash(npx expo-doctor *)",
-      "Bash(pnpm install *)"
-    ]
+    "allow": ["Bash(npm *)", "Bash(npx *)"]
   }
 }

package/.claude/skills/generate-api-model/references/entities/common.ts

@@ -1,4 +1,4 @@
-import { generateIdFactory } from '@mediacontent/base/utils'
+import { generateIdFactory } from '@mediacubeco/base/utils'
 import { type BaseResource } from '../resources'
 
 const generateId = generateIdFactory()

package/README.md

@@ -1,4 +1,4 @@
-# Expo Template FSD
+# Expo-Template-FSD
 
 This project is built on top of the `@mediacubeco/expo-template-fsd` template.
 

package/app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "expo-template-fsd",
     "slug": "expo-template-fsd",
-    "scheme": "expotemplatefsd",
+    "scheme": "expo-template-fsd",
     "version": "1.0.0",
     "orientation": "portrait",
     "userInterfaceStyle": "automatic",
@@ -12,14 +12,14 @@
     },
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.mediacube.expotemplatefsd",
+      "bundleIdentifier": "com.mediacube.expo-template-fsd",
       "icon": "./src/shared/assets/images/logo-ios.png"
     },
     "android": {
       "predictiveBackGestureEnabled": false,
-      "package": "com.mediacube.expotemplatefsd",
+      "package": "com.mediacube.expo-template-fsd",
       "adaptiveIcon": {
-        "backgroundColor": "#E6F4FE",
+        "backgroundColor": "#ffffff00",
         "foregroundImage": "./src/shared/assets/images/logo-android-foreground.png",
         "backgroundImage": "./src/shared/assets/images/logo-android-background.png",
         "monochromeImage": "./src/shared/assets/images/logo-android-monochrome.png"
@@ -36,10 +36,12 @@
       [
         "expo-splash-screen",
         {
-          "backgroundColor": "#208AEF",
+          "backgroundColor": "#ffffff00",
           "android": {
-            "image": "./assets/images/splash-icon.png",
-            "imageWidth": 76
+            "image": "./src/shared/assets/images/splash-light.png",
+            "dark": {
+              "image": "./src/shared/assets/images/splash-dark.png"
+            }
           }
         }
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "private": false,
-  "version": "2.0.1",
+  "version": "2.1.0",
   "name": "@mediacubeco/expo-template-fsd",
   "description": "Application by Mediacube developers",
   "license": "MIT",
@@ -41,9 +41,9 @@
     "react-native-svg": "15.15.4",
     "react-native-web": "^0.21.0",
     "react-native-worklets": "0.8.3",
-    "@mediacubeco/base": "2.0.1",
-    "@mediacubeco/base-react-native": "2.0.1",
-    "@mediacubeco/base-react": "2.0.1"
+    "@mediacubeco/base": "2.1.0",
+    "@mediacubeco/base-react": "2.1.0",
+    "@mediacubeco/base-react-native": "2.1.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
@@ -52,24 +52,24 @@
     "husky": "^9.1.7",
     "prettier": "^3.8.1",
     "typescript": "^6.0.3",
-    "@mediacubeco/eslint-config-fsd": "2.0.1",
-    "@mediacubeco/prettier-config": "2.0.1",
-    "@mediacubeco/eslint-config-react-native": "2.0.1",
-    "@mediacubeco/prettier-config-fsd": "2.0.1",
-    "@mediacubeco/eslint-config-react": "2.0.1",
-    "@mediacubeco/eslint-config": "2.0.1",
-    "@mediacubeco/typescript-config-fsd": "2.0.1",
-    "@mediacubeco/typescript-config-react": "2.0.1",
-    "@mediacubeco/typescript-config": "2.0.1",
-    "@mediacubeco/typescript-config-react-native": "2.0.1"
+    "@mediacubeco/eslint-config": "2.1.0",
+    "@mediacubeco/eslint-config-fsd": "2.1.0",
+    "@mediacubeco/eslint-config-react": "2.1.0",
+    "@mediacubeco/prettier-config": "2.1.0",
+    "@mediacubeco/prettier-config-fsd": "2.1.0",
+    "@mediacubeco/typescript-config": "2.1.0",
+    "@mediacubeco/typescript-config-react": "2.1.0",
+    "@mediacubeco/typescript-config-react-native": "2.1.0",
+    "@mediacubeco/typescript-config-fsd": "2.1.0",
+    "@mediacubeco/eslint-config-react-native": "2.1.0"
   },
   "scripts": {
     "postinstall": "npx husky && npx skills update",
     "prebuild": "expo prebuild",
     "start": "expo start",
-    "android": "expo start --android",
+    "android": "expo run:android",
     "android:device": "expo run:android -d",
-    "ios": "expo start --ios",
+    "ios": "expo run:ios",
     "ios:device": "expo run:ios -d",
     "web": "expo start --web",
     "format": "prettier --write ./src",

package/skills-lock.json

@@ -5,7 +5,7 @@
       "source": "pbakaus/impeccable",
       "sourceType": "github",
       "skillPath": ".agents/skills/impeccable/SKILL.md",
-      "computedHash": "2f248d7db158d32acb8d52e688444de1edbaccf7344ac5288634cbe427bc8a8a"
+      "computedHash": "5e8c66eeffba8dc0c5e0941afbf4aecd6359184f8b0ea08cfc60a33f2e328e49"
     },
     "react-native-best-practices": {
       "source": "callstackincubator/agent-skills",
@@ -17,7 +17,7 @@
       "source": "vercel-labs/agent-skills",
       "sourceType": "github",
       "skillPath": "skills/react-best-practices/SKILL.md",
-      "computedHash": "ca7b0c0c6e5f2750043f7f0cd72d16ac4e2abc48f9b5500d047a4b77a2506212"
+      "computedHash": "3219a1944e404ffc14d1d9d6aef6dd2e3855b81387ee0a044ccbfe14d34c2357"
     },
     "vercel-react-native-skills": {
       "source": "vercel-labs/agent-skills",

package/src/app/(root)/(home)/_layout.tsx

@@ -0,0 +1,15 @@
+import { Stack } from 'expo-router'
+import { useLocalizationText, useNavigationStackOptions } from '~shared/lib'
+
+const Layout = () => {
+  const { createStackOptions, createScreenOptions } = useNavigationStackOptions()
+  const t = useLocalizationText()
+
+  return (
+    <Stack screenOptions={createStackOptions()}>
+      <Stack.Screen name={'index'} options={createScreenOptions({ title: t('home.title') })} />
+    </Stack>
+  )
+}
+
+export default Layout

package/src/app/(root)/(home)/index.tsx

@@ -0,0 +1,7 @@
+import { HomeMain } from '~pages/home'
+
+const Screen = () => {
+  return <HomeMain />
+}
+
+export default Screen

package/src/app/(root)/(settings)/_layout.tsx

@@ -0,0 +1,15 @@
+import { Stack } from 'expo-router'
+import { useLocalizationText, useNavigationStackOptions } from '~shared/lib'
+
+const Layout = () => {
+  const { createStackOptions, createScreenOptions } = useNavigationStackOptions()
+  const t = useLocalizationText()
+
+  return (
+    <Stack screenOptions={createStackOptions()}>
+      <Stack.Screen name={'index'} options={createScreenOptions({ title: t('settings.title') })} />
+    </Stack>
+  )
+}
+
+export default Layout

package/src/app/(root)/(settings)/index.tsx

@@ -0,0 +1,7 @@
+import { SettingsMain } from '~pages/settings'
+
+const Screen = () => {
+  return <SettingsMain />
+}
+
+export default Screen

package/src/app/(root)/_layout.tsx

@@ -0,0 +1,44 @@
+import { NativeTabs } from 'expo-router/build/native-tabs'
+import {
+  NavigationNativeTabsProvider,
+  useLocalizationText,
+  useNavigationTabBarOptions,
+} from '~shared/lib'
+
+const Layout = () => {
+  const { createTabBarOptions, createTabOptions } = useNavigationTabBarOptions()
+  const t = useLocalizationText()
+
+  const tabBarOptions = createTabBarOptions()
+
+  const homeTabOptions = createTabOptions({
+    name: '(home)',
+    children: t('home.title'),
+    sf: 'house',
+    md: 'home',
+  })
+
+  const settingsTabOptions = createTabOptions({
+    name: '(settings)',
+    children: t('settings.title'),
+    sf: 'gear',
+    md: 'settings',
+  })
+
+  return (
+    <NavigationNativeTabsProvider>
+      <NativeTabs {...tabBarOptions}>
+        <NativeTabs.Trigger {...homeTabOptions.triggerProps}>
+          <NativeTabs.Trigger.Label {...homeTabOptions.triggerLabelProps} />
+          <NativeTabs.Trigger.Icon {...homeTabOptions.triggerIconProps} />
+        </NativeTabs.Trigger>
+        <NativeTabs.Trigger {...settingsTabOptions.triggerProps}>
+          <NativeTabs.Trigger.Label {...settingsTabOptions.triggerLabelProps} />
+          <NativeTabs.Trigger.Icon {...settingsTabOptions.triggerIconProps} />
+        </NativeTabs.Trigger>
+      </NativeTabs>
+    </NavigationNativeTabsProvider>
+  )
+}
+
+export default Layout

package/src/app/_app.tsx

@@ -10,7 +10,7 @@ const App = () => {
     <>
       <StatusBar style={'auto'} />
       <NavigationBar style={'auto'} />
-      <Stack screenOptions={createStackOptions()}>
+      <Stack initialRouteName={'(root)'} screenOptions={createStackOptions()}>
         <Stack.Screen name={'(root)'} />
       </Stack>
     </>

package/src/app/_layout.tsx

@@ -1,19 +1,27 @@
-import { ApiProvider, LocalizationProvider, NavigationProvider, ThemeProvider } from '~shared/lib'
+import {
+  ApiProvider,
+  LocalizationProvider,
+  NavigationProvider,
+  StorageProvider,
+  ThemeProvider,
+} from '~shared/lib'
 import App from './_app'
 import Splash from './_splash'
 
 const Layout = () => {
   return (
-    <ApiProvider>
-      <ThemeProvider>
-        <LocalizationProvider>
-          <NavigationProvider>
-            <App />
-            <Splash />
-          </NavigationProvider>
-        </LocalizationProvider>
-      </ThemeProvider>
-    </ApiProvider>
+    <StorageProvider>
+      <ApiProvider>
+        <ThemeProvider>
+          <LocalizationProvider>
+            <NavigationProvider>
+              <App />
+              <Splash />
+            </NavigationProvider>
+          </LocalizationProvider>
+        </ThemeProvider>
+      </ApiProvider>
+    </StorageProvider>
   )
 }
 

package/src/pages/home/home-main.tsx

@@ -0,0 +1,18 @@
+import { Text } from 'react-native'
+import { useLocalizationText, useThemeMode } from '~shared/lib'
+import { ScreenContainerScroll } from '~shared/ui'
+
+const HomeMain = () => {
+  const t = useLocalizationText()
+  const { COLORS } = useThemeMode()
+
+  return (
+    <ScreenContainerScroll>
+      <Text style={{ fontSize: 20, fontWeight: 'bold', color: COLORS.TYPOGRAPHY.BASE }}>
+        {t('home.description')}
+      </Text>
+    </ScreenContainerScroll>
+  )
+}
+
+export default HomeMain

package/src/pages/home/index.ts

@@ -0,0 +1 @@
+export { default as HomeMain } from './home-main'

package/src/pages/settings/index.ts

@@ -0,0 +1 @@
+export { default as SettingsMain } from './settings-main'

package/src/pages/settings/settings-main.tsx

@@ -0,0 +1,18 @@
+import { Text } from 'react-native'
+import { useLocalizationText, useThemeMode } from '~shared/lib'
+import { ScreenContainerScroll } from '~shared/ui/templates'
+
+const SettingsMain = () => {
+  const t = useLocalizationText()
+  const { COLORS } = useThemeMode()
+
+  return (
+    <ScreenContainerScroll>
+      <Text style={{ fontSize: 20, fontWeight: 'bold', color: COLORS.TYPOGRAPHY.BASE }}>
+        {t('settings.description')}
+      </Text>
+    </ScreenContainerScroll>
+  )
+}
+
+export default SettingsMain

package/src/shared/assets/images/index.ts

@@ -4,7 +4,8 @@ const IMAGES = {
   LOGO_ANDROID_BACKGROUND: require('./logo-android-background.png'),
   LOGO_ANDROID_FOREGROUND: require('./logo-android-foreground.png'),
   LOGO_ANDROID_MONOCHROME: require('./logo-android-monochrome.png'),
-  SPLASH: require('./splash.png'),
+  SPLASH_LIGHT: require('./splash-light.png'),
+  SPLASH_DARK: require('./splash-dark.png'),
   DEFAULT: require('./default.png'),
 }
 

package/src/shared/assets/translations/en.ts

@@ -1,3 +1,12 @@
-const en = {}
+const en = {
+  home: {
+    title: 'Home',
+    description: 'Home screen',
+  },
+  settings: {
+    title: 'Settings',
+    description: 'Settings screen',
+  },
+}
 
 export default en

package/src/shared/assets/translations/ru.ts

@@ -1,3 +1,12 @@
-const ru = {}
+const ru = {
+  home: {
+    title: 'Главная',
+    description: 'Главная страница',
+  },
+  settings: {
+    title: 'Настройки',
+    description: 'Страница настроек',
+  },
+}
 
 export default ru

package/src/shared/hooks/use-safe-area.ts

@@ -1,7 +1,8 @@
-import { Platform } from 'react-native'
+import { Platform } from '@mediacubeco/base-react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useBottomTabBarHeight } from 'expo-router/js-tabs'
 import { useHeaderHeight } from 'expo-router/react-navigation'
+import { useNavigationNativeTabs } from '../lib'
 
 const ANDROID_TAB_BAR_DEFAULT_HEIGHT = 56
 const IOS_TAB_BAR_DEFAULT_HEIGHT = 50
@@ -10,7 +11,7 @@ const useNavigationHeaderHeight = (safeArea: number = 0) => {
   try {
     const height = useHeaderHeight()
 
-    return Platform.select({
+    return Platform.by({
       android: height ? 0 : safeArea,
       ios: height || safeArea,
       default: safeArea,
@@ -21,19 +22,36 @@ const useNavigationHeaderHeight = (safeArea: number = 0) => {
 }
 
 const useNavigationFooterHeight = (safeArea: number = 0) => {
+  const isNativeTabs = useNavigationNativeTabs()
+
   try {
     const height = useBottomTabBarHeight()
 
-    return Platform.select({
-      android: (height || ANDROID_TAB_BAR_DEFAULT_HEIGHT) + safeArea,
-      ios: (height || IOS_TAB_BAR_DEFAULT_HEIGHT) + safeArea,
-      default: safeArea,
-    })
+    return {
+      bottom: Platform.by({
+        android: height ? 0 : safeArea,
+        ios: height ? 0 : safeArea,
+        default: safeArea,
+      }),
+      value: Platform.by({
+        android: height,
+        ios: height,
+        default: safeArea,
+      }),
+    }
   } catch (_) {
-    return Platform.select({
-      android: 0,
-      default: safeArea,
-    })
+    return {
+      bottom: Platform.by({
+        android: isNativeTabs ? 0 : safeArea,
+        ios: safeArea,
+        default: safeArea,
+      }),
+      value: Platform.by({
+        android: isNativeTabs ? safeArea * 2 + ANDROID_TAB_BAR_DEFAULT_HEIGHT : safeArea,
+        ios: isNativeTabs ? safeArea + IOS_TAB_BAR_DEFAULT_HEIGHT : safeArea,
+        default: safeArea,
+      }),
+    }
   }
 }
 
@@ -44,7 +62,8 @@ const useSafeArea = () => {
 
   return {
     TOP: header,
-    BOTTOM: footer,
+    BOTTOM: footer.bottom,
+    FOOTER: footer.value,
     LEFT: left,
     RIGHT: right,
   }

package/src/shared/lib/api/api.provider.tsx

@@ -5,7 +5,7 @@ import {
   PersistQueryClientProvider,
   type PersistQueryClientProviderProps,
 } from '@tanstack/react-query-persist-client'
-import { apiAsyncStorage } from './utils'
+import { storageAsync } from '../storage'
 import { type ApiProviderProps } from './api.types'
 
 const client = new QueryClient({
@@ -25,7 +25,7 @@ const persistOptions = {
     },
   },
   persister: createAsyncStoragePersister({
-    storage: apiAsyncStorage,
+    storage: storageAsync,
     throttleTime: 1000,
   }),
 } satisfies PersistQueryClientProviderProps['persistOptions']

package/src/shared/lib/api/constants/index.ts

@@ -1,6 +1,3 @@
-const QUERY_KEYS = {
-  POSTS: 'posts',
-  POST: 'post',
-}
+const QUERY_KEYS = {}
 
 export { QUERY_KEYS }

package/src/shared/lib/api/entities/common.ts

@@ -1,4 +1,4 @@
-import { generateIdFactory } from '@mediacontent/base/utils'
+import { generateIdFactory } from '@mediacubeco/base/utils'
 import { type BaseResource } from '../resources'
 
 const generateId = generateIdFactory()

package/src/shared/lib/index.ts

@@ -1,4 +1,5 @@
 export * from './api'
 export * from './localization'
 export * from './navigation'
+export * from './storage'
 export * from './theme'

package/src/shared/lib/localization/localization.provider.tsx

@@ -11,7 +11,7 @@ import { type LocalizationProviderProps } from './localization.types'
 
 const LocalizationProvider = ({ children }: LocalizationProviderProps) => {
   useMemo(() => {
-    return i18n
+    i18n
       .use(languageDetector)
       .use(initReactI18next)
       .init({

package/src/shared/lib/localization/utils/storage.ts

@@ -1,11 +1,7 @@
 import { Storage } from '@mediacubeco/base/services'
-import * as SecureStore from 'expo-secure-store'
+import { storageModel } from '../../storage'
 import { type LocalizationCode } from '../constants'
 
-const localizationStorage = new Storage({
-  get: SecureStore.getItemAsync,
-  set: SecureStore.setItemAsync,
-  delete: SecureStore.deleteItemAsync,
-}).create<'code', LocalizationCode>('code')
+const localizationStorage = new Storage(storageModel).create<'code', LocalizationCode>('code')
 
 export { localizationStorage }

package/src/shared/lib/navigation/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './use-navigation'
 export * from './use-navigation-params'
 export * from './use-navigation-options'
+export * from './use-navigation-native-tabs'

package/src/shared/lib/navigation/hooks/use-navigation-native-tabs.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react'
+import { NavigationNativeTabsContext } from '../navigation-native-tabs.context'
+
+const useNavigationNativeTabs = () => {
+  const isNativeTabs = useContext(NavigationNativeTabsContext)
+
+  return isNativeTabs
+}
+
+export { useNavigationNativeTabs }

package/src/shared/lib/navigation/hooks/use-navigation-options.ts

@@ -1,12 +1,14 @@
+import { Platform } from '@mediacubeco/base-react-native'
 import { useCallback } from 'react'
-import { Platform } from 'react-native'
 import { isGlassEffectAPIAvailable } from 'expo-glass-effect'
 import { type StackScreenProps } from 'expo-router'
 import {
+  type MaterialIcon,
   type NativeTabsProps,
   type NativeTabsTriggerIconProps,
   type NativeTabsTriggerLabelProps,
   type NativeTabTriggerProps,
+  type SFSymbolIcon,
 } from 'expo-router/unstable-native-tabs'
 import { useThemeMode, useThemeSetup } from '../../theme'
 
@@ -14,16 +16,20 @@ const useNavigationStackOptions = () => {
   const { COLORS } = useThemeMode()
   const { themeModeSystem } = useThemeSetup()
 
-  const createStackOptions = useCallback(() => {
-    return {
-      headerShown: false,
-      headerTransparent: false,
-      headerShadowVisible: false,
-      contentStyle: {
-        backgroundColor: COLORS.FILL.BASE,
-      },
-    } satisfies StackScreenProps['options']
-  }, [COLORS])
+  const createStackOptions = useCallback(
+    (options?: StackScreenProps['options']) => {
+      return {
+        headerShown: false,
+        headerTransparent: false,
+        headerShadowVisible: false,
+        contentStyle: {
+          backgroundColor: COLORS.FILL.BASE,
+        },
+        ...options,
+      } satisfies StackScreenProps['options']
+    },
+    [COLORS]
+  )
 
   const createScreenOptions = useCallback(
     (options?: StackScreenProps['options']) => {
@@ -37,7 +43,7 @@ const useNavigationStackOptions = () => {
         headerBlurEffect: isGlassEffectAPIAvailable() ? 'none' : themeModeSystem,
         headerTintColor: COLORS.TYPOGRAPHY.BASE,
         headerStyle: {
-          backgroundColor: Platform.select({
+          backgroundColor: Platform.by({
             ios: COLORS.FILL.TRANSPARENT,
             default: COLORS.FILL.CONTRAST,
           }),
@@ -58,33 +64,55 @@ const useNavigationTabBarOptions = () => {
   const { COLORS } = useThemeMode()
   const { isThemeModeDark } = useThemeSetup()
 
-  const createTabBarOptions = useCallback(() => {
-    return {
-      sidebarAdaptable: Platform.OS === 'ios',
-      disableTransparentOnScrollEdge: Platform.OS === 'ios',
-      labelVisibilityMode: 'labeled',
-      blurEffect:
-        (isGlassEffectAPIAvailable() && 'systemMaterial') || (isThemeModeDark && 'dark') || 'light',
-    } satisfies NativeTabsProps
-  }, [isThemeModeDark])
+  const createTabBarOptions = useCallback(
+    (options?: NativeTabsProps) => {
+      return {
+        sidebarAdaptable: Platform.OS === 'ios',
+        disableTransparentOnScrollEdge: Platform.OS === 'ios',
+        labelVisibilityMode: 'labeled',
+        blurEffect:
+          (isGlassEffectAPIAvailable() && 'systemMaterial') ||
+          (isThemeModeDark && 'dark') ||
+          'light',
+        ...options,
+      } satisfies NativeTabsProps
+    },
+    [isThemeModeDark]
+  )
 
-  const createTabOptions = useCallback(() => {
-    const triggerProps = {} satisfies NativeTabTriggerProps
+  const createTabOptions = useCallback(
+    ({
+      name,
+      children,
+      sf,
+      md,
+    }: NativeTabTriggerProps &
+      NativeTabsTriggerLabelProps &
+      Partial<SFSymbolIcon> &
+      Partial<MaterialIcon> = {}) => {
+      const triggerProps = {
+        name,
+      } satisfies NativeTabTriggerProps
 
-    const triggerIconProps = {
-      selectedColor: COLORS.TYPOGRAPHY.PRIMARY,
-    } satisfies NativeTabsTriggerIconProps
+      const triggerLabelProps = {
+        hidden: Platform.OS !== 'web',
+        children,
+      } satisfies NativeTabsTriggerLabelProps
 
-    const triggerLabelProps = {
-      hidden: Platform.OS !== 'web',
-    } satisfies NativeTabsTriggerLabelProps
+      const triggerIconProps = {
+        selectedColor: COLORS.TYPOGRAPHY.PRIMARY,
+        sf,
+        md,
+      } satisfies NativeTabsTriggerIconProps
 
-    return {
-      triggerProps,
-      triggerIconProps,
-      triggerLabelProps,
-    }
-  }, [COLORS])
+      return {
+        triggerProps,
+        triggerLabelProps,
+        triggerIconProps,
+      }
+    },
+    [COLORS]
+  )
 
   return {
     createTabBarOptions,

package/src/shared/lib/navigation/index.ts

@@ -3,5 +3,7 @@ export {
   useNavigationParams,
   useNavigationStackOptions,
   useNavigationTabBarOptions,
+  useNavigationNativeTabs,
 } from './hooks'
 export { default as NavigationProvider } from './navigation.provider'
+export { default as NavigationNativeTabsProvider } from './navigation-native-tabs.provider'

package/src/shared/lib/navigation/navigation-native-tabs.context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+const NavigationNativeTabsContext = createContext(false)
+
+export { NavigationNativeTabsContext }

package/src/shared/lib/navigation/navigation-native-tabs.provider.tsx

@@ -0,0 +1,12 @@
+import { NavigationNativeTabsContext } from './navigation-native-tabs.context'
+import { type NavigationProviderProps } from './navigation.types'
+
+const NavigationNativeTabsProvider = ({ children }: NavigationProviderProps) => {
+  return (
+    <NavigationNativeTabsContext.Provider value={true}>
+      {children}
+    </NavigationNativeTabsContext.Provider>
+  )
+}
+
+export default NavigationNativeTabsProvider

package/src/shared/lib/storage/index.ts

@@ -0,0 +1,2 @@
+export { default as StorageProvider } from './storage.provider'
+export { storageAsync, storageModel } from './storage'

package/src/shared/lib/storage/storage.provider.tsx

@@ -0,0 +1,7 @@
+import { type StorageProviderProps } from './storage.types'
+
+const StorageProvider = ({ children }: StorageProviderProps) => {
+  return <>{children}</>
+}
+
+export default StorageProvider

package/src/shared/lib/storage/storage.ts

@@ -0,0 +1,27 @@
+import { Platform } from '@mediacubeco/base-react-native'
+import * as SecureStore from 'expo-secure-store'
+
+const storageModelNative = {
+  getItem: SecureStore.getItemAsync,
+  setItem: SecureStore.setItemAsync,
+  removeItem: SecureStore.deleteItemAsync,
+}
+
+const storageModelWeb = {
+  getItem: (key: string) => Promise.resolve(localStorage.getItem(key)),
+  setItem: (key: string, value: string) => Promise.resolve(localStorage.setItem(key, value)),
+  removeItem: (key: string) => Promise.resolve(localStorage.removeItem(key)),
+}
+
+const storageAsync = Platform.by({
+  web: storageModelWeb,
+  default: storageModelNative,
+})
+
+const storageModel = {
+  get: storageAsync.getItem,
+  set: storageAsync.setItem,
+  delete: storageAsync.removeItem,
+}
+
+export { storageAsync, storageModel }

package/src/shared/lib/storage/storage.types.ts

@@ -0,0 +1,5 @@
+import { type PropsWithChildren } from 'react'
+
+type StorageProviderProps = PropsWithChildren
+
+export type { StorageProviderProps }

package/src/shared/lib/theme/constants/colors.ts

@@ -8,8 +8,8 @@ const PALETTE = {
   'LIGHT/SURFACE': '#F5F8FD',
   'LIGHT/FAINT': '#EFF2F7',
 
-  'LIGHT/PRIMARY': '#6115CD',
-  'LIGHT/PRIMARY_ACTIVE': '#4E11A4',
+  'LIGHT/PRIMARY': '#8756FF',
+  'LIGHT/PRIMARY_ACTIVE': '#7238FF',
   'LIGHT/PRIMARY_DISABLED': '#D5C9FF',
 
   'LIGHT/ACCENT': '#FF2B75',

package/src/shared/lib/theme/constants/index.ts

@@ -51,4 +51,6 @@ const themes = {
   [ThemeModeSystem.Dark]: darkTheme,
 }
 
-export { ThemeMode, ThemeModeSystem, ThemeModeStatusBar, themes }
+const hasDarkMode = LIGHT_COLORS !== DARK_COLORS
+
+export { ThemeMode, ThemeModeSystem, ThemeModeStatusBar, themes, hasDarkMode }

package/src/shared/lib/theme/theme.provider.tsx

@@ -1,14 +1,13 @@
-import { Platform } from '@mediacubeco/base-react-native'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Appearance, StatusBar, useColorScheme } from 'react-native'
 import { themeStorage } from './utils'
-import { ThemeMode, ThemeModeStatusBar, ThemeModeSystem, themes } from './constants'
+import { hasDarkMode, ThemeMode, ThemeModeStatusBar, ThemeModeSystem, themes } from './constants'
 import { ThemeContext } from './theme.context'
 import { type ThemeProviderProps } from './theme.types'
 
 const ThemeProvider = ({ children }: ThemeProviderProps) => {
   const didDefine = useRef(false)
-  const [themeMode, setThemeMode] = useState(ThemeMode.System)
+  const [themeMode, setThemeMode] = useState(hasDarkMode ? ThemeMode.System : ThemeMode.Light)
   const themeModeSystem = (useColorScheme() as ThemeModeSystem) ?? ThemeModeSystem.Light
 
   const currentThemeMode = {
@@ -22,13 +21,15 @@ const ThemeProvider = ({ children }: ThemeProviderProps) => {
   }, [currentThemeMode])
 
   const updateThemeModeSystem = useCallback((themeMode: ThemeMode) => {
-    if (Platform.isIos) {
-      if (themeMode === ThemeMode.System) {
-        Appearance.setColorScheme('unspecified')
-      } else {
-        Appearance.setColorScheme(themeMode)
-      }
+    // if (Platform.isIos) {
+    if (!hasDarkMode) {
+      Appearance.setColorScheme('light')
+    } else if (themeMode === ThemeMode.System) {
+      Appearance.setColorScheme('unspecified')
+    } else {
+      Appearance.setColorScheme(themeMode)
     }
+    // }
   }, [])
 
   useEffect(() => {
@@ -51,9 +52,9 @@ const ThemeProvider = ({ children }: ThemeProviderProps) => {
     const updateThemeMode = async () => {
       if (didDefine.current) {
         await themeStorage.mode.set(themeMode)
-
-        updateThemeModeSystem(themeMode)
       }
+
+      updateThemeModeSystem(themeMode)
     }
 
     updateThemeMode()

package/src/shared/lib/theme/utils/index.ts

@@ -1 +1 @@
-export * from './storage'
+export { themeStorage } from './storage'

package/src/shared/lib/theme/utils/storage.ts

@@ -1,11 +1,7 @@
 import { Storage } from '@mediacubeco/base/services'
-import * as SecureStore from 'expo-secure-store'
+import { storageModel } from '../../storage'
 import { type ThemeMode } from '../constants'
 
-const themeStorage = new Storage({
-  get: SecureStore.getItemAsync,
-  set: SecureStore.setItemAsync,
-  delete: SecureStore.deleteItemAsync,
-}).create<'mode', ThemeMode>('mode')
+const themeStorage = new Storage(storageModel).create<'mode', ThemeMode>('mode')
 
 export { themeStorage }

package/src/shared/ui/atoms/blur/blur.tsx

@@ -0,0 +1,27 @@
+import { type Ref } from 'react'
+import { BlurView } from 'expo-blur'
+import { type BlurProps } from './blur.types'
+
+const Blur = ({
+  reference,
+  blurTarget,
+  tint,
+  intensity,
+  blurReductionFactor,
+  blurMethod,
+  ...props
+}: BlurProps) => {
+  return (
+    <BlurView
+      ref={reference as Ref<BlurView>}
+      blurTarget={blurTarget}
+      tint={tint}
+      intensity={intensity}
+      blurReductionFactor={blurReductionFactor}
+      blurMethod={blurMethod}
+      {...props}
+    />
+  )
+}
+
+export default Blur

package/src/shared/ui/atoms/blur/blur.types.ts

@@ -0,0 +1,9 @@
+import { type Ref } from 'react'
+import { type View } from 'react-native'
+import { type BlurViewProps } from 'expo-blur'
+
+type BlurProps = BlurViewProps & {
+  reference?: Ref<View>
+}
+
+export type { BlurProps }

package/src/shared/ui/atoms/blur/index.ts

@@ -0,0 +1,2 @@
+export { default as Blur } from './blur'
+export type { BlurProps } from './blur.types'

package/src/shared/ui/atoms/glass/glass.tsx

@@ -0,0 +1,26 @@
+import { GlassView, isGlassEffectAPIAvailable } from 'expo-glass-effect'
+import { Blur } from '../blur'
+import { type GlassProps } from './glass.types'
+
+const Glass = ({
+  reference,
+  glassEffectStyle = 'clear',
+  tintColor,
+  colorScheme,
+  isInteractive = true,
+  ...props
+}: GlassProps) => {
+  return isGlassEffectAPIAvailable() ? (
+    <GlassView
+      ref={reference}
+      glassEffectStyle={glassEffectStyle}
+      tintColor={tintColor}
+      colorScheme={colorScheme}
+      isInteractive={isInteractive}
+      {...props}
+    />
+  ) : (
+    <Blur reference={reference} {...props} />
+  )
+}
+export default Glass

package/src/shared/ui/atoms/glass/glass.types.ts

@@ -0,0 +1,9 @@
+import { type Ref } from 'react'
+import { type View } from 'react-native'
+import { type GlassViewProps } from 'expo-glass-effect'
+
+type GlassProps = GlassViewProps & {
+  reference?: Ref<View>
+}
+
+export type { GlassProps }

package/src/shared/ui/atoms/glass/index.ts

@@ -0,0 +1,2 @@
+export { default as Glass } from './glass'
+export type { GlassProps } from './glass.types'

package/src/shared/ui/atoms/index.ts

@@ -1 +1,2 @@
-export const atoms = {}
+export * from './blur'
+export * from './glass'

package/src/shared/ui/molecules/keyboard-area/keyboard-area.styles.ts

@@ -1,18 +1,18 @@
+import { useAnimatedKeyboard } from 'react-native-keyboard-controller'
 import { useAnimated, useAnimatedStyle, useSafeArea } from '../../../hooks'
 
 const useKeyboardAreaStyles = () => {
-  const { BOTTOM } = useSafeArea()
-  const [safeAreaHeight] = useAnimated(BOTTOM)
-  const [keyboardHeight] = useAnimated<number>(0)
+  const { FOOTER } = useSafeArea()
+  const { height } = useAnimatedKeyboard()
+  const [safeAreaHeight] = useAnimated(FOOTER)
 
   const keyboardAnimatedStyle = useAnimatedStyle(() => {
     return {
-      height: keyboardHeight.value - safeAreaHeight.value,
+      height: height.value - safeAreaHeight.value,
     }
   })
 
   return {
-    keyboardHeight,
     keyboardAnimatedStyle,
   }
 }

package/src/shared/ui/molecules/keyboard-area/keyboard-area.tsx

@@ -1,5 +1,4 @@
 import { View } from 'react-native'
-import { useKeyboardHandler } from 'react-native-keyboard-controller'
 import { animate } from '../../../hooks'
 import { useKeyboardAreaStyles } from './keyboard-area.styles'
 import { type KeyboardAreaProps } from './keyboard-area.types'
@@ -7,26 +6,7 @@ import { type KeyboardAreaProps } from './keyboard-area.types'
 const KeyboardAnimatedArea = animate(View)
 
 const KeyboardArea = ({}: KeyboardAreaProps) => {
-  const { keyboardHeight, keyboardAnimatedStyle } = useKeyboardAreaStyles()
-
-  useKeyboardHandler(
-    {
-      onStart: () => {
-        'worklet'
-      },
-      onMove: (event) => {
-        'worklet'
-
-        keyboardHeight.set(event.height)
-      },
-      onEnd: (event) => {
-        'worklet'
-
-        keyboardHeight.set(event.height)
-      },
-    },
-    []
-  )
+  const { keyboardAnimatedStyle } = useKeyboardAreaStyles()
 
   return <KeyboardAnimatedArea style={keyboardAnimatedStyle} />
 }

package/src/shared/lib/api/utils/index.ts

@@ -1 +0,0 @@
-export * from './storage'

package/src/shared/lib/api/utils/storage.ts

@@ -1,9 +0,0 @@
-import * as SecureStore from 'expo-secure-store'
-
-const apiAsyncStorage = {
-  getItem: SecureStore.getItemAsync,
-  setItem: SecureStore.setItemAsync,
-  removeItem: SecureStore.deleteItemAsync,
-}
-
-export { apiAsyncStorage }