create-expo-stack 2.19.0-next.2970d7d → 2.19.0-next.d6fc7f8

package/build/templates/packages/nativewindui/components/nativewindui/Icon/Icon.ios.tsx.ejs

@@ -0,0 +1,52 @@
+import { SymbolView } from 'expo-symbols';
+
+import type { IconProps } from './types';
+
+import { useColorScheme } from '@/lib/useColorScheme';
+
+function Icon({
+  materialCommunityIcon: _materialCommunityIcon,
+  materialIcon: _materialIcon,
+  sfSymbol,
+  name,
+  color,
+  size = 24,
+  ...props
+}: IconProps) {
+  const { colors } = useColorScheme();
+  return (
+    <SymbolView
+      name={name ?? 'questionmark'}
+      tintColor={rgbaToHex(color ?? colors.foreground)}
+      size={size}
+      resizeMode="scaleAspectFit"
+      {...props}
+      {...sfSymbol}
+    />
+  );
+}
+
+export { Icon };
+
+// TODO: seems like the need to convert rgba to hex color is a bug in expo-symbols, accordion to the docs, it should accept a hex color, but it doesn't.
+
+function rgbaToHex(color: string): string {
+  if (!color) return 'black';
+  const rgbaRegex =
+    /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(\d*\.?\d+))?\s*\)$/i;
+  const match = color.match(rgbaRegex);
+
+  if (!match) {
+    return color;
+  }
+
+  const [, rStr, gStr, bStr, aStr] = match;
+  const r = Math.min(255, parseInt(rStr));
+  const g = Math.min(255, parseInt(gStr));
+  const b = Math.min(255, parseInt(bStr));
+  const a = aStr !== undefined ? Math.round(parseFloat(aStr) * 255) : 255;
+
+  const toHex = (n: number) => n.toString(16).padStart(2, '0');
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}${a < 255 ? toHex(a) : ''}`;
+}

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

@@ -0,0 +1,58 @@
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import {
+  SF_SYMBOLS_TO_MATERIAL_COMMUNITY_ICONS,
+  SF_SYMBOLS_TO_MATERIAL_ICONS,
+} from 'rn-icon-mapper';
+
+import type { IconProps } from './types';
+
+import { useColorScheme } from '@/lib/useColorScheme';
+
+function Icon({
+  name,
+  materialCommunityIcon,
+  materialIcon,
+  sfSymbol: _sfSymbol,
+  size = 24,
+  ...props
+}: IconProps) {
+  const { colors } = useColorScheme();
+  const defaultColor = colors.foreground;
+
+  if (materialCommunityIcon) {
+    return (
+      <MaterialCommunityIcons
+        size={size}
+        color={defaultColor}
+        {...props}
+        {...materialCommunityIcon}
+      />
+    );
+  }
+  if (materialIcon) {
+    return <MaterialIcons size={size} color={defaultColor} {...props} {...materialIcon} />;
+  }
+  const materialCommunityIconName =
+    SF_SYMBOLS_TO_MATERIAL_COMMUNITY_ICONS[
+      name as keyof typeof SF_SYMBOLS_TO_MATERIAL_COMMUNITY_ICONS
+    ];
+  if (materialCommunityIconName) {
+    return (
+      <MaterialCommunityIcons
+        name={materialCommunityIconName}
+        size={size}
+        color={defaultColor}
+        {...props}
+      />
+    );
+  }
+  const materialIconName =
+    SF_SYMBOLS_TO_MATERIAL_ICONS[name as keyof typeof SF_SYMBOLS_TO_MATERIAL_ICONS];
+  if (materialIconName) {
+    return <MaterialIcons name={materialIconName} size={size} color={defaultColor} {...props} />;
+  }
+  return <MaterialCommunityIcons name="help" size={size} color={defaultColor} {...props} />;
+}
+
+export { Icon };

package/build/templates/packages/nativewindui/components/nativewindui/Icon/index.ts.ejs

@@ -0,0 +1,16 @@
+import { cssInterop } from 'nativewind';
+
+import { Icon } from './Icon';
+
+cssInterop(Icon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      color: 'color',
+      height: 'size',
+      width: 'size',
+    },
+  },
+});
+
+export { Icon };

package/build/templates/packages/nativewindui/components/nativewindui/Icon/types.ts.ejs

@@ -0,0 +1,18 @@
+import type MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import type MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import type { SymbolViewProps } from 'expo-symbols';
+import type { IconMapper } from 'rn-icon-mapper';
+
+type MaterialCommunityIconsProps = React.ComponentProps<typeof MaterialCommunityIcons>;
+type MaterialIconsProps = React.ComponentProps<typeof MaterialIcons>;
+
+type Style = SymbolViewProps['style'] &
+  MaterialIconsProps['style'] &
+  MaterialCommunityIconsProps['style'];
+
+type IconProps = IconMapper<SymbolViewProps, MaterialIconsProps, MaterialCommunityIconsProps> & {
+  style?: Style;
+  className?: string;
+};
+
+export type { IconProps };

package/build/templates/packages/nativewindui/components/{ThemeToggle.tsx.ejs → nativewindui/ThemeToggle.tsx.ejs}

@@ -1,10 +1,10 @@
-import { Icon } from '@roninoss/icons';
 import { 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';
+import { Icon } from '@/components/nativewindui/Icon';
+import { cn } from '@/lib/cn';
+import { useColorScheme } from '@/lib/useColorScheme';
+import { COLORS } from '@/theme/colors';
 
 export function ThemeToggle() {
   const { colorScheme, toggleColorScheme } = useColorScheme();
@@ -14,22 +14,20 @@ export function ThemeToggle() {
         className="items-center justify-center"
         key={`toggle-${colorScheme}`}
         entering={ZoomInRotate}>
-        <Pressable
-          onPress={toggleColorScheme}
-          className="opacity-80">
+        <Pressable onPress={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} />
+                  <Icon 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} />
+                  <Icon name="sun.min" color={COLORS.black} />
                 </View>
               )}
         </Pressable>
       </Animated.View>
     </LayoutAnimationConfig>
   );
-}
+}

package/build/templates/packages/nativewindui/drawer/app/(drawer)/index.tsx.ejs

@@ -1,6 +1,6 @@
 import { Stack } from 'expo-router';
 import { useHeaderHeight } from '@react-navigation/elements';
-import { LegendList } from '@legendapp/list';
+import { FlashList } from '@shopify/flash-list';
 import { cssInterop } from 'nativewind';
 import * as React from 'react';
 import {
@@ -32,34 +32,33 @@ import { Icon } from '@roninoss/icons';
 import * as StoreReview from 'expo-store-review';
 <% } %>
 
-import { Container } from '~/components/Container';
+import { Container } from '@/components/Container';
 <% if (props.stylingPackage?.options.selectedComponents.includes('activity-indicator')) { %>
-import { ActivityIndicator } from '~/components/nativewindui/ActivityIndicator';
+import { ActivityIndicator } from '@/components/nativewindui/ActivityIndicator';
 <% } %>
 <% if (props.stylingPackage?.options.selectedComponents.includes('avatar')) { %>
-import { Avatar, AvatarFallback, AvatarImage } from '~/components/nativewindui/Avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/nativewindui/Avatar';
 <% } %>
 <% if (props.stylingPackage?.options.selectedComponents.includes('date-picker')) { %>
-import { DatePicker } from '~/components/nativewindui/DatePicker';
+import { DatePicker } from '@/components/nativewindui/DatePicker';
 <% } %>
 <% if (props.stylingPackage?.options.selectedComponents.includes('picker')) { %>
-import { Picker, PickerItem } from '~/components/nativewindui/Picker';
+import { Picker, PickerItem } from '@/components/nativewindui/Picker';
 <% } %>
 <% if (props.stylingPackage?.options.selectedComponents.includes('progress-indicator')) { %>
-import { ProgressIndicator } from '~/components/nativewindui/ProgressIndicator';
+import { ProgressIndicator } from '@/components/nativewindui/ProgressIndicator';
 <% } %>
 <% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
-import { Sheet, useSheetRef } from '~/components/nativewindui/Sheet';
+import { Sheet, useSheetRef } from '@/components/nativewindui/Sheet';
 <% } %>
 <% if (props.stylingPackage?.options.selectedComponents.includes('slider')) { %>
-import { Slider } from '~/components/nativewindui/Slider';
+import { Slider } from '@/components/nativewindui/Slider';
 <% } %>
-import { Text } from '~/components/nativewindui/Text';
+import { Text } from '@/components/nativewindui/Text';
 <% if (props.stylingPackage?.options.selectedComponents.includes('toggle')) { %>
-import { Toggle } from '~/components/nativewindui/Toggle';
+import { Toggle } from '@/components/nativewindui/Toggle';
 <% } %>
-import { useColorScheme } from '~/lib/useColorScheme';
-import { useHeaderSearchBar } from '~/lib/useHeaderSearchBar';
+import { useColorScheme } from '@/lib/useColorScheme';
 
 export default function Home() {
   const searchValue = useHeaderSearchBar({ hideWhenScrolling: COMPONENTS.length === 0 });
@@ -72,7 +71,7 @@ export default function Home() {
     <>
       <Stack.Screen options={{ title: 'Home' }} />
       <Container>
-        <LegendList
+        <FlashList
           contentInsetAdjustmentBehavior="automatic"
           keyboardShouldPersistTaps="handled"
           data={data}
@@ -83,14 +82,13 @@ export default function Home() {
           ItemSeparatorComponent={renderItemSeparator}
           renderItem={renderItem}
           ListEmptyComponent={COMPONENTS.length === 0 ? ListEmptyComponent : undefined}
-          recycleItems
         />
       </Container>
     </>
   );
 }
 
-cssInterop(LegendList, {
+cssInterop(FlashList, {
   className: 'style',
   contentContainerClassName: 'contentContainerStyle',
 });
@@ -125,7 +123,7 @@ function ListEmptyComponent() {
             variant='subhead'
             className='text-primary'
           >
-            NativeWindUI
+            NativewindUI
           </Text>
           {' website.'}
         </Text>
@@ -466,7 +464,7 @@ const COMPONENTS: ComponentItem[] = [
             onPress={async () => {
               try {
                 const result = await Share.share({
-                  message: 'NativeWindUI | Familiar interface, native feel.',
+                  message: 'NativewindUI | Familiar interface, native feel.',
                 });
                 if (result.action === Share.sharedAction) {
                   if (result.activityType) {
@@ -523,7 +521,7 @@ const COMPONENTS: ComponentItem[] = [
       const TWITTER_AVATAR_URI = 'https://pbs.twimg.com/profile_images/1782428433898708992/1voyv4_A_400x400.jpg';
       return (
         <View className='items-center'>
-          <Avatar alt="NativeWindUI Avatar">
+          <Avatar alt="NativewindUI Avatar">
             <AvatarImage source={{ uri: TWITTER_AVATAR_URI }} />
             <AvatarFallback>
               <Text>NUI</Text>

package/build/templates/packages/nativewindui/drawer/app/+not-found.tsx.ejs

@@ -2,23 +2,23 @@ import { Link, Stack } from 'expo-router';
 <% if (["nativewind", "nativewindui"].includes(props.stylingPackage?.name)) {%>
   import { Text } from 'react-native';
 
-  import { Container } from '~/components/Container';
+  import { Container } from '@/components/Container';
 <% } else if (props.stylingPackage?.name === "unistyles") { %>
   import { createStyleSheet, useStyles } from 'react-native-unistyles'
   import { Text } from 'react-native';
 
-  import { Container } from '~/components/Container';
+  import { Container } from '@/components/Container';
 <% } else if (props.stylingPackage?.name === "stylesheet") { %>
   import { StyleSheet, Text } from 'react-native';
 
-  import { Container } from '~/components/Container';
+  import { Container } from '@/components/Container';
 <% } else if (props.stylingPackage?.name === "tamagui") { %>
   import { YStack } from "tamagui";
 	import { Container, Main, Subtitle, Title } from "../tamagui.config";
 <% } else if (props.stylingPackage?.name === "restyle") { %>
   import { Box, Text, makeStyles } from 'theme';
 
-  import { Container } from '~/components/Container';
+  import { Container } from '@/components/Container';
 <% } %>
 
 export default function NotFoundScreen() {

package/build/templates/packages/nativewindui/drawer/app/_layout.tsx.ejs

@@ -13,8 +13,8 @@ import { StatusBar } from 'expo-status-bar';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 <% } %>
 
-import { ThemeToggle } from '~/components/ThemeToggle';
-import { useColorScheme, useInitialAndroidBarSync } from '~/lib/useColorScheme';
+import { ThemeToggle } from '@/components/ThemeToggle';
+import { useColorScheme, useInitialAndroidBarSync } from '@/lib/useColorScheme';
 import { NAV_THEME } from '~/theme';
 
 export {

package/build/templates/packages/nativewindui/drawer/app/modal.tsx.ejs

@@ -2,8 +2,8 @@ import { Icon } from '@roninoss/icons';
 import { StatusBar } from 'expo-status-bar';
 import { Linking, Platform, View } from 'react-native';
 
-import { Text } from '~/components/nativewindui/Text';
-import { useColorScheme } from '~/lib/useColorScheme';
+import { Text } from '@/components/nativewindui/Text';
+import { useColorScheme } from '@/lib/useColorScheme';
 
 export default function ModalScreen() {
   const { colors, colorScheme } = useColorScheme();
@@ -15,7 +15,7 @@ export default function ModalScreen() {
       <View className="flex-1 items-center justify-center gap-1 px-12">
         <Icon name="file-plus-outline" size={42} color={colors.grey} />
         <Text variant="title3" className="pb-1 text-center font-semibold">
-          NativeWindUI
+          NativewindUI
         </Text>
         <Text color="tertiary" variant="subhead" className="pb-4 text-center">
           You can install any of the free components from the{' '}
@@ -23,7 +23,7 @@ export default function ModalScreen() {
             onPress={() => Linking.openURL('https://nativewindui.com')}
             variant="subhead"
             className="text-primary">
-            NativeWindUI
+            NativewindUI
           </Text>
           {' website.'}
         </Text>

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

@@ -1,22 +1,9 @@
-import * as NavigationBar from 'expo-navigation-bar';
 import { useColorScheme as useNativewindColorScheme } from 'nativewind';
-import * as React from 'react';
-import { Platform } from 'react-native';
 
-import { COLORS } from '~/theme/colors';
+import { COLORS } from '@/theme/colors';
 
 function useColorScheme() {
-  const { colorScheme, setColorScheme: setNativeWindColorScheme } = useNativewindColorScheme();
-
-  async function setColorScheme(colorScheme: 'light' | 'dark') {
-    setNativeWindColorScheme(colorScheme);
-    if (Platform.OS !== 'android') return;
-    try {
-      await setNavigationBar(colorScheme);
-    } catch (error) {
-      console.error('useColorScheme.tsx", "setColorScheme', error);
-    }
-  }
+  const { colorScheme, setColorScheme } = useNativewindColorScheme();
 
   function toggleColorScheme() {
     return setColorScheme(colorScheme === 'light' ? 'dark' : 'light');
@@ -31,25 +18,4 @@ function useColorScheme() {
   };
 }
 
-/**
- * Set the Android navigation bar color based on the color scheme.
- */
-function useInitialAndroidBarSync() {
-  const { colorScheme } = useColorScheme();
-  React.useEffect(() => {
-    if (Platform.OS !== 'android') return;
-    setNavigationBar(colorScheme).catch((error) => {
-      console.error('useColorScheme.tsx", "useInitialColorScheme', error);
-    });
-  }, [colorScheme]);
-}
-
-export { useColorScheme, useInitialAndroidBarSync };
-
-function setNavigationBar(colorScheme: 'light' | 'dark') {
-  return Promise.all([
-    NavigationBar.setButtonStyleAsync(colorScheme === 'dark' ? 'light' : 'dark'),
-    NavigationBar.setPositionAsync('absolute'),
-    NavigationBar.setBackgroundColorAsync(colorScheme === 'dark' ? '#00000030' : '#ffffff80'),
-  ]);
-}
+export { useColorScheme };

package/build/templates/packages/nativewindui/stack/app/+not-found.tsx.ejs

@@ -1,6 +1,6 @@
 import { Link, Stack } from 'expo-router';
 import { View } from 'react-native';
-import { Text } from '~/components/nativewindui/Text';
+import { Text } from '@/components/nativewindui/Text';
 
 export default function NotFoundScreen() {
   return (

package/build/templates/packages/nativewindui/stack/app/_layout.tsx.ejs

@@ -1,24 +1,18 @@
-import '../global.css';
-import 'expo-dev-client';
-import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
-import { Icon } from '@roninoss/icons';
+import '@/global.css';
+
 <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 <% } %>
-<% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
-import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
-<% } %>
+import { ThemeProvider as NavThemeProvider } from '@react-navigation/native';
 import { Link, Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
-import { Pressable, View } from 'react-native';
-<% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
+import { Pressable } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-<% } %>
 
-import { ThemeToggle } from '~/components/ThemeToggle';
-import { cn } from '~/lib/cn';
-import { useColorScheme, useInitialAndroidBarSync } from '~/lib/useColorScheme';
-import { NAV_THEME } from '~/theme';
+import { Icon } from '@/components/nativewindui/Icon';
+import { ThemeToggle } from '@/components/nativewindui/ThemeToggle';
+import { useColorScheme } from '@/lib/useColorScheme';
+import { NAV_THEME } from '@/theme';
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -26,7 +20,6 @@ export {
 } from 'expo-router';
 
 export default function RootLayout() {
-  useInitialAndroidBarSync();
   const { colorScheme, isDarkColorScheme } = useColorScheme();
 
   return (
@@ -37,15 +30,12 @@ export default function RootLayout() {
       />
       {/* WRAP YOUR APP WITH ANY ADDITIONAL PROVIDERS HERE */}
       {/* <ExampleProvider> */}
-       <% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
       <GestureHandlerRootView style={{ flex: 1 }}>
-        <BottomSheetModalProvider>
-        <% } %>
         <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
         <ActionSheetProvider>
         <% } %>
         <NavThemeProvider value={NAV_THEME[colorScheme]}>
-          <Stack screenOptions={SCREEN_OPTIONS}>
+          <Stack>
             <Stack.Screen name="index" options={INDEX_OPTIONS} />
             <Stack.Screen name="modal" options={MODAL_OPTIONS} />
           </Stack>
@@ -53,35 +43,23 @@ export default function RootLayout() {
         <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
         </ActionSheetProvider>
         <% } %>
-        <% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
-        </BottomSheetModalProvider>
       </GestureHandlerRootView>
-      <% } %>
       {/* </ExampleProvider> */}
     </>
   );
 }
 
-const SCREEN_OPTIONS = {
-  animation: 'ios_from_right', // for android
-} as const;
-
 const INDEX_OPTIONS = {
   headerLargeTitle: true,
-  title: 'NativeWindUI',
+  title: 'NativewindUI',
   headerRight: () => <SettingsIcon />,
 } as const;
 
 function SettingsIcon() {
-  const { colors } = useColorScheme();
   return (
     <Link href="/modal" asChild>
-      <Pressable className="opacity-80">
-        {({ pressed }) => (
-          <View className={cn(pressed ? 'opacity-50' : 'opacity-90')}>
-            <Icon name="cog-outline" color={colors.foreground} />
-          </View>
-        )}
+      <Pressable className="opacity-80 active:opacity-50">
+        <Icon name="gearshape" className="text-foreground" />
       </Pressable>
     </Link>
   );