@zezosoft/zezo-ott-react-native-ui-kit 1.0.2 → 1.0.4

package/src/hooks/useInitSplashCacheSync.ts

@@ -12,13 +12,25 @@ import { useSplashStore } from '../store/splashStore';
 const mmkvStorage = new MMKV();
 const inFlightDownloadsMap = new Map<string, Promise<string | null>>();
 
-const SUPPORTED_FILE_TYPES = ['json', 'mp4', 'jpg', 'jpeg', 'png', 'webp'] as const;
+const SUPPORTED_FILE_TYPES = [
+  'json',
+  'mp4',
+  'jpg',
+  'jpeg',
+  'png',
+  'webp',
+] as const;
 
 const extractFileExtension = (url: string): string => {
   try {
     const cleanUrl = url.split('?')[0];
-    const ext = cleanUrl?.substring(cleanUrl.lastIndexOf('.') + 1).toLowerCase() || '';
-    return SUPPORTED_FILE_TYPES.includes(ext as (typeof SUPPORTED_FILE_TYPES)[number]) ? ext : 'png';
+    const ext =
+      cleanUrl?.substring(cleanUrl.lastIndexOf('.') + 1).toLowerCase() || '';
+    return SUPPORTED_FILE_TYPES.includes(
+      ext as (typeof SUPPORTED_FILE_TYPES)[number]
+    )
+      ? ext
+      : 'png';
   } catch {
     return 'png';
   }
@@ -34,7 +46,7 @@ const cacheSplashAsset = async (
 
   const ext = extension.replace(/^\./, '').trim() || 'mp4';
   const hash = CryptoJS.MD5(`${url}|${mmkvKey}|${ext}`).toString();
-  const localPath = `${RNFS.CachesDirectoryPath}/splash_${hash}.${ext}`;
+  const localPath = `${RNFS?.CachesDirectoryPath}/splash_${hash}.${ext}`;
 
   if (inFlightDownloadsMap.has(hash)) {
     return inFlightDownloadsMap.get(hash)!;
@@ -45,26 +57,26 @@ const cacheSplashAsset = async (
       const previousHash = mmkvStorage.getString(mmkvKey);
 
       if (previousHash && previousHash !== hash) {
-        const oldPath = `${RNFS.CachesDirectoryPath}/splash_${previousHash}.${ext}`;
-        const exists = await RNFS.exists(oldPath);
+        const oldPath = `${RNFS?.CachesDirectoryPath}/splash_${previousHash}.${ext}`;
+        const exists = await RNFS?.exists(oldPath);
         if (exists) {
-          await RNFS.unlink(oldPath).catch(() => {});
+          await RNFS?.unlink(oldPath).catch(() => {});
         }
       }
 
       if (!forceDownload) {
-        const exists = await RNFS.exists(localPath);
+        const exists = await RNFS?.exists(localPath);
         if (exists && previousHash === hash) {
           return localPath;
         }
       }
 
-      const { statusCode } = await RNFS.downloadFile({
+      const { statusCode } = await RNFS?.downloadFile({
         fromUrl: url,
         toFile: localPath,
         cacheable: true,
         readTimeout: 15000,
-        connectionTimeout: 10000
+        connectionTimeout: 10000,
       }).promise;
 
       if (statusCode === 200) {
@@ -89,11 +101,11 @@ type UseSplashCacheSyncOptions = {
 export const useInitSplashCacheSync = ({
   logoUrl,
   backgroundUrl,
-  forceDownload = false
+  forceDownload = false,
 }: UseSplashCacheSyncOptions) => {
   const [splashSyncState, setSplashSyncState] = useState({
     isReady: false,
-    error: null as Error | null
+    error: null as Error | null,
   });
 
   const setSplashLogoPath = useSplashStore((s) => s.setLogoPath);
@@ -106,11 +118,21 @@ export const useInitSplashCacheSync = ({
       try {
         const [logoPath, backgroundPath] = await Promise.all([
           logoUrl
-            ? cacheSplashAsset(logoUrl, extractFileExtension(logoUrl), 'splash_logo', forceDownload)
+            ? cacheSplashAsset(
+                logoUrl,
+                extractFileExtension(logoUrl),
+                'splash_logo',
+                forceDownload
+              )
             : Promise.resolve(null),
           backgroundUrl
-            ? cacheSplashAsset(backgroundUrl, extractFileExtension(backgroundUrl), 'splash_background', forceDownload)
-            : Promise.resolve(null)
+            ? cacheSplashAsset(
+                backgroundUrl,
+                extractFileExtension(backgroundUrl),
+                'splash_background',
+                forceDownload
+              )
+            : Promise.resolve(null),
         ]);
 
         if (!isMounted) return;
@@ -130,7 +152,13 @@ export const useInitSplashCacheSync = ({
     return () => {
       isMounted = false;
     };
-  }, [logoUrl, backgroundUrl, forceDownload, setSplashLogoPath, setSplashBackgroundPath]);
+  }, [
+    logoUrl,
+    backgroundUrl,
+    forceDownload,
+    setSplashLogoPath,
+    setSplashBackgroundPath,
+  ]);
 
   const splashLogoLocalPath = useSplashStore((s) => s.logo.localPath);
   const splashBackgroundLocalPath = useSplashStore((s) => s.backdrop.localPath);
@@ -140,7 +168,7 @@ export const useInitSplashCacheSync = ({
     isLoading: !splashSyncState.isReady && !splashSyncState.error,
     data: {
       localPathLogo: splashLogoLocalPath,
-      localPathBackground: splashBackgroundLocalPath
-    }
+      localPathBackground: splashBackgroundLocalPath,
+    },
   };
 };

package/src/hooks/useKeyboard.ts

@@ -10,8 +10,10 @@ export const useKeyboard = () => {
   const [isKeyboardOpen, setKeyboardOpen] = useState(false);
 
   useEffect(() => {
-    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const showEvent =
+      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent =
+      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
 
     const showListener = Keyboard.addListener(showEvent, () => {
       setKeyboardOpen(true);
@@ -29,6 +31,6 @@ export const useKeyboard = () => {
 
   return {
     isKeyboardOpen,
-    hideKeyboard: () => Keyboard.dismiss()
+    hideKeyboard: () => Keyboard.dismiss(),
   };
 };

package/src/hooks/usePaginatedSection.ts

@@ -17,7 +17,7 @@ export function usePaginatedSection<T>(
     nextPage: number | null;
   }>({
     hasNextPage: true,
-    nextPage: 2
+    nextPage: 2,
   });
   const [loading, setLoading] = useState(false);
 
@@ -38,8 +38,8 @@ export function usePaginatedSection<T>(
           sectionId,
           meta: {
             hasNextPage: pagination.hasNextPage,
-            nextPage: page
-          }
+            nextPage: page,
+          },
         });
 
         if (!res || !res.data || !res.meta?.pagination) {
@@ -50,14 +50,18 @@ export function usePaginatedSection<T>(
         const { hasNextPage, nextPage } = res.meta.pagination;
 
         setData((prev) => {
-          const existingIds = new Set((prev as any[]).map((item: any) => item._id));
-          const newItems = res.data.filter((item: any) => !existingIds.has(item._id));
+          const existingIds = new Set(
+            (prev as any[]).map((item: any) => item._id)
+          );
+          const newItems = res.data.filter(
+            (item: any) => !existingIds.has(item._id)
+          );
           return [...prev, ...newItems];
         });
 
         setPagination({
           hasNextPage,
-          nextPage
+          nextPage,
         });
       } catch (err) {
         console.error(`❌ Error loading section [${sectionId}]:`, err);
@@ -73,6 +77,6 @@ export function usePaginatedSection<T>(
     pagination,
     loading,
     hasMore: pagination.hasNextPage,
-    loadMoreData
+    loadMoreData,
   };
 }

package/src/store/RecentSearchesStore.ts

@@ -33,32 +33,37 @@ export const useRecentSearchesStore = create<RecentSearchesState>()(
 
         const maxCount = limit ?? get().pillMaxCount;
         const current = get().recentSearches;
-        const updated = [trimmed, ...current.filter((t) => t !== trimmed)].slice(0, maxCount);
+        const updated = [
+          trimmed,
+          ...current.filter((t) => t !== trimmed),
+        ].slice(0, maxCount);
         set({ recentSearches: updated });
       },
 
       removeSearchTerm: (term) =>
         set((state) => ({
-          recentSearches: state.recentSearches.filter((t) => t !== term)
+          recentSearches: state.recentSearches.filter((t) => t !== term),
         })),
 
       clearSearches: () => set({ recentSearches: [] }),
 
-      setPillMaxCount: (count) => set({ pillMaxCount: count })
+      setPillMaxCount: (count) => set({ pillMaxCount: count }),
     }),
     {
       name: 'recent-searches-storage',
       storage: createJSONStorage(() => ({
         getItem: (name) => mmkv.getString(name) ?? null,
         setItem: (name, value) => mmkv.set(name, value),
-        removeItem: (name) => mmkv.delete(name)
+        removeItem: (name) => mmkv.delete(name),
       })),
       partialize: (state) => ({
         recentSearches: state.recentSearches,
-        pillMaxCount: state.pillMaxCount
+        pillMaxCount: state.pillMaxCount,
       }),
       onRehydrateStorage: () => (state) => {
-        const hasData = (state?.recentSearches?.length ?? 0) > 0 || (state?.pillMaxCount ?? 20) !== 20;
+        const hasData =
+          (state?.recentSearches?.length ?? 0) > 0 ||
+          (state?.pillMaxCount ?? 20) !== 20;
 
         if (hasData) {
           setTimeout(() => {
@@ -68,7 +73,7 @@ export const useRecentSearchesStore = create<RecentSearchesState>()(
         } else {
           useRecentSearchesStore.setState({ isLoading: false });
         }
-      }
+      },
     }
   )
 );

package/src/store/splashStore.ts

@@ -28,11 +28,11 @@ export const useSplashStore = create<SplashState>()(
     (set) => ({
       logo: {
         localPath: null,
-        lastUpdated: null
+        lastUpdated: null,
       },
       backdrop: {
         localPath: null,
-        lastUpdated: null
+        lastUpdated: null,
       },
 
       setLogoPath: (path) =>
@@ -40,16 +40,16 @@ export const useSplashStore = create<SplashState>()(
           logo: {
             ...state.logo,
             localPath: path,
-            lastUpdated: Date.now()
-          }
+            lastUpdated: Date.now(),
+          },
         })),
 
       clearLogoPath: () =>
         set(() => ({
           logo: {
             localPath: null,
-            lastUpdated: null
-          }
+            lastUpdated: null,
+          },
         })),
 
       setBackdropPath: (path) =>
@@ -57,35 +57,35 @@ export const useSplashStore = create<SplashState>()(
           backdrop: {
             ...state.backdrop,
             localPath: path,
-            lastUpdated: Date.now()
-          }
+            lastUpdated: Date.now(),
+          },
         })),
 
       clearBackdropPath: () =>
         set(() => ({
           backdrop: {
             localPath: null,
-            lastUpdated: null
-          }
-        }))
+            lastUpdated: null,
+          },
+        })),
     }),
     {
       name: 'splash-storage',
       storage: createJSONStorage(() => ({
         getItem: (name) => mmkv.getString(name) || null, // Updated to use MMKV getString
         setItem: (name, value) => mmkv.set(name, value), // Updated to use MMKV set
-        removeItem: (name) => mmkv.delete(name) // Updated to use MMKV delete
+        removeItem: (name) => mmkv.delete(name), // Updated to use MMKV delete
       })),
       partialize: (state) => ({
         logo: {
           localPath: state.logo.localPath,
-          lastUpdated: state.logo.lastUpdated
+          lastUpdated: state.logo.lastUpdated,
         },
         backdrop: {
           localPath: state.backdrop.localPath,
-          lastUpdated: state.backdrop.lastUpdated
-        }
-      })
+          lastUpdated: state.backdrop.lastUpdated,
+        },
+      }),
     }
   )
 );

package/src/theme/ThemeProvider.tsx

@@ -2,10 +2,22 @@
  * @author Naresh Dhamu
  * @lastModified Sat 26 Jul 2025 at 02:11 PM
  */
-import React, { createContext, useMemo, useState, useCallback, useEffect, useContext, type ReactNode } from 'react';
-import { View, useColorScheme, StatusBar } from 'react-native';
-import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
+import React, {
+  createContext,
+  useMemo,
+  useState,
+  useCallback,
+  useEffect,
+  useContext,
+  type ReactNode,
+} from 'react';
+import { View, StatusBar, Platform, Appearance } from 'react-native';
+import {
+  SafeAreaProvider,
+  initialWindowMetrics,
+} from 'react-native-safe-area-context';
 import { LightTheme, DarkTheme, type ITheme, type AppTheme } from './themes';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 type ThemeContextType = {
   theme: ITheme;
@@ -30,17 +42,22 @@ type ZezoUIProviderProps = {
 
 const getIsDarkMode = (
   autoSwitchTheme: boolean | undefined,
-  systemScheme: 'dark' | 'light' | null,
+  colorScheme: 'dark' | 'light' | null,
   userDark?: boolean
 ): boolean => {
-  if (autoSwitchTheme) return systemScheme === 'dark';
+  if (autoSwitchTheme) return colorScheme === 'dark';
   return userDark ?? false;
 };
 
-export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({ children, theme, autoSwitchTheme }) => {
-  const systemScheme = useColorScheme() ?? null;
-
-  const [overrideTheme, setOverrideTheme] = useState<Partial<AppTheme> | undefined>(theme);
+export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({
+  children,
+  theme,
+  autoSwitchTheme,
+}) => {
+  const colorScheme = Appearance.getColorScheme();
+  const [overrideTheme, setOverrideTheme] = useState<
+    Partial<AppTheme> | undefined
+  >(theme);
 
   // ✅ Sync prop to state if changed externally
   useEffect(() => {
@@ -52,10 +69,17 @@ export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({ children, theme,
   // ✅ This prioritizes externally passed theme.dark
   const isDarkMode = useMemo(() => {
     if (theme?.dark !== undefined) return theme.dark;
-    return getIsDarkMode(autoSwitchTheme, systemScheme, overrideTheme?.dark);
-  }, [theme?.dark, autoSwitchTheme, systemScheme, overrideTheme?.dark]);
-
-  const baseTheme = useMemo<ITheme>(() => (isDarkMode ? DarkTheme : LightTheme), [isDarkMode]);
+    return getIsDarkMode(
+      autoSwitchTheme,
+      colorScheme || 'dark',
+      overrideTheme?.dark
+    );
+  }, [theme?.dark, autoSwitchTheme, colorScheme, overrideTheme?.dark]);
+
+  const baseTheme = useMemo<ITheme>(
+    () => (isDarkMode ? DarkTheme : LightTheme),
+    [isDarkMode]
+  );
 
   const mergedTheme = useMemo<ITheme>(() => {
     return {
@@ -64,8 +88,8 @@ export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({ children, theme,
       dark: isDarkMode,
       colors: {
         ...baseTheme.colors,
-        ...(overrideTheme?.colors ?? {})
-      }
+        ...(overrideTheme?.colors ?? {}),
+      },
     };
   }, [baseTheme, overrideTheme, isDarkMode]);
 
@@ -73,7 +97,7 @@ export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({ children, theme,
     if (autoSwitchTheme || theme?.dark !== undefined) return;
     setOverrideTheme((prev) => ({
       ...prev,
-      dark: !getIsDarkMode(false, null, prev?.dark)
+      dark: !getIsDarkMode(false, null, prev?.dark),
     }));
   }, [autoSwitchTheme, theme?.dark]);
 
@@ -82,26 +106,35 @@ export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({ children, theme,
   }, []);
 
   // ✅ Update StatusBar only when required
+
   useEffect(() => {
     StatusBar.setBarStyle(isDarkMode ? 'light-content' : 'dark-content', true);
-    StatusBar.setBackgroundColor(mergedTheme.colors.background, true);
-  }, [isDarkMode, mergedTheme.colors.background]);
 
+    if (Platform.OS === 'android') {
+      StatusBar.setBackgroundColor(mergedTheme.colors.background, true);
+    }
+  }, [isDarkMode, mergedTheme.colors.background]);
   const contextValue = useMemo(
     () => ({
       theme: mergedTheme,
       isDarkMode,
       toggleTheme,
-      setThemeOverride
+      setThemeOverride,
     }),
     [mergedTheme, isDarkMode, toggleTheme, setThemeOverride]
   );
 
   return (
-    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-      <ThemeContext.Provider value={contextValue}>
-        <View style={{ flex: 1, backgroundColor: mergedTheme.colors.background }}>{children}</View>
-      </ThemeContext.Provider>
-    </SafeAreaProvider>
+    <GestureHandlerRootView>
+      <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+        <ThemeContext.Provider value={contextValue}>
+          <View
+            style={{ flex: 1, backgroundColor: mergedTheme.colors.background }}
+          >
+            {children}
+          </View>
+        </ThemeContext.Provider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
   );
 };

package/src/theme/hook/useTheme.ts

@@ -8,7 +8,11 @@ import { useThemeContext } from '../ThemeProvider';
 import { DarkTheme, LightTheme, type AppTheme, type ITheme } from '../themes';
 
 export const useTheme = (override?: Partial<AppTheme>): { theme: ITheme } => {
-  const { theme: contextTheme, isDarkMode, setThemeOverride } = useThemeContext();
+  const {
+    theme: contextTheme,
+    isDarkMode,
+    setThemeOverride,
+  } = useThemeContext();
 
   const isOverrideDark = override?.dark ?? contextTheme.dark ?? isDarkMode;
 
@@ -23,8 +27,8 @@ export const useTheme = (override?: Partial<AppTheme>): { theme: ITheme } => {
       dark: isOverrideDark,
       colors: {
         ...baseTheme.colors,
-        ...(override?.colors ?? {})
-      }
+        ...(override?.colors ?? {}),
+      },
     };
   }, [baseTheme, override, isOverrideDark]);
 

package/src/theme/index.ts

@@ -1,7 +1,13 @@
+import type { BaseColors, ITheme } from './themes';
+
 /**
  * @author Naresh Dhamu
  * @lastModified Sat 14 Jun 2025 at 11:47 AM
  */
+export type AppTheme = Omit<ITheme, 'colors'> & {
+  dark?: boolean;
+  colors?: Partial<BaseColors>;
+};
 
 export * from './ThemeProvider';
 export * from './hook/useTheme';

package/src/theme/themes.ts

@@ -1,11 +1,13 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 17 Jun 2025 at 04:07 PM
- */
-import { MD3DarkTheme, DefaultTheme } from 'react-native-paper';
-import type { MD3ElevationColors, ThemeProp } from 'react-native-paper/lib/typescript/types';
-
-type BaseColors = {
+export type MD3ElevationColors = {
+  level0: string;
+  level1: string;
+  level2: string;
+  level3: string;
+  level4: string;
+  level5: string;
+};
+
+export type BaseColors = {
   primary: string;
   onPrimary: string;
   primaryContainer: string;
@@ -49,6 +51,7 @@ type BaseColors = {
   shadow: string;
   scrim: string;
   backdrop: string;
+  overlay: string;
 
   inverseSurface: string;
   inverseOnSurface: string;
@@ -81,22 +84,19 @@ type BaseColors = {
   switchThumbColorDisabled: string;
 };
 
-export interface ITheme
-  extends Pick<ThemeProp, 'version' | 'dark' | 'mode' | 'animation' | 'fonts' | 'isV3' | 'roundness'> {
+export interface ITheme {
+  dark: boolean;
+
   colors: BaseColors;
 }
-
 export type AppTheme = Omit<ITheme, 'colors'> & {
   dark?: boolean;
   colors?: Partial<BaseColors>;
 };
 
 export const LightTheme: ITheme = {
-  ...DefaultTheme,
   dark: false,
-  isV3: true,
-  version: 3,
-  roundness: 4,
+
   colors: {
     primary: 'rgba(244, 197, 66, 1)',
     onPrimary: 'rgba(255, 255, 255, 1)',
@@ -141,6 +141,7 @@ export const LightTheme: ITheme = {
     shadow: 'rgba(0, 0, 0, 0.1)',
     scrim: 'rgba(0, 0, 0, 0.2)',
     backdrop: 'rgba(243, 244, 246, 0.7)',
+    overlay: 'rgba(0,0,0,0.55)',
 
     inverseSurface: 'rgba(31, 41, 55, 1)',
     inverseOnSurface: 'rgba(249, 250, 251, 1)',
@@ -152,7 +153,7 @@ export const LightTheme: ITheme = {
       level2: 'rgba(229, 231, 235, 1)',
       level3: 'rgba(209, 213, 219, 1)',
       level4: 'rgba(156, 163, 175, 1)',
-      level5: 'rgba(107, 114, 128, 1)'
+      level5: 'rgba(107, 114, 128, 1)',
     },
 
     textPrimary: 'rgba(0, 0, 0, 1)',
@@ -171,12 +172,20 @@ export const LightTheme: ITheme = {
       'rgba(255, 255, 255, 0.3)',
       'rgba(255, 255, 255, 0.98)',
       'rgb(255, 255, 255)',
-      'rgb(249, 250, 251)'
+      'rgb(249, 250, 251)',
     ],
 
-    heroBannerGradient: ['rgba(249,250,251,0)', 'rgba(249,250,251,0.4)', 'rgba(249,250,251,1)'],
+    heroBannerGradient: [
+      'rgba(249,250,251,0)',
+      'rgba(249,250,251,0.4)',
+      'rgba(249,250,251,1)',
+    ],
 
-    cardGradient: ['rgba(223, 178, 50, 1)', 'rgba(243, 146, 35, 1)', 'rgba(248, 159, 16, 1)'],
+    cardGradient: [
+      'rgba(223, 178, 50, 1)',
+      'rgba(243, 146, 35, 1)',
+      'rgba(248, 159, 16, 1)',
+    ],
 
     skeletonHighlightColor: '#D6D6D6',
     skeletonBaseColor: '#EDEDED',
@@ -184,16 +193,12 @@ export const LightTheme: ITheme = {
     switchTrackColor: '#3CD141',
     switchThumbColor: 'white',
     switchTrackColorDisabled: '#D5D5D5',
-    switchThumbColorDisabled: 'white'
-  }
+    switchThumbColorDisabled: 'white',
+  },
 };
 
 export const DarkTheme: ITheme = {
-  ...MD3DarkTheme,
   dark: true,
-  isV3: true,
-  version: 3,
-  roundness: 4,
   colors: {
     primary: 'rgba(244, 197, 66, 1)',
     onPrimary: 'rgba(15, 23, 42, 1)',
@@ -238,6 +243,7 @@ export const DarkTheme: ITheme = {
     shadow: 'rgba(0, 0, 0, 0.5)',
     scrim: 'rgba(0, 0, 0, 0.4)',
     backdrop: 'rgba(30, 41, 59, 0.7)',
+    overlay: 'rgba(0,0,0,0.55)',
 
     inverseSurface: 'rgba(229, 231, 235, 1)',
     inverseOnSurface: 'rgba(31, 41, 55, 1)',
@@ -249,7 +255,7 @@ export const DarkTheme: ITheme = {
       level2: 'rgba(37, 44, 60, 1)',
       level3: 'rgba(51, 65, 85, 1)',
       level4: 'rgba(71, 85, 105, 1)',
-      level5: 'rgba(100, 116, 139, 1)'
+      level5: 'rgba(100, 116, 139, 1)',
     },
 
     textPrimary: 'rgba(243, 244, 246, 1)',
@@ -268,11 +274,19 @@ export const DarkTheme: ITheme = {
       'rgba(22, 21, 21, 0.65)',
       'rgba(22, 21, 21, 0.98)',
       'rgb(22, 21, 21)',
-      'rgb(22, 21, 21)'
+      'rgb(22, 21, 21)',
+    ],
+    heroBannerGradient: [
+      'rgba(22,21,21,0)',
+      'rgba(22,21,21,0.4)',
+      'rgb(22,21,21)',
     ],
-    heroBannerGradient: ['rgba(22,21,21,0)', 'rgba(22,21,21,0.4)', 'rgb(22,21,21)'],
 
-    cardGradient: ['rgba(223, 178, 50, 1)', 'rgba(243, 146, 35, 1)', 'rgba(248, 159, 16, 1)'],
+    cardGradient: [
+      'rgba(223, 178, 50, 1)',
+      'rgba(243, 146, 35, 1)',
+      'rgba(248, 159, 16, 1)',
+    ],
 
     skeletonHighlightColor: '#C2C2C2',
     skeletonBaseColor: '#2A2A2A',
@@ -280,6 +294,6 @@ export const DarkTheme: ITheme = {
     switchTrackColor: '#3CD141',
     switchThumbColor: 'white',
     switchTrackColorDisabled: '#D5D5D5',
-    switchThumbColorDisabled: 'white'
-  }
+    switchThumbColorDisabled: 'white',
+  },
 };