create-expo-stack 2.6.5 → 2.7.0-next.4dc0e0a

package/build/templates/packages/nativewindui/app/top-tabs/following.tsx.ejs

@@ -0,0 +1,13 @@
+import { Text } from '@/components/Text';
+import { View } from 'react-native';
+
+export default function FollowingScreen() {
+  return (
+    <View className='flex-1 justify-center items-center gap-5'>
+      <View className='items-center gap-1'>
+        <Text variant='title1'>Following Tab</Text>
+        <Text>Swipe to see other tabs</Text>
+      </View>
+    </View>
+  );
+}

package/build/templates/packages/nativewindui/app/top-tabs/index.tsx.ejs

@@ -0,0 +1,13 @@
+import { Text } from '@/components/Text';
+import { View } from 'react-native';
+
+export default function ForYouScreen() {
+  return (
+    <View className='flex-1 justify-center items-center gap-5'>
+      <View className='items-center gap-1'>
+        <Text variant='title1'>For You Tab</Text>
+        <Text>Swipe to see other tabs</Text>
+      </View>
+    </View>
+  );
+}

package/build/templates/packages/nativewindui/app/top-tabs/my-group.tsx.ejs

@@ -0,0 +1,13 @@
+import { View } from 'react-native';
+import { Text } from '@/components/Text';
+
+export default function MyGroupScreen() {
+  return (
+    <View className='flex-1 justify-center items-center gap-5'>
+      <View className='items-center gap-1'>
+        <Text variant='title1'>My Group Tab</Text>
+        <Text>Swipe to see other tabs</Text>
+      </View>
+    </View>
+  );
+}

package/build/templates/packages/nativewindui/components/Text.tsx.ejs

@@ -0,0 +1,55 @@
+import { VariantProps, cva } from 'class-variance-authority';
+import { cssInterop } from 'nativewind';
+import * as React from 'react';
+import { UITextView } from 'react-native-uitextview';
+
+import { cn } from '@/lib/cn';
+
+cssInterop(UITextView, { className: 'style' });
+
+const textVariants = cva('text-foreground', {
+  variants: {
+    variant: {
+      largeTitle: 'text-4xl',
+      title1: 'text-2xl',
+      title2: 'text-[22px] leading-7',
+      title3: 'text-xl',
+      heading: 'text-[17px] leading-6 font-semibold',
+      body: 'text-[17px] leading-6',
+      callout: 'text-base',
+      subhead: 'text-[15px] leading-6',
+      footnote: 'text-[13px] leading-5',
+      caption1: 'text-xs',
+      caption2: 'text-[11px] leading-4',
+    },
+    color: {
+      primary: '',
+      secondary: 'text-secondary-foreground/90',
+      tertiary: 'text-muted-foreground/90',
+      quarternary: 'text-muted-foreground/50',
+    },
+  },
+  defaultVariants: {
+    variant: 'body',
+    color: 'primary',
+  },
+});
+
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+function Text({
+  className,
+  variant,
+  color,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof UITextView> & VariantProps<typeof textVariants>) {
+  const textClassName = React.useContext(TextClassContext);
+  return (
+    <UITextView
+      className={cn(textVariants({ variant, color }), textClassName, className)}
+      {...props}
+    />
+  );
+}
+
+export { Text, TextClassContext, textVariants };

package/build/templates/packages/nativewindui/components/ThemeToggle.tsx.ejs

@@ -0,0 +1,39 @@
+import { Icon } from '@roninoss/icons';
+import { Appearance, Pressable, View } from 'react-native';
+import Animated, { LayoutAnimationConfig, ZoomInRotate } from 'react-native-reanimated';
+
+import { cn } from '@/lib/cn';
+import { useColorScheme } from '@/lib/useColorScheme';
+import { COLORS } from '@/theme/colors';
+
+export function ThemeToggle() {
+  const { colorScheme, toggleColorScheme } = useColorScheme();
+  return (
+    <LayoutAnimationConfig skipEntering>
+      <Animated.View
+        className="items-center justify-center"
+        key={`toggle-${colorScheme}`}
+        entering={ZoomInRotate}>
+        <Pressable
+          onPress={() => {
+            // ColorScheme is set with `Appearance` as well for the iOS header search placeholder text: https://github.com/software-mansion/react-native-screens/discussions/1758
+            Appearance.setColorScheme(colorScheme === 'dark' ? 'light' : 'dark');
+            toggleColorScheme();
+          }}
+          className="opacity-80">
+          {colorScheme === 'dark'
+            ? ({ pressed }) => (
+                <View className={cn('px-0.5', pressed && 'opacity-50')}>
+                  <Icon namingScheme="sfSymbol" name="moon.stars" color={COLORS.white} />
+                </View>
+              )
+            : ({ pressed }) => (
+                <View className={cn('px-0.5', pressed && 'opacity-50')}>
+                  <Icon namingScheme="sfSymbol" name="sun.min" color={COLORS.black} />
+                </View>
+              )}
+        </Pressable>
+      </Animated.View>
+    </LayoutAnimationConfig>
+  );
+}

package/build/templates/packages/nativewindui/components/Toggle.tsx.ejs

@@ -0,0 +1,17 @@
+import { useColorScheme } from '@/lib/useColorScheme';
+import { COLORS } from '@/theme/colors';
+import { Switch } from 'react-native';
+
+export function Toggle(props: React.ComponentPropsWithoutRef<typeof Switch>) {
+  const { colors } = useColorScheme();
+  return (
+    <Switch
+      trackColor={{
+        true: colors.blue,
+        false: colors.grey,
+      }}
+      thumbColor={COLORS.white}
+      {...props}
+    />
+  );
+}

package/build/templates/packages/nativewindui/expo-env.d.ts.ejs

@@ -0,0 +1,3 @@
+/// <reference types="expo/types" />
+
+// NOTE: This file should not be edited and should be in your git ignore

package/build/templates/packages/nativewindui/global.css.ejs

@@ -0,0 +1,91 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 242 242 247;
+    --foreground: 0 0 0;
+    --card: 255 255 255;
+    --card-foreground: 8 28 30;
+    --popover: 230 230 235;
+    --popover-foreground: 0 0 0;
+    --primary: 0 123 254;
+    --primary-foreground: 255 255 255;
+    --secondary: 45 175 231;
+    --secondary-foreground: 255 255 255;
+    --muted: 175 176 180;
+    --muted-foreground: 142 142 147;
+    --accent: 255 40 84;
+    --accent-foreground: 255 255 255;
+    --destructive: 255 56 43;
+    --destructive-foreground: 255 255 255;
+    --border: 230 230 235;
+    --input: 210 210 215;
+    --ring: 230 230 235;
+
+    --android-background: 249 249 255;
+    --android-foreground: 0 0 0;
+    --android-card: 255 255 255;
+    --android-card-foreground: 24 28 35;
+    --android-popover: 215 217 228;
+    --android-popover-foreground: 0 0 0;
+    --android-primary: 0 112 233;
+    --android-primary-foreground: 255 255 255;
+    --android-secondary: 176 201 255;
+    --android-secondary-foreground: 20 55 108;
+    --android-muted: 193 198 215;
+    --android-muted-foreground: 113 119 134;
+    --android-accent: 169 73 204;
+    --android-accent-foreground: 255 255 255;
+    --android-destructive: 254 67 54;
+    --android-destructive-foreground: 255 255 255;
+    --android-border: 215 217 228;
+    --android-input: 210 210 215;
+    --android-ring: 215 217 228;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: 0 0 0;
+      --foreground: 255 255 255;
+      --card: 21 21 24;
+      --card-foreground: 255 255 255;
+      --popover: 40 40 42;
+      --popover-foreground: 255 255 255;
+      --primary: 3 133 255;
+      --primary-foreground: 255 255 255;
+      --secondary: 100 211 254;
+      --secondary-foreground: 255 255 255;
+      --muted: 70 70 73;
+      --muted-foreground: 142 142 147;
+      --accent: 255 52 95;
+      --accent-foreground: 255 255 255;
+      --destructive: 254 67 54;
+      --destructive-foreground: 255 255 255;
+      --border: 40 40 42;
+      --input: 55 55 57;
+      --ring: 40 40 42;
+
+      --android-background: 0 0 0;
+      --android-foreground: 255 255 255;
+      --android-card: 16 19 27;
+      --android-card-foreground: 224 226 237;
+      --android-popover: 39 42 50;
+      --android-popover-foreground: 224 226 237;
+      --android-primary: 3 133 255;
+      --android-primary-foreground: 255 255 255;
+      --android-secondary: 28 60 114;
+      --android-secondary-foreground: 189 209 255;
+      --android-muted: 216 226 255;
+      --android-muted-foreground: 0 26 64;
+      --android-accent: 83 0 111;
+      --android-accent-foreground: 238 177 255;
+      --android-destructive: 147 0 10;
+      --android-destructive-foreground: 255 255 255;
+      --android-border: 39 42 50;
+      --android-input: 55 55 57;
+      --android-ring: 39 42 50;
+    }
+  }
+}

package/build/templates/packages/nativewindui/lib/cn.ts.ejs

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/build/templates/packages/nativewindui/lib/useColorScheme.tsx.ejs

@@ -0,0 +1,14 @@
+import { useColorScheme as useNativewindColorScheme } from 'nativewind';
+
+import { COLORS } from '@/theme/colors';
+
+export function useColorScheme() {
+  const { colorScheme, setColorScheme, toggleColorScheme } = useNativewindColorScheme();
+  return {
+    colorScheme: colorScheme ?? 'light',
+    isDarkColorScheme: colorScheme === 'dark',
+    setColorScheme,
+    toggleColorScheme,
+    colors: COLORS[colorScheme ?? 'light'],
+  };
+}

package/build/templates/packages/nativewindui/lib/useHeaderSearchBar.tsx.ejs

@@ -0,0 +1,31 @@
+import { COLORS } from '@/theme/colors';
+import { useNavigation } from 'expo-router';
+import * as React from 'react';
+import { SearchBarProps } from 'react-native-screens';
+import { useColorScheme } from './useColorScheme';
+
+export function useHeaderSearchBar(props: SearchBarProps = {}) {
+  const { colorScheme, colors } = useColorScheme();
+  const navigation = useNavigation();
+  const [search, setSearch] = React.useState('');
+
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerSearchBarOptions: {
+        placeholder: 'Search...',
+        barTintColor: colorScheme === 'dark' ? COLORS.black : COLORS.white,
+        textColor: colors.foreground,
+        tintColor: colors.blue,
+        headerIconColor: colors.foreground,
+        hintTextColor: colors.grey,
+        hideWhenScrolling: false,
+        onChangeText(ev) {
+          setSearch(ev.nativeEvent.text);
+        },
+        ...props,
+      } satisfies SearchBarProps,
+    });
+  }, [navigation, colorScheme]);
+
+  return search;
+}

package/build/templates/packages/nativewindui/metro.config.js.ejs

@@ -0,0 +1,10 @@
+const { getDefaultConfig } = require('expo/metro-config');
+const { withNativeWind } = require('nativewind/metro');
+
+// eslint-disable-next-line no-undef
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, {
+  input: './global.css',
+  inlineRem: 16,
+});

package/build/templates/packages/nativewindui/nativewind-env.d.ts.ejs

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/build/templates/packages/nativewindui/tailwind.config.js.ejs

@@ -0,0 +1,66 @@
+const { hairlineWidth, platformSelect } = require('nativewind/theme');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // NOTE: Update this to include the paths to all of your component files.
+  content: ['./app/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
+  presets: [require('nativewind/preset')],
+  theme: {
+    extend: {
+      colors: {
+        border: withOpacity('border'),
+        input: withOpacity('input'),
+        ring: withOpacity('ring'),
+        background: withOpacity('background'),
+        foreground: withOpacity('foreground'),
+        primary: {
+          DEFAULT: withOpacity('primary'),
+          foreground: withOpacity('primary-foreground'),
+        },
+        secondary: {
+          DEFAULT: withOpacity('secondary'),
+          foreground: withOpacity('secondary-foreground'),
+        },
+        destructive: {
+          DEFAULT: withOpacity('destructive'),
+          foreground: withOpacity('destructive-foreground'),
+        },
+        muted: {
+          DEFAULT: withOpacity('muted'),
+          foreground: withOpacity('muted-foreground'),
+        },
+        accent: {
+          DEFAULT: withOpacity('accent'),
+          foreground: withOpacity('accent-foreground'),
+        },
+        popover: {
+          DEFAULT: withOpacity('popover'),
+          foreground: withOpacity('popover-foreground'),
+        },
+        card: {
+          DEFAULT: withOpacity('card'),
+          foreground: withOpacity('card-foreground'),
+        },
+      },
+      borderWidth: {
+        hairline: hairlineWidth(),
+      },
+    },
+  },
+  plugins: [],
+};
+
+function withOpacity(variableName) {
+  return ({ opacityValue }) => {
+    if (opacityValue !== undefined) {
+      return platformSelect({
+        ios: `rgb(var(--${variableName}) / ${opacityValue})`,
+        android: `rgb(var(--android-${variableName}) / ${opacityValue})`,
+      });
+    }
+    return platformSelect({
+      ios: `rgb(var(--${variableName}))`,
+      android: `rgb(var(--android-${variableName}))`,
+    });
+  };
+}

package/build/templates/packages/nativewindui/theme/colors.ts.ejs

@@ -0,0 +1,71 @@
+import { Platform } from 'react-native';
+
+const IOS_SYSTEM_COLORS = {
+  white: 'rgb(255, 255, 255)',
+  black: 'rgb(0, 0, 0)',
+  light: {
+    grey6: 'rgb(242, 242, 247)',
+    grey5: 'rgb(230, 230, 235)',
+    grey4: 'rgb(210, 210, 215)',
+    grey3: 'rgb(199, 199, 204)',
+    grey2: 'rgb(175, 176, 180)',
+    grey: 'rgb(142, 142, 147)',
+    background: 'rgb(242, 242, 247)',
+    foreground: 'rgb(0, 0, 0)',
+    root: 'rgb(255, 255, 255)',
+    card: 'rgb(255, 255, 255)',
+    red: 'rgb(255, 56, 43)',
+    blue: 'rgb(0, 123, 254)',
+  },
+  dark: {
+    grey6: 'rgb(21, 21, 24)',
+    grey5: 'rgb(40, 40, 42)',
+    grey4: 'rgb(55, 55, 57)',
+    grey3: 'rgb(70, 70, 73)',
+    grey2: 'rgb(99, 99, 102)',
+    grey: 'rgb(142, 142, 147)',
+    background: 'rgb(0, 0, 0)',
+    foreground: 'rgb(255, 255, 255)',
+    root: 'rgb(0, 0, 0)',
+    card: 'rgb(28, 28, 30)',
+    red: 'rgb(254, 67, 54)',
+    blue: 'rgb(3, 133, 255)',
+  },
+} as const;
+
+const ANDROID_COLORS = {
+  white: 'rgb(255, 255, 255)',
+  black: 'rgb(0, 0, 0)',
+  light: {
+    grey6: 'rgb(249, 249, 255)',
+    grey5: 'rgb(215, 217, 228)',
+    grey4: 'rgb(193, 198, 215)',
+    grey3: 'rgb(113, 119, 134)',
+    grey2: 'rgb(65, 71, 84)',
+    grey: 'rgb(24, 28, 35)',
+    background: 'rgb(249, 249, 255)',
+    foreground: 'rgb(0, 0, 0)',
+    root: 'rgb(255, 255, 255)',
+    card: 'rgb(255, 255, 255)',
+    red: 'rgb(186, 26, 26)',
+    blue: 'rgb(0, 112, 233)',
+  },
+  dark: {
+    grey6: 'rgb(16, 19, 27)',
+    grey5: 'rgb(39, 42, 50)',
+    grey4: 'rgb(49, 53, 61)',
+    grey3: 'rgb(54, 57, 66)',
+    grey2: 'rgb(139, 144, 160)',
+    grey: 'rgb(193, 198, 215)',
+    background: 'rgb(0, 0, 0)',
+    foreground: 'rgb(255, 255, 255)',
+    root: 'rgb(0, 0, 0)',
+    card: 'rgb(16, 19, 27)',
+    red: 'rgb(147, 0, 10)',
+    blue: 'rgb(3, 133, 255)',
+  },
+} as const;
+
+const COLORS = Platform.OS === 'ios' ? IOS_SYSTEM_COLORS : ANDROID_COLORS;
+
+export { COLORS };

package/build/templates/packages/nativewindui/theme/index.ts.ejs

@@ -0,0 +1,29 @@
+import { Theme } from '@react-navigation/native';
+import { COLORS } from './colors';
+
+const NAV_THEME: { light: Theme; dark: Theme } = {
+  light: {
+    dark: false,
+    colors: {
+      background: COLORS.light.background,
+      border: COLORS.light.grey5,
+      card: COLORS.light.card,
+      notification: COLORS.light.red,
+      primary: COLORS.light.blue, // BRAND COLOR
+      text: COLORS.black,
+    },
+  },
+  dark: {
+    dark: true,
+    colors: {
+      background: COLORS.dark.background,
+      border: COLORS.dark.grey5,
+      card: COLORS.dark.grey6,
+      notification: COLORS.dark.red,
+      primary: COLORS.dark.blue, // BRAND COLOR
+      text: COLORS.white,
+    },
+  },
+};
+
+export { NAV_THEME };

package/build/templates/packages/react-navigation/App.tsx.ejs

@@ -1,5 +1,8 @@
 <% if (props.stylingPackage?.name === "nativewind") { %>
-import './global.css';
+  import './global.css';
+<% } else if (props.stylingPackage?.name === "nativewinui") { %>
+  import './global.css';
+  import 'expo-dev-client';
 <% } %>
 <% if (props.stylingPackage?.name === "unistyles") { %>
 import './unistyles';

package/build/types/types.d.ts

@@ -5,11 +5,11 @@ export interface CliFlags {
     importAlias: string | boolean;
     packageManager: PackageManager;
 }
-export declare const availablePackages: readonly ["@react-navigation/drawer", "expo-router", "expoRouter", "firebase", "nativewind", "react-navigation", "reactNavigation", "react-native-gesture-handler", "react-native-reanimated", "reactnavigation", "stylesheet", "supabase", "tamagui", "restyle", "unistyles", "i18next"];
+export declare const availablePackages: readonly ["@react-navigation/drawer", "expo-router", "expoRouter", "firebase", "nativewind", "nativewindui", "react-navigation", "reactNavigation", "react-native-gesture-handler", "react-native-reanimated", "reactnavigation", "stylesheet", "supabase", "tamagui", "restyle", "unistyles", "i18next"];
 export type AuthenticationSelect = 'supabase' | 'firebase' | undefined;
 export type NavigationSelect = 'react-navigation' | 'expo-router' | undefined;
 export type NavigationTypes = 'stack' | 'tabs' | 'drawer + tabs' | undefined;
-export type StylingSelect = 'nativewind' | 'restyle' | 'stylesheet' | 'tamagui' | 'unistyles';
+export type StylingSelect = 'nativewind' | 'restyle' | 'stylesheet' | 'tamagui' | 'unistyles' | 'nativewindui';
 export type PackageManager = 'yarn' | 'npm' | 'pnpm' | 'bun';
 export type Internalization = 'i18next';
 export type AvailablePackages = {

package/build/types.js

@@ -7,6 +7,7 @@ exports.availablePackages = [
     'expoRouter',
     'firebase',
     'nativewind',
+    'nativewindui',
     'react-navigation',
     'reactNavigation',
     'react-native-gesture-handler',
@@ -19,4 +20,4 @@ exports.availablePackages = [
     'unistyles',
     'i18next'
 ];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvdHlwZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBU2EsUUFBQSxpQkFBaUIsR0FBRztJQUMvQiwwQkFBMEI7SUFDMUIsYUFBYTtJQUNiLFlBQVk7SUFDWixVQUFVO0lBQ1YsWUFBWTtJQUNaLGtCQUFrQjtJQUNsQixpQkFBaUI7SUFDakIsOEJBQThCO0lBQzlCLHlCQUF5QjtJQUN6QixpQkFBaUI7SUFDakIsWUFBWTtJQUNaLFVBQVU7SUFDVixTQUFTO0lBQ1QsU0FBUztJQUNULFdBQVc7SUFDWCxTQUFTO0NBQ0QsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvdHlwZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBU2EsUUFBQSxpQkFBaUIsR0FBRztJQUMvQiwwQkFBMEI7SUFDMUIsYUFBYTtJQUNiLFlBQVk7SUFDWixVQUFVO0lBQ1YsWUFBWTtJQUNaLGNBQWM7SUFDZCxrQkFBa0I7SUFDbEIsaUJBQWlCO0lBQ2pCLDhCQUE4QjtJQUM5Qix5QkFBeUI7SUFDekIsaUJBQWlCO0lBQ2pCLFlBQVk7SUFDWixVQUFVO0lBQ1YsU0FBUztJQUNULFNBQVM7SUFDVCxXQUFXO0lBQ1gsU0FBUztDQUNELENBQUMifQ==