@mediacubeco/expo-template-fsd 2.0.2 → 2.1.1

package/.agents/README.md

@@ -0,0 +1,8 @@
+# `.agents`
+
+This folder stores independent agent definitions and related assets. They must stay isolated and should not pollute the main project context.
+
+## What should be stored here
+
+- Agent-specific skills, rules, prompts, and helper files.
+- Context-isolated assets that are not part of the app runtime flow.

package/.claude/README.md

@@ -0,0 +1,8 @@
+# `.claude`
+
+This folder stores Claude-specific independent agents and related configuration. They must stay isolated and should not pollute the main project context.
+
+## What should be stored here
+
+- Claude rules, settings, skills, and supporting files.
+- Context-isolated configuration that is separate from app runtime logic.

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/.gitignore

@@ -0,0 +1,36 @@
+# dependencies
+node_modules/
+yarn-debug.*
+yarn-error.*
+
+# expo
+.expo/
+dist/
+web-build/
+
+# native
+/ios
+/android
+.kotlin/
+.DS_Store
+.metro-health-check*
+*.orig.*
+*.pem
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# typescript
+*.tsbuildinfo
+
+# secret
+/.secret/*
+!/.secret/README.md
+
+# env
+.env*.local
+
+# ai
+.agents/skills/

package/.husky/README.md

@@ -0,0 +1,8 @@
+# `.husky`
+
+This folder stores Git hooks used to enforce repository checks before commit or push.
+
+## What should be stored here
+
+- Husky hook scripts (for example, `pre-commit`, `commit-msg`, `pre-push`).
+- Hook-related helper scripts that validate code quality and commit hygiene.

package/.secret/README.md

@@ -1,4 +1,4 @@
-# `.secret` Folder
+# `.secret`
 
 This folder stores **secret and sensitive** files that must never be committed to the repository. The folder is included in `.gitignore`.
 

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,11 +1,40 @@
 {
   "private": false,
-  "version": "2.0.2",
+  "version": "2.1.1",
   "name": "@mediacubeco/expo-template-fsd",
   "description": "Application by Mediacube developers",
   "license": "MIT",
   "type": "module",
   "main": "expo-router/entry",
+  "files": [
+    ".agents",
+    ".claude",
+    ".husky",
+    ".secret",
+    "src",
+    ".env",
+    ".env.example",
+    ".gitignore",
+    "AGENTS.md",
+    "app.json",
+    "CLAUDE.md",
+    "env.d.ts",
+    "eslint.config.js",
+    "expo-env.d.ts",
+    "i18next.d.ts",
+    "package-lock.json",
+    "package.json",
+    "prettier.config.js",
+    "README.md",
+    "skills-lock.json",
+    "svg.d.ts",
+    "tsconfig.json"
+  ],
+  "keywords": [
+    "mediacube",
+    "mediacubeco",
+    "application"
+  ],
   "dependencies": {
     "@tanstack/query-async-storage-persister": "^5.99.0",
     "@tanstack/react-query": "^5.99.0",
@@ -41,9 +70,9 @@
     "react-native-svg": "15.15.4",
     "react-native-web": "^0.21.0",
     "react-native-worklets": "0.8.3",
-    "@mediacubeco/base-react-native": "2.0.2",
-    "@mediacubeco/base-react": "2.0.2",
-    "@mediacubeco/base": "2.0.2"
+    "@mediacubeco/base-react-native": "2.1.0",
+    "@mediacubeco/base": "2.1.0",
+    "@mediacubeco/base-react": "2.1.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
@@ -52,24 +81,24 @@
     "husky": "^9.1.7",
     "prettier": "^3.8.1",
     "typescript": "^6.0.3",
-    "@mediacubeco/eslint-config-react": "2.0.2",
-    "@mediacubeco/eslint-config": "2.0.2",
-    "@mediacubeco/prettier-config": "2.0.2",
-    "@mediacubeco/eslint-config-react-native": "2.0.2",
-    "@mediacubeco/prettier-config-fsd": "2.0.2",
-    "@mediacubeco/eslint-config-fsd": "2.0.2",
-    "@mediacubeco/typescript-config": "2.0.2",
-    "@mediacubeco/typescript-config-react": "2.0.2",
-    "@mediacubeco/typescript-config-react-native": "2.0.2",
-    "@mediacubeco/typescript-config-fsd": "2.0.2"
+    "@mediacubeco/eslint-config-fsd": "2.1.0",
+    "@mediacubeco/eslint-config": "2.1.0",
+    "@mediacubeco/eslint-config-react": "2.1.0",
+    "@mediacubeco/eslint-config-react-native": "2.1.0",
+    "@mediacubeco/prettier-config-fsd": "2.1.0",
+    "@mediacubeco/prettier-config": "2.1.0",
+    "@mediacubeco/typescript-config": "2.1.0",
+    "@mediacubeco/typescript-config-fsd": "2.1.0",
+    "@mediacubeco/typescript-config-react": "2.1.0",
+    "@mediacubeco/typescript-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,13 +17,13 @@
       "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",
       "sourceType": "github",
       "skillPath": "skills/react-native-skills/SKILL.md",
-      "computedHash": "41d24eafa7c3d82e270439808f7cfbc4d51aeb2d14f2809a2267c16275784d06"
+      "computedHash": "2e9088a7333666d8c2833b8ff58bd51b955501c42b4c7244f72b4cbf22dafcc4"
     }
   }
 }

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

@@ -1,5 +1,9 @@
 import { NativeTabs } from 'expo-router/build/native-tabs'
-import { useLocalizationText, useNavigationTabBarOptions } from '~shared/lib'
+import {
+  NavigationNativeTabsProvider,
+  useLocalizationText,
+  useNavigationTabBarOptions,
+} from '~shared/lib'
 
 const Layout = () => {
   const { createTabBarOptions, createTabOptions } = useNavigationTabBarOptions()
@@ -22,16 +26,18 @@ const Layout = () => {
   })
 
   return (
-    <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>
+      <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>
   )
 }
 

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/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/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/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/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,5 +1,5 @@
+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 {
@@ -43,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,
           }),

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/theme.provider.tsx

@@ -1,4 +1,3 @@
-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'
@@ -22,15 +21,15 @@ const ThemeProvider = ({ children }: ThemeProviderProps) => {
   }, [currentThemeMode])
 
   const updateThemeModeSystem = useCallback((themeMode: ThemeMode) => {
-    if (Platform.isIos) {
-      if (!hasDarkMode) {
-        Appearance.setColorScheme('light')
-      } else 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(() => {
@@ -53,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 }