@gv-tech/ui-native 2.25.0 → 2.25.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/ui-native",
-  "version": "2.25.0",
+  "version": "2.25.2",
   "description": "React Native implementations of the GV Tech design system components",
   "repository": {
     "type": "git",

package/src/hooks/use-theme.ts

@@ -1,8 +1,8 @@
 import { theme as designTokens } from '@gv-tech/design-tokens';
-import { useColorScheme } from 'nativewind';
+import { useColorScheme } from 'react-native';
 
 export function useTheme() {
-  const { colorScheme, setColorScheme } = useColorScheme();
+  const colorScheme = useColorScheme();
 
   const resolvedTheme = colorScheme as 'light' | 'dark';
 
@@ -11,7 +11,6 @@ export function useTheme() {
 
   return {
     theme: colorScheme,
-    setTheme: setColorScheme,
     resolvedTheme,
     tokens: activeTokens,
   };

package/src/theme-provider.tsx

@@ -1,9 +1,24 @@
-import { useColorScheme } from 'nativewind';
 import * as React from 'react';
-import { View } from 'react-native';
+import { View, ViewProps } from 'react-native';
+import { useTheme } from './hooks/use-theme';
 import { cn } from './lib/utils';
 
-export function ThemeProvider({ children, className }: { children: React.ReactNode; className?: string }) {
-  const { colorScheme } = useColorScheme();
-  return <View className={cn('flex-1', colorScheme === 'dark' ? 'dark' : '', className)}>{children}</View>;
+export interface ThemeProviderProps extends ViewProps {
+  children: React.ReactNode;
+  [key: string]: unknown;
+}
+
+export function ThemeProvider({ children, className, style, ...props }: ThemeProviderProps) {
+  const { theme, tokens } = useTheme();
+  const isDark = theme === 'dark';
+
+  return (
+    <View
+      className={cn('flex-1', isDark ? 'dark' : '', className)}
+      style={[{ backgroundColor: tokens.background }, style]}
+      {...props}
+    >
+      {children}
+    </View>
+  );
 }

package/src/theme-toggle.tsx

@@ -1,6 +1,6 @@
 import { ThemeToggleBaseProps } from '@gv-tech/ui-core';
 import { Moon, Sun, SunMoon } from 'lucide-react-native';
-import { View } from 'react-native';
+import { Appearance, View } from 'react-native';
 import { Button } from './button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './dropdown-menu';
 import { useTheme } from './hooks/use-theme';
@@ -15,12 +15,12 @@ iconWithClassName(SunMoon);
 export type ThemeToggleProps = ThemeToggleBaseProps;
 
 export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, className }: ThemeToggleProps) {
-  const { theme, setTheme, resolvedTheme } = useTheme();
+  const { theme, resolvedTheme } = useTheme();
 
   const currentTheme = (customTheme ?? theme) as 'light' | 'dark' | 'system';
 
   // Determine the effective theme for icon rendering
-  const effectiveTheme = customTheme ? customTheme : resolvedTheme;
+  const effectiveTheme = customTheme === 'system' || !customTheme ? resolvedTheme : customTheme;
   const isDark = effectiveTheme === 'dark';
   const isSystem = currentTheme === 'system';
 
@@ -28,7 +28,12 @@ export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, cl
     if (onThemeChange) {
       onThemeChange(newTheme);
     } else {
-      setTheme(newTheme as 'light' | 'dark');
+      if (newTheme === 'system') {
+        // @ts-expect-error React Native Appearance.setColorScheme accepts null to reset to system theme
+        Appearance.setColorScheme(null);
+      } else {
+        Appearance.setColorScheme(newTheme);
+      }
     }
   };
 
@@ -37,7 +42,7 @@ export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, cl
       <View
         className={cn(
           'items-center justify-center transition-all',
-          !isSystem && !isDark ? 'scale-100 rotate-0 opacity-100' : 'absolute scale-0 -rotate-90 opacity-0',
+          !isSystem && !isDark ? 'rotate-0 opacity-100' : 'absolute -rotate-90 opacity-0',
         )}
       >
         <Sun size={18} className="text-foreground" />
@@ -45,7 +50,7 @@ export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, cl
       <View
         className={cn(
           'items-center justify-center transition-all',
-          !isSystem && isDark ? 'scale-100 rotate-0 opacity-100' : 'absolute scale-0 rotate-90 opacity-0',
+          !isSystem && isDark ? 'rotate-0 opacity-100' : 'absolute rotate-90 opacity-0',
         )}
       >
         <Moon size={18} className="text-foreground" />
@@ -53,7 +58,7 @@ export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, cl
       <View
         className={cn(
           'items-center justify-center transition-all',
-          isSystem ? 'scale-100 rotate-0 opacity-100' : 'absolute scale-0 rotate-90 opacity-0',
+          isSystem ? 'rotate-0 opacity-100' : 'absolute rotate-90 opacity-0',
         )}
       >
         <SunMoon size={18} className="text-foreground" />