create-expo-stack 2.7.0-next.e19c886 → 2.7.0

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

@@ -1,31 +1,32 @@
-import { Text } from '@/components/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

@@ -0,0 +1,10 @@
+import { ActivityIndicator as RNActivityIndicator } from 'react-native';
+
+import { useColorScheme } from '~/lib/useColorScheme';
+
+export function ActivityIndicator(
+  props: React.ComponentPropsWithoutRef<typeof RNActivityIndicator>
+) {
+  const { colors } = useColorScheme();
+  return <RNActivityIndicator color={colors.primary} {...props} />;
+}

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

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import {
+  ImageErrorEventData,
+  ImageLoadEventData,
+  NativeSyntheticEvent,
+  Image as RNImage,
+  View,
+} from 'react-native';
+
+import { cn } from '~/lib/cn';
+
+interface AvatarRootProps {
+  alt: string;
+}
+
+interface AvatarImageProps {
+  children?: React.ReactNode;
+  onLoadingStatusChange?: (status: 'error' | 'loaded') => void;
+}
+
+type AvatarState = 'loading' | 'error' | 'loaded';
+
+interface IRootContext extends AvatarRootProps {
+  status: AvatarState;
+  setStatus: (status: AvatarState) => void;
+}
+
+const RootContext = React.createContext<IRootContext | null>(null);
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & AvatarRootProps
+>(({ alt, className, ...viewProps }, ref) => {
+  const [status, setStatus] = React.useState<AvatarState>('loading');
+  return (
+    <RootContext.Provider value={{ alt, status, setStatus }}>
+      <View
+        ref={ref}
+        className={cn(
+          'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+          className
+        )}
+        {...viewProps}
+      />
+    </RootContext.Provider>
+  );
+});
+
+Avatar.displayName = 'Avatar';
+
+function useRootContext() {
+  const context = React.useContext(RootContext);
+  if (!context) {
+    throw new Error(
+      'Avatar compound components cannot be rendered outside the Avatar component'
+    );
+  }
+  return context;
+}
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof RNImage>,
+  Omit<React.ComponentPropsWithoutRef<typeof RNImage>, 'alt'> & AvatarImageProps
+>(
+  (
+    {
+      onLoad: onLoadProps,
+      onError: onErrorProps,
+      onLoadingStatusChange,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const { alt, setStatus, status } = useRootContext();
+
+    const onLoad = React.useCallback(
+      (e: NativeSyntheticEvent<ImageLoadEventData>) => {
+        setStatus('loaded');
+        onLoadingStatusChange?.('loaded');
+        onLoadProps?.(e);
+      },
+      [onLoadProps]
+    );
+
+    const onError = React.useCallback(
+      (e: NativeSyntheticEvent<ImageErrorEventData>) => {
+        setStatus('error');
+        onLoadingStatusChange?.('error');
+        onErrorProps?.(e);
+      },
+      [onErrorProps]
+    );
+
+    if (status === 'error') {
+      return null;
+    }
+
+    return (
+      <RNImage
+        ref={ref}
+        alt={alt}
+        onLoad={onLoad}
+        onError={onError}
+        className={cn('aspect-square h-full w-full', className)}
+        {...props}
+      />
+    );
+  }
+);
+
+AvatarImage.displayName = 'AvatarImage';
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => {
+  const { alt, status } = useRootContext();
+
+  if (status !== 'error') {
+    return null;
+  }
+  return (
+    <View
+      ref={ref}
+      role={'img'}
+      aria-label={alt}
+      className={cn(
+        'flex h-full w-full items-center justify-center rounded-full bg-muted',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+
+AvatarFallback.displayName = 'AvatarFallback';
+
+export { Avatar, AvatarFallback, AvatarImage };

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

@@ -0,0 +1,66 @@
+import DateTimePicker, {
+  DateTimePickerAndroid,
+} from '@react-native-community/datetimepicker';
+import * as React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { Text } from '~/components/nativewind-ui/Text';
+
+export function DatePicker(
+  props: React.ComponentProps<typeof DateTimePicker> & {
+    mode: 'date' | 'time' | 'datetime';
+  }
+) {
+  const show = (currentMode: 'time' | 'date') => () => {
+    DateTimePickerAndroid.open({
+      value: props.value,
+      onChange: props.onChange,
+      mode: currentMode,
+      minimumDate: props.minimumDate,
+      maximumDate: props.maximumDate,
+    });
+  };
+
+  return (
+    <View className='flex-row gap-2.5'>
+      {props.mode.includes('date') && (
+        <View className='relative pt-1.5'>
+          <Pressable
+            onPress={show('date')}
+            className='border border-border active:opacity-80 px-5 py-3 rounded-md'
+          >
+            <Text variant='subhead'>
+              {new Intl.DateTimeFormat('en-US', {
+                dateStyle: 'medium',
+              }).format(props.value)}
+            </Text>
+          </Pressable>
+          <View className='absolute top-0 left-2 bg-card px-1'>
+            <Text variant='caption2' className='text-[10px] opacity-60'>
+              Date
+            </Text>
+          </View>
+        </View>
+      )}
+      {props.mode.includes('time') && (
+        <View className='relative pt-1.5'>
+          <Pressable
+            onPress={show('time')}
+            className='border border-border active:opacity-80 px-5 py-3 rounded-md'
+          >
+            <Text variant='subhead'>
+              {new Intl.DateTimeFormat('en-US', {
+                timeStyle: 'short',
+              }).format(props.value)}
+            </Text>
+          </Pressable>
+          <View className='absolute top-0 left-2 bg-card px-1'>
+            <Text variant='caption2' className='text-[10px] opacity-60'>
+              Time
+            </Text>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import DateTimePicker from '@react-native-community/datetimepicker';
+
+export function DatePicker(
+  props: React.ComponentProps<typeof DateTimePicker> & {
+    mode: 'date' | 'time' | 'datetime';
+  }
+) {
+  return <DateTimePicker {...props} />;
+}

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

@@ -0,0 +1,39 @@
+import { Picker as RNPicker } from '@react-native-picker/picker';
+import { View } from 'react-native';
+
+import { useColorScheme } from '~/lib/useColorScheme';
+import { cn } from '~/lib/cn';
+
+export function Picker<T>({
+  mode = 'dropdown',
+  style,
+  dropdownIconColor,
+  dropdownIconRippleColor,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof RNPicker<T>>) {
+  const { colors } = useColorScheme();
+  return (
+    <View
+      className={cn(
+        'bg-background border border-background ios:shadow-sm ios:shadow-black/5 rounded-md',
+        className
+      )}
+    >
+      <RNPicker
+        mode={mode}
+        style={
+          style ?? {
+            backgroundColor: colors.root,
+            borderRadius: 8,
+          }
+        }
+        dropdownIconColor={dropdownIconColor ?? colors.foreground}
+        dropdownIconRippleColor={dropdownIconRippleColor ?? colors.foreground}
+        {...props}
+      />
+    </View>
+  );
+}
+
+export const PickerItem = RNPicker.Item;

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

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+import { cn } from '~/lib/cn';
+
+const DEFAULT_MAX = 100;
+
+const ProgressIndicator = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    value?: number;
+    max?: number;
+    getValueLabel?: (value: number, max: number) => string;
+  }
+>(
+  (
+    {
+      value: valueProp,
+      max: maxProp,
+      getValueLabel = defaultGetValueLabel,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const max = maxProp ?? DEFAULT_MAX;
+    const value = isValidValueNumber(valueProp, max) ? valueProp : 0;
+    const progress = useDerivedValue(() => value ?? 0);
+
+    const indicator = useAnimatedStyle(() => {
+      return {
+        width: withSpring(
+          `${interpolate(
+            progress.value,
+            [0, 100],
+            [1, 100],
+            Extrapolation.CLAMP
+          )}%`,
+          { overshootClamping: true }
+        ),
+      };
+    });
+
+    return (
+      <View
+        role='progressbar'
+        ref={ref}
+        aria-valuemax={max}
+        aria-valuemin={0}
+        aria-valuenow={value}
+        aria-valuetext={getValueLabel(value, max)}
+        accessibilityValue={{
+          min: 0,
+          max,
+          now: value,
+          text: getValueLabel(value, max),
+        }}
+        className={cn(
+          'relative h-1 w-full overflow-hidden rounded-full',
+          className
+        )}
+        {...props}
+      >
+        <View className='absolute left-0 top-0 right-0 bottom-0 bg-muted opacity-20' />
+        <Animated.View
+          role='presentation'
+          style={indicator}
+          className={cn('h-full bg-primary')}
+        />
+      </View>
+    );
+  }
+);
+
+ProgressIndicator.displayName = 'ProgressIndicator';
+
+export { ProgressIndicator };
+
+function defaultGetValueLabel(value: number, max: number) {
+  return `${Math.round((value / max) * 100)}%`;
+}
+
+function isValidValueNumber(value: any, max: number): value is number {
+  return (
+    typeof value === 'number' && !isNaN(value) && value <= max && value >= 0
+  );
+}

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

@@ -0,0 +1,22 @@
+import RNSegmentedControl from '@react-native-segmented-control/segmented-control';
+import { Platform } from 'react-native';
+
+import { useColorScheme } from '~/lib/useColorScheme';
+
+export function SegmentedControl(
+  props: React.ComponentPropsWithoutRef<typeof RNSegmentedControl>
+) {
+  const { colorScheme, colors } = useColorScheme();
+  return (
+    <RNSegmentedControl
+      backgroundColor={
+        Platform.OS === 'android'
+          ? colorScheme === 'dark'
+            ? colors.background
+            : colors.grey6
+          : undefined
+      }
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,59 @@
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+} from '@gorhom/bottom-sheet';
+import * as React from 'react';
+
+import { useColorScheme } from '~/lib/useColorScheme';
+
+const Sheet = React.forwardRef<
+  BottomSheetModal,
+  React.ComponentPropsWithoutRef<typeof BottomSheetModal>
+>(
+  (
+    { index = 0, backgroundStyle, style, handleIndicatorStyle, ...props },
+    ref
+  ) => {
+    const { colors } = useColorScheme();
+
+    const renderBackdrop = React.useCallback(
+      (props: BottomSheetBackdropProps) => (
+        <BottomSheetBackdrop {...props} disappearsOnIndex={-1} />
+      ),
+      []
+    );
+    return (
+      <BottomSheetModal
+        ref={ref}
+        index={0}
+        backgroundStyle={
+          backgroundStyle ?? {
+            backgroundColor: colors.card,
+          }
+        }
+        style={
+          style ?? {
+            borderWidth: 1,
+            borderColor: colors.grey5,
+            borderTopStartRadius: 16,
+            borderTopEndRadius: 16,
+          }
+        }
+        handleIndicatorStyle={
+          handleIndicatorStyle ?? {
+            backgroundColor: colors.grey4,
+          }
+        }
+        backdropComponent={renderBackdrop}
+        {...props}
+      />
+    );
+  }
+);
+
+function useSheetRef() {
+  return React.useRef<BottomSheetModal>(null);
+}
+
+export { Sheet, useSheetRef };

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

@@ -0,0 +1,28 @@
+import RNSlider from '@react-native-community/slider';
+import { Platform } from 'react-native';
+
+import { useColorScheme } from '~/lib/useColorScheme';
+import { COLORS } from '~/theme/colors';
+
+export function Slider({
+  thumbTintColor,
+  minimumTrackTintColor,
+  maximumTrackTintColor,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof RNSlider>) {
+  const { colors } = useColorScheme();
+  return (
+    <RNSlider
+      thumbTintColor={
+        thumbTintColor ?? Platform.OS === 'ios' ? COLORS.white : colors.primary
+      }
+      minimumTrackTintColor={minimumTrackTintColor ?? colors.primary}
+      maximumTrackTintColor={
+        maximumTrackTintColor ?? Platform.OS === 'android'
+          ? colors.primary
+          : undefined
+      }
+      {...props}
+    />
+  );
+}

package/build/templates/packages/nativewindui/components/{Text.tsx.ejs → 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';
+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/{ThemeToggle.tsx.ejs → nativewind-ui/ThemeToggle.tsx.ejs}

@@ -1,25 +1,21 @@
 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';
-import { useColorScheme } from '@/lib/useColorScheme';
-import { COLORS } from '@/theme/colors';
+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="h-6 w-6 items-center justify-center"
+        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();
-          }}
+          onPress={toggleColorScheme}
           className="opacity-80">
           {colorScheme === 'dark'
             ? ({ pressed }) => (

package/build/templates/packages/nativewindui/components/{Toggle.tsx.ejs → nativewind-ui/Toggle.tsx.ejs}

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

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

@@ -38,7 +38,7 @@
     --android-muted-foreground: 113 119 134;
     --android-accent: 169 73 204;
     --android-accent-foreground: 255 255 255;
-    --android-destructive: 254 67 54;
+    --android-destructive: 186 26 26;
     --android-destructive-foreground: 255 255 255;
     --android-border: 215 217 228;
     --android-input: 210 210 215;
@@ -78,7 +78,7 @@
       --android-secondary: 28 60 114;
       --android-secondary-foreground: 189 209 255;
       --android-muted: 216 226 255;
-      --android-muted-foreground: 0 26 64;
+      --android-muted-foreground: 139 144 160;
       --android-accent: 83 0 111;
       --android-accent-foreground: 238 177 255;
       --android-destructive: 147 0 10;
@@ -88,4 +88,4 @@
       --android-ring: 39 42 50;
     }
   }
-}
+}