kynjal-cli 2.0.6

package/dist/templates/start/hooks/useKeyboardHeight.ts

@@ -0,0 +1,131 @@
+import { useState, useEffect, useRef } from 'react';
+import {
+  Keyboard,
+  Platform,
+  Dimensions,
+  KeyboardEvent,
+  EmitterSubscription,
+} from 'react-native';
+
+interface UseKeyboardHeightReturn {
+  keyboardHeight: number;
+  isKeyboardVisible: boolean;
+  keyboardAnimationDuration: number;
+}
+
+export const useKeyboardHeight = (): UseKeyboardHeightReturn => {
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
+  const [isKeyboardVisible, setIsKeyboardVisible] = useState<boolean>(false);
+  const [keyboardAnimationDuration, setKeyboardAnimationDuration] =
+    useState<number>(0);
+
+  // Store previous height to handle edge cases
+  const previousHeightRef = useRef<number>(0);
+
+  useEffect(() => {
+    let showSubscription: EmitterSubscription;
+    let hideSubscription: EmitterSubscription;
+
+    // Determine which events to listen to based on platform
+    const showEvent =
+      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent =
+      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    // Handle keyboard show
+    const handleKeyboardShow = (event: KeyboardEvent) => {
+      const { height } = event.endCoordinates;
+      const duration = event.duration;
+
+      // Validate height - sometimes we get invalid values
+      if (height && height > 0) {
+        setKeyboardHeight(height);
+        setIsKeyboardVisible(true);
+        setKeyboardAnimationDuration(duration || 250); // Default duration if not provided
+        previousHeightRef.current = height;
+      }
+    };
+
+    // Handle keyboard hide
+    const handleKeyboardHide = (event: KeyboardEvent) => {
+      setKeyboardHeight(0);
+      setIsKeyboardVisible(false);
+
+      // Get animation duration (iOS provides this, Android might not)
+      const duration = event.duration || (Platform.OS === 'ios' ? 250 : 200);
+      setKeyboardAnimationDuration(duration);
+    };
+
+    // Add event listeners
+    showSubscription = Keyboard.addListener(showEvent, handleKeyboardShow);
+    hideSubscription = Keyboard.addListener(hideEvent, handleKeyboardHide);
+
+    // Cleanup function
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  // Additional effect to handle edge cases and screen rotation
+  useEffect(() => {
+    let dimensionSubscription: EmitterSubscription;
+
+    const handleDimensionChange = () => {
+      // If keyboard was visible and screen rotated, we might need to recalculate
+      if (isKeyboardVisible && previousHeightRef.current > 0) {
+        // On screen rotation, keyboard height might change
+        // This is more relevant for tablets and landscape mode
+        const screenHeight = Dimensions.get('window').height;
+        const screenWidth = Dimensions.get('window').width;
+
+        // Simple heuristic: if we're in landscape and had a keyboard,
+        // the height might be different
+        if (screenWidth > screenHeight && Platform.OS === 'ios') {
+          // iOS landscape keyboard is typically shorter
+          const estimatedLandscapeHeight = Math.min(
+            previousHeightRef.current,
+            screenHeight * 0.4
+          );
+          setKeyboardHeight(estimatedLandscapeHeight);
+        }
+      }
+    };
+
+    // Listen to dimension changes (rotation, split screen, etc.)
+    dimensionSubscription = Dimensions.addEventListener(
+      'change',
+      handleDimensionChange
+    );
+
+    return () => {
+      dimensionSubscription?.remove();
+    };
+  }, [isKeyboardVisible]);
+
+  return {
+    keyboardHeight,
+    isKeyboardVisible,
+    keyboardAnimationDuration,
+  };
+};
+
+// Example usage:
+/*
+import useKeyboardHeight from './useKeyboardHeight';
+
+const MyComponent: React.FC = () => {
+  const { keyboardHeight, isKeyboardVisible, keyboardAnimationDuration } = useKeyboardHeight();
+  
+  return (
+    <View style={{ 
+      flex: 1, 
+      paddingBottom: isKeyboardVisible ? keyboardHeight : 0 
+    }}>
+      <Text>Keyboard Height: {keyboardHeight}</Text>
+      <Text>Keyboard Visible: {isKeyboardVisible ? 'Yes' : 'No'}</Text>
+      <Text>Animation Duration: {keyboardAnimationDuration}ms</Text>
+    </View>
+  );
+};
+*/

package/dist/templates/start/hooks/useModeToggle.tsx

@@ -0,0 +1,88 @@
+import { useColorScheme } from '@/hooks/useColorScheme';
+import { useState, useEffect } from 'react';
+import { Appearance, ColorSchemeName, Platform } from 'react-native';
+
+type Mode = 'light' | 'dark' | 'system';
+
+interface UseModeToggleReturn {
+  isDark: boolean;
+  mode: Mode;
+  setMode: (mode: Mode) => void;
+  currentMode: ColorSchemeName;
+  toggleMode: () => void;
+}
+
+export function useModeToggle(): UseModeToggleReturn {
+  const [mode, setModeState] = useState<Mode>('system');
+  const colorScheme = useColorScheme(); // Uses your existing hook
+
+  // Calculate isDark based on mode and system preference
+  const isDark = mode === 'system' ? colorScheme === 'dark' : mode === 'dark';
+
+  const toggleMode = () => {
+    switch (mode) {
+      case 'light':
+        setMode('dark');
+        break;
+      case 'dark':
+        setMode('system');
+        break;
+      case 'system':
+        setMode('light');
+        break;
+    }
+  };
+
+  const setMode = (newMode: Mode) => {
+    setModeState(newMode);
+
+    // Only use Appearance.setColorScheme on native platforms
+    if (Platform.OS !== 'web') {
+      if (newMode === 'system') {
+        Appearance.setColorScheme(null);
+      } else {
+        Appearance.setColorScheme(newMode);
+      }
+    } else {
+      // For web, update the root HTML element
+      if (typeof document !== 'undefined') {
+        const root = document.documentElement;
+
+        if (newMode === 'system') {
+          // Remove override and let CSS media query handle it
+          root.classList.remove('light', 'dark');
+          root.removeAttribute('data-theme');
+        } else {
+          // Set explicit theme
+          root.classList.remove('light', 'dark');
+          root.classList.add(newMode);
+          root.setAttribute('data-theme', newMode);
+        }
+      }
+    }
+  };
+
+  // Sync web theme with mode changes
+  useEffect(() => {
+    if (Platform.OS === 'web' && typeof document !== 'undefined') {
+      const root = document.documentElement;
+
+      if (mode === 'system') {
+        root.classList.remove('light', 'dark');
+        root.removeAttribute('data-theme');
+      } else {
+        root.classList.remove('light', 'dark');
+        root.classList.add(mode);
+        root.setAttribute('data-theme', mode);
+      }
+    }
+  }, [mode, colorScheme]); // Re-run when mode or system preference changes
+
+  return {
+    isDark,
+    mode,
+    setMode,
+    currentMode: mode === 'system' ? colorScheme : mode,
+    toggleMode,
+  };
+}

package/dist/templates/start/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "bna",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "lint": "expo lint"
+  },
+  "dependencies": {
+    "@expo/metro-runtime": "~6.1.2",
+    "@expo/vector-icons": "^15.0.3",
+    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-navigation/elements": "^2.6.3",
+    "@react-navigation/native": "^7.1.8",
+    "expo": "~54.0.23",
+    "expo-asset": "~12.0.9",
+    "expo-blur": "~15.0.7",
+    "expo-constants": "~18.0.10",
+    "expo-device": "~8.0.9",
+    "expo-dev-client": "~6.0.20",
+    "expo-font": "~14.0.9",
+    "expo-glass-effect": "~0.1.6",
+    "expo-haptics": "~15.0.7",
+    "expo-image": "~3.0.10",
+    "expo-linking": "~8.0.8",
+    "expo-navigation-bar": "~5.0.9",
+    "expo-router": "~6.0.14",
+    "expo-splash-screen": "~31.0.10",
+    "expo-status-bar": "~3.0.8",
+    "expo-symbols": "~1.0.7",
+    "expo-system-ui": "~6.0.8",
+    "expo-updates": "~29.0.15",
+    "expo-web-browser": "~15.0.9",
+    "lucide-react-native": "^0.553.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "^15.15.0",
+    "react-native-web": "~0.21.0",
+    "react-native-webview": "13.15.0",
+    "react-native-worklets": "0.5.1"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~10.0.0",
+    "typescript": "~5.9.2"
+  },
+  "private": true
+}

package/dist/templates/start/providers/search-context.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, ReactNode, useContext, useState } from 'react';
+
+interface SearchContextType {
+  searchText: string;
+  setSearchText: (text: string) => void;
+}
+
+const SearchContext = createContext<SearchContextType | undefined>(undefined);
+
+export function SearchProvider({ children }: { children: ReactNode }) {
+  const [searchText, setSearchText] = useState('');
+
+  return (
+    <SearchContext.Provider value={{ searchText, setSearchText }}>
+      {children}
+    </SearchContext.Provider>
+  );
+}
+
+export function useSearch() {
+  const context = useContext(SearchContext);
+  if (context === undefined) {
+    throw new Error('useSearch must be used within a SearchProvider');
+  }
+  return context;
+}

package/dist/templates/start/theme/colors.ts

@@ -0,0 +1,184 @@
+import { Platform } from 'react-native';
+
+export const Fonts = Platform.select({
+  ios: {
+    /** iOS `UIFontDescriptorSystemDesignDefault` */
+    sans: 'system-ui',
+    /** iOS `UIFontDescriptorSystemDesignSerif` */
+    serif: 'ui-serif',
+    /** iOS `UIFontDescriptorSystemDesignRounded` */
+    rounded: 'ui-rounded',
+    /** iOS `UIFontDescriptorSystemDesignMonospaced` */
+    mono: 'ui-monospace',
+  },
+  default: {
+    sans: 'normal',
+    serif: 'serif',
+    rounded: 'normal',
+    mono: 'monospace',
+  },
+  web: {
+    sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    serif: "Georgia, 'Times New Roman', serif",
+    rounded:
+      "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
+    mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+  },
+});
+
+export const lightColors = {
+  // Base colors
+  background: '#FFFFFF',
+  foreground: '#000000',
+
+  // Card colors
+  card: '#F2F2F7',
+  cardForeground: '#000000',
+
+  // Popover colors
+  popover: '#F2F2F7',
+  popoverForeground: '#000000',
+
+  // Primary colors
+  primary: '#18181b',
+  primaryForeground: '#FFFFFF',
+
+  // Secondary colors
+  secondary: '#F2F2F7',
+  secondaryForeground: '#18181b',
+
+  // Muted colors
+  muted: '#78788033',
+  mutedForeground: '#71717a',
+
+  // Accent colors
+  accent: '#F2F2F7',
+  accentForeground: '#18181b',
+
+  // Destructive colors
+  destructive: '#ef4444',
+  destructiveForeground: '#FFFFFF',
+
+  // Border and input
+  border: '#C6C6C8',
+  input: '#e4e4e7',
+  ring: '#a1a1aa',
+
+  // Text colors
+  text: '#000000',
+  textMuted: '#71717a',
+
+  // Legacy support for existing components
+  tint: '#18181b',
+  icon: '#71717a',
+  tabIconDefault: '#71717a',
+  tabIconSelected: '#18181b',
+
+  // Default buttons, links, Send button, selected tabs
+  blue: '#007AFF',
+
+  // Success states, FaceTime buttons, completed tasks
+  green: '#34C759',
+
+  // Delete buttons, error states, critical alerts
+  red: '#FF3B30',
+
+  // VoiceOver highlights, warning states
+  orange: '#FF9500',
+
+  // Notes app accent, Reminders highlights
+  yellow: '#FFCC00',
+
+  // Pink accent color for various UI elements
+  pink: '#FF2D92',
+
+  // Purple accent for creative apps and features
+  purple: '#AF52DE',
+
+  // Teal accent for communication features
+  teal: '#5AC8FA',
+
+  // Indigo accent for system features
+  indigo: '#5856D6',
+};
+
+export const darkColors = {
+  // Base colors
+  background: '#000000',
+  foreground: '#FFFFFF',
+
+  // Card colors
+  card: '#1C1C1E',
+  cardForeground: '#FFFFFF',
+
+  // Popover colors
+  popover: '#18181b',
+  popoverForeground: '#FFFFFF',
+
+  // Primary colors
+  primary: '#e4e4e7',
+  primaryForeground: '#18181b',
+
+  // Secondary colors
+  secondary: '#1C1C1E',
+  secondaryForeground: '#FFFFFF',
+
+  // Muted colors
+  muted: '#78788033',
+  mutedForeground: '#a1a1aa',
+
+  // Accent colors
+  accent: '#1C1C1E',
+  accentForeground: '#FFFFFF',
+
+  // Destructive colors
+  destructive: '#dc2626',
+  destructiveForeground: '#FFFFFF',
+
+  // Border and input - using alpha values for better blending
+  border: '#38383A',
+  input: 'rgba(255, 255, 255, 0.15)',
+  ring: '#71717a',
+
+  // Text colors
+  text: '#FFFFFF',
+  textMuted: '#a1a1aa',
+
+  // Legacy support for existing components
+  tint: '#FFFFFF',
+  icon: '#a1a1aa',
+  tabIconDefault: '#a1a1aa',
+  tabIconSelected: '#FFFFFF',
+
+  // Default buttons, links, Send button, selected tabs
+  blue: '#0A84FF',
+
+  // Success states, FaceTime buttons, completed tasks
+  green: '#30D158',
+
+  // Delete buttons, error states, critical alerts
+  red: '#FF453A',
+
+  // VoiceOver highlights, warning states
+  orange: '#FF9F0A',
+
+  // Notes app accent, Reminders highlights
+  yellow: '#FFD60A',
+
+  // Pink accent color for various UI elements
+  pink: '#FF375F',
+
+  // Purple accent for creative apps and features
+  purple: '#BF5AF2',
+
+  // Teal accent for communication features
+  teal: '#64D2FF',
+
+  // Indigo accent for system features
+  indigo: '#5E5CE6',
+};
+
+export const Colors = {
+  light: lightColors,
+  dark: darkColors,
+};

package/dist/templates/start/theme/globals.ts

@@ -0,0 +1,4 @@
+export const HEIGHT = 48;
+export const FONT_SIZE = 17;
+export const BORDER_RADIUS = 26;
+export const CORNERS = 999;

package/dist/templates/start/theme/theme-provider.tsx

@@ -0,0 +1,59 @@
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider as RNThemeProvider,
+} from '@react-navigation/native';
+import { Colors } from '@/theme/colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const ThemeProvider = ({ children }: Props) => {
+  const colorScheme = useColorScheme();
+
+  // Create custom themes that use your Colors
+  const customLightTheme = {
+    ...DefaultTheme,
+    colors: {
+      ...DefaultTheme.colors,
+      primary: Colors.light.primary,
+      background: Colors.light.background,
+      card: Colors.light.card,
+      text: Colors.light.text,
+      border: Colors.light.border,
+      notification: Colors.light.red,
+
+      tint: Colors.light.background,
+      icon: '#9BA1A6',
+      tabIconDefault: '#9BA1A6',
+      tabIconSelected: Colors.light.background,
+    },
+  };
+
+  const customDarkTheme = {
+    ...DarkTheme,
+    colors: {
+      ...DarkTheme.colors,
+      primary: Colors.dark.primary,
+      background: Colors.dark.background,
+      card: Colors.dark.card,
+      text: Colors.dark.text,
+      border: Colors.dark.border,
+      notification: Colors.dark.red,
+      tint: Colors.dark.background,
+      tabIconSelected: Colors.dark.background,
+      icon: '#9BA1A6',
+      tabIconDefault: '#9BA1A6',
+    },
+  };
+
+  return (
+    <RNThemeProvider
+      value={colorScheme === 'dark' ? customDarkTheme : customLightTheme}
+    >
+      {children}
+    </RNThemeProvider>
+  );
+};

package/dist/templates/start/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ]
+}