create-expo-stack 2.7.0-next.2960d96 → 2.7.0-next.2a20d82

package/build/templates/packages/nativewindui/app/index.tsx.ejs

@@ -6,18 +6,29 @@ import {
   <% if (props.stylingPackage?.options.selectedComponents.includes('alert')) { %>
   Alert,
   <% } %>
+  <% if (
+  props.stylingPackage?.options.selectedComponents.includes('alert') || 
+  props.stylingPackage?.options.selectedComponents.includes('action-sheet') || 
+  props.stylingPackage?.options.selectedComponents.includes('activity-view') || 
+  props.stylingPackage?.options.selectedComponents.includes('bottom-sheet') 
+  ) { %>
   Button as RNButton,
   ButtonProps,
+  <% } %>
   Linking,
+  <% if (props.stylingPackage?.options.selectedComponents.includes('alert') || props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
   Platform,
+  <% } %>
   <% if (props.stylingPackage?.options.selectedComponents.includes('dropdown-menu')) { %>
   Pressable,
   <% } %>
   <% if (props.stylingPackage?.options.selectedComponents.includes('activity-view')) { %>
   Share,
   <% } %>
+  useWindowDimensions,
   View,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
 import { useActionSheet } from '@expo/react-native-action-sheet';
 <% } %>
@@ -68,14 +79,19 @@ cssInterop(FlashList, {
   className: 'style',
   contentContainerClassName: 'contentContainerStyle',
 });
-
+<% if (
+  props.stylingPackage?.options.selectedComponents.includes('alert') || 
+  props.stylingPackage?.options.selectedComponents.includes('action-sheet') || 
+  props.stylingPackage?.options.selectedComponents.includes('activity-view') || 
+  props.stylingPackage?.options.selectedComponents.includes('bottom-sheet') 
+  ) { %>
 function DefaultButton({ color, ...props }: ButtonProps) {
   const { colors } = useColorScheme();
   return <RNButton color={color ?? colors.primary} {...props} />;
 }
-
+<% } %>
 export default function Screen() {
-  const searchValue = useHeaderSearchBar();
+  const searchValue = useHeaderSearchBar({ hideWhenScrolling: COMPONENTS.length === 0 });
 
   const data = searchValue
     ? COMPONENTS.filter((c) => c.name.toLowerCase().includes(searchValue.toLowerCase()))
@@ -88,30 +104,28 @@ export default function Screen() {
       data={data}
       estimatedItemSize={200}
       contentContainerClassName="py-4"
-      centerContent={data.length === 0}
       extraData={searchValue}
+      <% if (props.stylingPackage?.options.selectedComponents.includes('selectable-text')) { %>
       removeClippedSubviews={false} // used for selecting text on android
+      <% } %>
       keyExtractor={keyExtractor}
       ItemSeparatorComponent={renderItemSeparator}
       renderItem={renderItem}
-      ListEmptyComponent={ListEmptyComponent}
+      ListEmptyComponent={COMPONENTS.length === 0 ? ListEmptyComponent : undefined}
     />
   );
 }
 
-const SEARCH_BAR_HEIGHT = 52;
-
 function ListEmptyComponent() {
   const insets = useSafeAreaInsets();
+  const dimensions = useWindowDimensions();
   const headerHeight = useHeaderHeight();
   const { colors } = useColorScheme();
+  const height = dimensions.height - headerHeight - insets.bottom - insets.top;
+
   return (
-    <>
-      {Platform.OS === 'ios' && (
-        <View style={{ height: headerHeight + SEARCH_BAR_HEIGHT + insets.top - insets.bottom }} />
-      )}
-      <View className='flex-1 items-center justify-center px-12 gap-1'>
-        <Icon name='folder-plus-outline' size={42} color={colors.grey} />
+    <View style={{ height }} 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'>
           No Components Installed
         </Text>
@@ -127,11 +141,10 @@ function ListEmptyComponent() {
           {' website.'}
         </Text>
       </View>
-    </>
   );
 }
 
-type ComponentItem = { name: string; component: () => React.JSX.Element };
+type ComponentItem = { name: string; component: React.FC };
 
 function keyExtractor(item: ComponentItem) {
   return item.name;
@@ -159,12 +172,14 @@ function Card({ children, title }: { children: React.ReactNode; title: string })
     </View>
   );
 }
-
+<% if (props.stylingPackage?.options.selectedComponents.includes('ratings-indicator')) { %>
+let hasRequestedReview = false;
+<% } %>
 const COMPONENTS: ComponentItem[] = [
   <% if (props.stylingPackage?.options.selectedComponents.includes('picker')) { %>
   {
     name: 'Picker',
-    component: () => {
+    component: function PickerExample() {
       const { colors } = useColorScheme();
       const [picker, setPicker] = React.useState('blue');
       return (
@@ -204,7 +219,7 @@ const COMPONENTS: ComponentItem[] = [
   <% if (props.stylingPackage?.options.selectedComponents.includes('date-picker')) { %>
   {
     name: 'Date Picker',
-    component: () => {
+    component: function DatePickerExample() {
       const [date, setDate] = React.useState(new Date());
       return (
         <View className='items-center'>
@@ -223,7 +238,7 @@ const COMPONENTS: ComponentItem[] = [
   <% if (props.stylingPackage?.options.selectedComponents.includes('segmented-control')) { %>
   {
     name: 'Segmented Controls',
-    component: () => {
+    component: function SegmentedControlsExample() {
       const [segment, setSegment] = React.useState(0);
       return (
         <SegmentedControl
@@ -240,7 +255,7 @@ const COMPONENTS: ComponentItem[] = [
   <% if (props.stylingPackage?.options.selectedComponents.includes('slider')) { %>
   {
     name: 'Slider',
-    component: () => {
+    component: function SliderExample() {
       const [sliderValue, setSliderValue] = React.useState(0.5);
       return <Slider value={sliderValue} onValueChange={setSliderValue} />;
     },
@@ -249,7 +264,7 @@ const COMPONENTS: ComponentItem[] = [
   <% if (props.stylingPackage?.options.selectedComponents.includes('toggle')) { %>
   {
     name: 'Toggle',
-    component: () => {
+    component: function ToggleExample() {
       const [switchValue, setSwitchValue] = React.useState(true);
       return (
         <View className='items-center'>
@@ -262,7 +277,7 @@ const COMPONENTS: ComponentItem[] = [
   <% if (props.stylingPackage?.options.selectedComponents.includes('context-menu')) { %>
   {
     name: 'Context Menu',
-    component: () => {
+    component: function ContextMenuExample() {
       const [isChecked, setIsChecked] = React.useState(true);
       return (
         <View>
@@ -303,9 +318,9 @@ const COMPONENTS: ComponentItem[] = [
   <% if (props.stylingPackage?.options.selectedComponents.includes('dropdown-menu')) { %>
   {
     name: 'Dropdown Menu',
-    component: () => {
+    component: function DropdownMenuExample() {
       const { colors } = useColorScheme();
-      const [menu, setMenu] = React.useState<'blue' | 'red'>('blue');
+      const [menu, setMenu] = React.useState<'primary' | 'destructive'>('primary');
 
       return (
         <View className='items-center'>
@@ -326,24 +341,24 @@ const COMPONENTS: ComponentItem[] = [
             </DropdownMenu.Trigger>
             <DropdownMenu.Content>
               <DropdownMenu.CheckboxItem
-                key='red'
-                value={menu === 'red'}
+                key='destructive'
+                value={menu === 'destructive'}
                 onValueChange={() => {
-                  setMenu('red');
+                  setMenu('destructive');
                 }}
               >
                 <DropdownMenu.ItemIndicator />
-                <DropdownMenu.ItemTitle children='red' />
+                <DropdownMenu.ItemTitle children='destructive' />
               </DropdownMenu.CheckboxItem>
               <DropdownMenu.CheckboxItem
-                key='blue'
-                value={menu === 'blue'}
+                key='primary'
+                value={menu === 'primary'}
                 onValueChange={() => {
-                  setMenu('blue');
+                  setMenu('primary');
                 }}
               >
                 <DropdownMenu.ItemIndicator />
-                <DropdownMenu.ItemTitle children='blue' />
+                <DropdownMenu.ItemTitle children='primary' />
               </DropdownMenu.CheckboxItem>
             </DropdownMenu.Content>
           </DropdownMenu.Root>
@@ -355,14 +370,14 @@ const COMPONENTS: ComponentItem[] = [
   <% if (props.stylingPackage?.options.selectedComponents.includes('progress-indicator')) { %>
   {
     name: 'Progress Indicator',
-    component: () => {
+    component: function ProgressIndicatorExample() {
       const [progress, setProgress] = React.useState(13);
       let id: ReturnType<typeof setInterval> | null = null;
       React.useEffect(() => {
         if (!id) {
           id = setInterval(() => {
             setProgress((prev) => (prev >= 99 ? 0 : prev + 5));
-          }, Math.random() * 3000);
+          }, 1000);
         }
         return () => {
           if (id) clearInterval(id);
@@ -379,7 +394,7 @@ const COMPONENTS: ComponentItem[] = [
   <% if (props.stylingPackage?.options.selectedComponents.includes('activity-indicator')) { %>
   {
     name: 'Activity Indicator',
-    component: () => {
+    component: function ActivityIndicatorExample() {
       return (
         <View className='p-4 items-center'>
           <ActivityIndicator />
@@ -391,14 +406,14 @@ const COMPONENTS: ComponentItem[] = [
   <% if (props.stylingPackage?.options.selectedComponents.includes('alert')) { %>
   {
     name: 'Alert',
-    component: () => {
+    component: function AlertExample() {
       const { colors } = useColorScheme();
       return (
         <View className='items-center'>
           <DefaultButton
-            color={colors.red}
+            color={colors.destructive}
             onPress={() => {
-              if (Platform.OS == 'ios') {
+              if (Platform.OS === 'ios') {
                 Alert.prompt(
                   'Delete account?',
                   'Enter your password to delete your account.',
@@ -447,7 +462,7 @@ const COMPONENTS: ComponentItem[] = [
   <% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
   {
     name: 'Action Sheet',
-    component: () => {
+    component: function ActionSheetExample() {
       const { colorScheme, colors } = useColorScheme();
       const { showActionSheetWithOptions } = useActionSheet();
       return (
@@ -497,49 +512,51 @@ const COMPONENTS: ComponentItem[] = [
   <% if (props.stylingPackage?.options.selectedComponents.includes('text')) { %>
   {
     name: 'Text',
-    component: () => (
-      <View className='gap-2'>
-        <Text variant='largeTitle' className='text-center'>
-          Large Title
-        </Text>
-        <Text variant='title1' className='text-center'>
-          Title 1
-        </Text>
-        <Text variant='title2' className='text-center'>
-          Title 2
-        </Text>
-        <Text variant='title3' className='text-center'>
-          Title 3
-        </Text>
-        <Text variant='heading' className='text-center'>
-          Heading
-        </Text>
-        <Text variant='body' className='text-center'>
-          Body
-        </Text>
-        <Text variant='callout' className='text-center'>
-          Callout
-        </Text>
-        <Text variant='subhead' className='text-center'>
-          Subhead
-        </Text>
-        <Text variant='footnote' className='text-center'>
-          Footnote
-        </Text>
-        <Text variant='caption1' className='text-center'>
-          Caption 1
-        </Text>
-        <Text variant='caption2' className='text-center'>
-          Caption 2
-        </Text>
-      </View>
-    ),
+    component: function TextExample() {
+      return (
+        <View className='gap-2'>
+          <Text variant='largeTitle' className='text-center'>
+            Large Title
+          </Text>
+          <Text variant='title1' className='text-center'>
+            Title 1
+          </Text>
+          <Text variant='title2' className='text-center'>
+            Title 2
+          </Text>
+          <Text variant='title3' className='text-center'>
+            Title 3
+          </Text>
+          <Text variant='heading' className='text-center'>
+            Heading
+          </Text>
+          <Text variant='body' className='text-center'>
+            Body
+          </Text>
+          <Text variant='callout' className='text-center'>
+            Callout
+          </Text>
+          <Text variant='subhead' className='text-center'>
+            Subhead
+          </Text>
+          <Text variant='footnote' className='text-center'>
+            Footnote
+          </Text>
+          <Text variant='caption1' className='text-center'>
+            Caption 1
+          </Text>
+          <Text variant='caption2' className='text-center'>
+            Caption 2
+          </Text>
+        </View>
+      );
+    },
   },
   <% } %>
-  <% if (props.stylingPackage?.options.selectedComponents.includes('actionable-text')) { %>
+  <% if (props.stylingPackage?.options.selectedComponents.includes('selectable-text')) { %>
   {
-    name: 'Actionable Text',
-    component: () => {
+    name: 'Selectable Text',
+    component: function SelectableTextExample() {
       return (
         <Text uiTextView selectable>
           Long press or double press this text
@@ -551,61 +568,99 @@ const COMPONENTS: ComponentItem[] = [
   <% if (props.stylingPackage?.options.selectedComponents.includes('ratings-indicator')) { %>
   {
     name: 'Ratings Indicator',
-    component: () => (
-      <View className='items-center'>
-        <DefaultButton
-          color='orange'
-          onPress={async () => {
+    component: function RatingsIndicatorExample() {
+      React.useEffect(() => {
+        async function showRequestReview() {
+          if (hasRequestedReview) return;
+          try {
             if (await StoreReview.hasAction()) {
-              StoreReview.requestReview();
+              await StoreReview.requestReview();
             }
-            if (Platform.OS === 'android') {
-              Alert.alert(
-                'Android Demo',
-                'Store review is not available for Android demo'
-              );
-            }
-          }}
-          title='Rate this app'
-        />
-      </View>
-    ),
+          } catch (error) {
+            console.log(
+              'FOR ANDROID: Make sure you meet all conditions to be able to test and use it: https://developer.android.com/guide/playcore/in-app-review/test#troubleshooting',
+              error
+            );
+          } finally {
+            hasRequestedReview = true;
+          }
+        }
+        const timeout = setTimeout(() => {
+          showRequestReview();
+        }, 1000);
+
+        return () => clearTimeout(timeout);
+      }, []);
+
+      return (
+        <View className="gap-3">
+          <Text className="pb-2 text-center font-semibold">Please follow the guidelines.</Text>
+          <View className="flex-row">
+            <Text className="w-6 text-center text-muted-foreground">·</Text>
+            <View className="flex-1">
+              <Text variant="caption1" className="text-muted-foreground">
+                Don't call StoreReview.requestReview() from a button
+              </Text>
+            </View>
+          </View>
+          <View className="flex-row">
+            <Text className="w-6 text-center text-muted-foreground">·</Text>
+            <View className="flex-1">
+              <Text variant="caption1" className="text-muted-foreground">
+                Don't request a review when the user is doing something time sensitive.
+              </Text>
+            </View>
+          </View>
+          <View className="flex-row">
+            <Text className="w-6 text-center text-muted-foreground">·</Text>
+            <View className="flex-1">
+              <Text variant="caption1" className="text-muted-foreground">
+                Don't ask the user any questions before or while presenting the rating button or
+                card.
+              </Text>
+            </View>
+          </View>
+        </View>
+      );
+    },
   },
   <% } %>
   <% if (props.stylingPackage?.options.selectedComponents.includes('activity-view')) { %>
   {
     name: 'Activity View',
-    component: () => (
-      <View className='items-center'>
-        <DefaultButton
-          onPress={async () => {
-            try {
-              const result = await Share.share({
-                message: 'NativeWindUI | Familiar interface, native feel.',
-              });
-              if (result.action === Share.sharedAction) {
-                if (result.activityType) {
-                  // shared with activity type of result.activityType
-                } else {
-                  // shared
+    component: function ActivityViewExample() {
+      return (
+        <View className='items-center'>
+          <DefaultButton
+            onPress={async () => {
+              try {
+                const result = await Share.share({
+                  message: 'NativeWindUI | Familiar interface, native feel.',
+                });
+                if (result.action === Share.sharedAction) {
+                  if (result.activityType) {
+                    // shared with activity type of result.activityType
+                  } else {
+                    // shared
+                  }
+                } else if (result.action === Share.dismissedAction) {
+                  // dismissed
                 }
-              } else if (result.action === Share.dismissedAction) {
-                // dismissed
+              } catch (error: any) {
+                Alert.alert(error.message);
               }
-            } catch (error: any) {
-              Alert.alert(error.message);
-            }
-          }}
-          title='Share a message'
-        />
-      </View>
-    ),
+            }}
+            title='Share a message'
+          />
+        </View>
+      );
+    },
   },
   <% } %>
   <% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
   {
     name: 'Bottom Sheet',
-    component: () => {
+    component: function BottomSheetExample() {
       const { colorScheme } = useColorScheme();
       const bottomSheetModalRef = useSheetRef();
 
@@ -633,7 +688,7 @@ const COMPONENTS: ComponentItem[] = [
   <% if (props.stylingPackage?.options.selectedComponents.includes('avatar')) { %>
   {
     name: 'Avatar',
-    component: () => {
+    component: function AvatarExample() {
       const GITHUB_AVATAR_URI = 'https://github.com/mrzachnugent.png';
       return (
         <View className='items-center'>

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

@@ -1,31 +1,32 @@
-import { Text } from '~/components/nativewind-ui/Text';
-import { Link } from 'expo-router';
+import { Icon } from '@roninoss/icons';
 import { StatusBar } from 'expo-status-bar';
-import { useColorScheme } from 'nativewind';
-import { Platform, View } from 'react-native';
+import { Linking, Platform, View } from 'react-native';
+
+import { Text } from '~/components/nativewind-ui/Text';
+import { useColorScheme } from '~/lib/useColorScheme';
 
 export default function ModalScreen() {
-  const { colorScheme } = useColorScheme();
+  const { colors, colorScheme } = useColorScheme();
   return (
     <>
       <StatusBar
-        style={
-          Platform.OS === 'ios'
-            ? 'light'
-            : colorScheme === 'dark'
-            ? 'light'
-            : 'dark'
-        }
+        style={Platform.OS === 'ios' ? 'light' : colorScheme === 'dark' ? 'light' : 'dark'}
       />
-      <View className='flex-1 justify-center items-center gap-8 pb-12'>
-        <View className='items-center gap-2'>
-          <Text variant='largeTitle' className='font-bold'>
+      <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
+        </Text>
+        <Text color="tertiary" variant="subhead" className="pb-4 text-center">
+          You can install any of the free components from the{' '}
+          <Text
+            onPress={() => Linking.openURL('https://nativewindui.com')}
+            variant="subhead"
+            className="text-primary">
             NativeWindUI
           </Text>
-          <Link href={'https://nativewindui.com/'}>
-            <Text className='text-primary'>https://nativewindui.com/</Text>
-          </Link>
-        </View>
+          {' website.'}
+        </Text>
       </View>
     </>
   );

package/build/templates/packages/nativewindui/components/nativewind-ui/ActivityIndicator.tsx.ejs

@@ -6,5 +6,5 @@ export function ActivityIndicator(
   props: React.ComponentPropsWithoutRef<typeof RNActivityIndicator>
 ) {
   const { colors } = useColorScheme();
-  return <RNActivityIndicator color={colors.blue} {...props} />;
+  return <RNActivityIndicator color={colors.primary} {...props} />;
 }

package/build/templates/packages/nativewindui/components/nativewind-ui/DatePicker.android.tsx.ejs

@@ -4,7 +4,7 @@ import DateTimePicker, {
 import * as React from 'react';
 import { Pressable, View } from 'react-native';
 
-import { Text } from '~/components/Text';
+import { Text } from '~/components/nativewind-ui/Text';
 
 export function DatePicker(
   props: React.ComponentProps<typeof DateTimePicker> & {

package/build/templates/packages/nativewindui/components/nativewind-ui/Slider.tsx.ejs

@@ -14,12 +14,12 @@ export function Slider({
   return (
     <RNSlider
       thumbTintColor={
-        thumbTintColor ?? Platform.OS === 'ios' ? COLORS.white : colors.blue
+        thumbTintColor ?? Platform.OS === 'ios' ? COLORS.white : colors.primary
       }
-      minimumTrackTintColor={minimumTrackTintColor ?? colors.blue}
+      minimumTrackTintColor={minimumTrackTintColor ?? colors.primary}
       maximumTrackTintColor={
         maximumTrackTintColor ?? Platform.OS === 'android'
-          ? colors.blue
+          ? colors.primary
           : undefined
       }
       {...props}

package/build/templates/packages/nativewindui/components/nativewind-ui/Text.tsx.ejs

@@ -1,11 +1,17 @@
 import { VariantProps, cva } from 'class-variance-authority';
-import { cssInterop } from 'nativewind';
 import * as React from 'react';
+<% if (props.stylingPackage?.options.selectedComponents.includes('selectable-text')) { %>
 import { UITextView } from 'react-native-uitextview';
+import { cssInterop } from 'nativewind';
+<% } else { %>
+import { Text as RNText } from 'react-native';
+<% } %>
 
 import { cn } from '~/lib/cn';
 
+<% if (props.stylingPackage?.options.selectedComponents.includes('selectable-text')) { %>
 cssInterop(UITextView, { className: 'style' });
+<% } %>
 
 const textVariants = cva('text-foreground', {
   variants: {
@@ -37,6 +43,7 @@ const textVariants = cva('text-foreground', {
 
 const TextClassContext = React.createContext<string | undefined>(undefined);
 
+<% if (props.stylingPackage?.options.selectedComponents.includes('selectable-text')) { %>
 function Text({
   className,
   variant,
@@ -51,5 +58,22 @@ function Text({
     />
   );
 }
+<% } else { %>
+function Text({
+  className,
+  variant,
+  color,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof RNText> & VariantProps<typeof textVariants>) {
+  const textClassName = React.useContext(TextClassContext);
+  return (
+    <RNText
+      className={cn(textVariants({ variant, color }), textClassName, className)}
+      {...props}
+    />
+  );
+}
+<% } %>
+
 
 export { Text, TextClassContext, textVariants };

package/build/templates/packages/nativewindui/components/nativewind-ui/ThemeToggle.tsx.ejs

@@ -1,5 +1,5 @@
 import { Icon } from '@roninoss/icons';
-import { Appearance, Pressable, View } from 'react-native';
+import { Pressable, View } from 'react-native';
 import Animated, { LayoutAnimationConfig, ZoomInRotate } from 'react-native-reanimated';
 
 import { cn } from '~/lib/cn';
@@ -7,7 +7,7 @@ import { useColorScheme } from '~/lib/useColorScheme';
 import { COLORS } from '~/theme/colors';
 
 export function ThemeToggle() {
-  const { colorScheme, toggleColorScheme } = useColorScheme();
+  const { colorScheme, setColorScheme } = useColorScheme();
   return (
     <LayoutAnimationConfig skipEntering>
       <Animated.View
@@ -16,9 +16,7 @@ export function ThemeToggle() {
         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();
+            setColorScheme(colorScheme === 'dark' ? 'light' : 'dark');
           }}
           className="opacity-80">
           {colorScheme === 'dark'