create-expo-stack 2.6.5 → 2.7.0-next.2960d96

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.primary,
+        headerIconColor: colors.foreground,
+        hintTextColor: colors.grey,
+        hideWhenScrolling: true,
+        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)',
+    destructive: 'rgb(255, 56, 43)',
+    primary: '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)',
+    destructive: 'rgb(254, 67, 54)',
+    primary: '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)',
+    destructive: 'rgb(186, 26, 26)',
+    primary: '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)',
+    destructive: 'rgb(147, 0, 10)',
+    primary: '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.destructive,
+      primary: COLORS.light.primary,
+      text: COLORS.black,
+    },
+  },
+  dark: {
+    dark: true,
+    colors: {
+      background: COLORS.dark.background,
+      border: COLORS.dark.grey5,
+      card: COLORS.dark.grey6,
+      notification: COLORS.dark.destructive,
+      primary: COLORS.dark.primary,
+      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,17 +5,19 @@ 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 SelectedComponents = 'action-sheet' | 'actionable-text' | 'activity-indicator' | 'activity-view' | 'alert' | 'avatar' | 'bottom-sheet' | 'context-menu' | 'date-picker' | 'dropdown-menu' | 'picker' | 'progress-indicator' | 'ratings-indicator' | 'segmented-control' | 'slider' | 'text' | 'toggle';
 export type AvailablePackages = {
     name: (typeof availablePackages)[number];
     type: 'navigation' | 'styling' | 'authentication' | 'internationalization';
     options?: {
+        selectedComponents?: SelectedComponents[];
         type?: NavigationTypes;
     };
 };

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==