lucy-cli 2.0.0-alpha.2 → 2.0.0-alpha.3

package/dist/init.js

@@ -157,19 +157,19 @@ import { JsonSchema } from "./schemas/index.js";
 // 		console.log(blue.underline(`🐕 => Updated file ${orange(filePath)}`));
 // 	}
 // }
-const yarn = Command.make("yarn").pipe(Command.stdout("inherit"), // Stream stdout to process.stdout
-Command.exitCode // Get the exit code
-);
 const init_expo = () => {
     return Effect.gen(function* () {
         const config = yield* Config;
         const terminal = yield* Terminal.Terminal;
         const fs = yield* FileSystem.FileSystem;
         const path = yield* Path.Path;
-        const yarn = Command.make("yarn", "add", "nativewind", "react-native-reanimated@~3.17.4", "react-native-safe-area-context@5.4.0", "@wix/sdk", "@wix/data", "expo-standard-web-crypto", "effect").pipe(Command.stdout("inherit"), // Stream stdout to process.stdout
+        const resolutions = {
+            "@wix/sdk@1.15.24": "patch:@wix/sdk@npm:1.15.24#./patches/@wix-sdk-npm-1.15.24-1adbec98e9.patch",
+        };
+        const yarn = Command.make("yarn", "add", "nativewind", "react-native-reanimated@~3.17.4", "react-native-safe-area-context@5.4.0", "@wix/sdk@1.15.24", "@wix/data", "expo-standard-web-crypto", "effect", "node-libs-react-native", "util", "events").pipe(Command.stdout("inherit"), // Stream stdout to process.stdout
         Command.exitCode // Get the exit code
         );
-        const yarnDev = Command.make("yarn", "add", "--dev", "tailwindcss@^3.4.17", "prettier-plugin-tailwindcss@^0.5.11", "@styled/typescript-styled-plugin", "typescript-eslint-language-service", "eslint-config-prettier", "eslint-plugin-jsdoc", "eslint-plugin-named-import-spacing", "eslint-plugin-only-warn", "eslint-plugin-react", "eslint-plugin-react-hooks", "eslint-plugin-simple-import-sort", "@next/eslint-plugin-next", "@styled/typescript-styled-plugin", "@stylelint/postcss-css-in-js", "@typescript-eslint/parser", "typescript-eslint", "typescript-eslint-language-service", "@total-typescript/ts-reset").pipe(Command.stdout("inherit"), // Stream stdout to process.stdout
+        const yarnDev = Command.make("yarn", "add", "--dev", "tailwindcss@^3.4.17", "prettier-plugin-tailwindcss@^0.5.11", "@styled/typescript-styled-plugin", "typescript-eslint-language-service", "eslint-config-prettier", "eslint-plugin-jsdoc", "eslint-plugin-named-import-spacing", "eslint-plugin-only-warn", "eslint-plugin-react", "eslint-plugin-react-hooks", "eslint-plugin-simple-import-sort", "@next/eslint-plugin-next", "@styled/typescript-styled-plugin", "@stylelint/postcss-css-in-js", "@typescript-eslint/parser", "typescript-eslint", "typescript-eslint-language-service", "@total-typescript/ts-reset", "expo-doctor", "tsx").pipe(Command.stdout("inherit"), // Stream stdout to process.stdout
         Command.exitCode // Get the exit code
         );
         const npx = Command.make("npx", "expo", "install", "tailwindcss-animate", "class-variance-authority", "clsx", "tailwind-merge", "expo-crypto").pipe(Command.stdout("inherit"), // Stream stdout to process.stdout
@@ -206,34 +206,52 @@ const init_expo = () => {
         if (lucyInitialized)
             return yield* Effect.logError("Lucy is already initialized in this project. Please run this command in an empty directory.");
         console.log("Expo project initialized with app.json:", projectName);
+        const baseFiles = yield* fs.readDirectory(config.config.filesFolder + '/expo');
+        yield* Effect.forEach(baseFiles, (file) => fs.copy(path.join(config.config.filesFolder, 'expo', file), path.join(config.config.cwd, file), { overwrite: true }));
         let res = yield* npx;
         res = yield* yarn;
         res = yield* yarnDev;
         if (res !== 0) {
             return yield* Effect.logError("Failed to install Expo dependencies. Please check the error message above.");
         }
-        const baseFiles = yield* fs.readDirectory(config.config.filesFolder + '/expo');
-        yield* Effect.forEach(baseFiles, (file) => fs.copy(path.join(config.config.filesFolder, 'expo', file), path.join(config.config.cwd, file), { overwrite: true }));
         const newScripts = {
             "dev": "expo start",
             "start": "expo start",
             "android": "expo start --android",
             "ios": "expo start --ios",
             "web": "expo start --web",
+            "reset": "tsx ./scripts/reset-project.ts",
             "format": "prettier --write \"./*.json\" \"**/*.{ts,tsx,md,json,jsonc,json5}\"",
-            "build:ios": "eas build --platform ios --local --profile preview",
-            "build:android": "eas build --platform android --local --profile preview",
-            "build:web": "eas build --platform web --local --profile preview",
+            "build:dev": "eas build --local --profile development",
+            "build:sim": "eas build --local --profile simulator",
+            "build:prev": "eas build --local --profile preview",
+            "build:prod": "eas build --local --profile production",
+            "build:web": "expo export --platform web",
+            "doctor": "expo-doctor"
         };
         const packageJsonPath = path.join(config.config.cwd, "package.json");
         const packageJsonRaw = yield* fs.readFile(packageJsonPath);
         const packageJson = Schema.decodeUnknownSync(JsonSchema)(packageJsonRaw.toString());
         packageJson.scripts = {
             ...packageJson.scripts,
-            ...newScripts
+            ...newScripts,
+        };
+        packageJson.resolutions = {
+            ...packageJson.resolutions,
+            ...resolutions,
+        };
+        packageJson.expo = {
+            doctor: {
+                reactNativeDirectoryCheck: {
+                    listUnknownPackages: false,
+                },
+            }
         };
         yield* fs.writeFileString(path.join(config.config.cwd, 'package.json'), JSON.stringify(packageJson, null, 2));
         yield* fs.remove(path.join(config.config.cwd, "package-lock.json"), { force: true });
+        yield* Command.make("yarn").pipe(Command.stdout("inherit"), // Stream stdout to process.stdout
+        Command.exitCode // Get the exit code
+        );
     });
 };
 export const init = () => {

package/files/expo/.prettierrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+	printWidth: 80,
+	tabWidth: 4,
+	useTabs: true,
+	singleQuote: true,
+	trailingComma: 'all',
+	plugins: ['prettier-plugin-tailwindcss'],
+	overrides: [
+		{
+			files: ['**/*.{json,jsonc,json5}', '*.{json,jsonc,json5}'],
+			options: {
+				useTabs: true
+			}
+		}
+	]
+};

package/files/expo/.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
-
 npmRegistryServer: "https://registry.npmjs.org/"
+patchFolder: patches

package/files/expo/app/(tabs)/_layout.tsx

@@ -5,41 +5,46 @@ import { Platform } from 'react-native';
 import { HapticTab } from '@/components/HapticTab';
 import { IconSymbol } from '@/components/ui/IconSymbol';
 import TabBarBackground from '@/components/ui/TabBarBackground.ios';
-import { Colors } from '@/constants/Colors';
+import { colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorSchemeRN';
 
+/**
+ * Renders the tab layout for the application.
+ * This includes the home and explore tabs with haptic feedback on press.
+ *  @returns The tab layout component.
+ */
 export default function TabLayout() {
-  const colorScheme = useColorScheme();
+	const colorScheme = useColorScheme();
 
-  return (
-    <Tabs
-      screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        headerShown: false,
-        tabBarButton: HapticTab,
-        tabBarBackground: TabBarBackground,
-        tabBarStyle: Platform.select({
-          ios: {
-            // Use a transparent background on iOS to show the blur effect
-            position: 'absolute',
-          },
-          default: {},
-        }),
-      }}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: 'Home',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="explore"
-        options={{
-          title: 'Explore',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
-        }}
-      />
-    </Tabs>
-  );
+	return (
+		<Tabs
+			screenOptions={{
+				tabBarActiveTintColor: colors[colorScheme ?? 'light'].tint,
+				headerShown: false,
+				tabBarButton: HapticTab,
+				tabBarBackground: TabBarBackground,
+				tabBarStyle: Platform.select({
+					ios: {
+						// Use a transparent background on iOS to show the blur effect
+						position: 'absolute',
+					},
+					default: {},
+				}),
+			}}>
+			<Tabs.Screen
+				name="index"
+				options={{
+					title: 'Home',
+					tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
+				}}
+			/>
+			<Tabs.Screen
+				name="explore"
+				options={{
+					title: 'Explore',
+					tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
+				}}
+			/>
+		</Tabs>
+	);
 }

package/files/expo/app/(tabs)/explore.tsx

@@ -0,0 +1,114 @@
+import { Image } from 'expo-image';
+import { Platform, StyleSheet } from 'react-native';
+
+import { Collapsible } from '@/components/Collapsible';
+import { ExternalLink } from '@/components/ExternalLink';
+import ParallaxScrollView from '@/components/ParallaxScrollView';
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+import { IconSymbol } from '@/components/ui/IconSymbol';
+
+/**
+ *  Renders the Explore screen with various examples and explanations of features.
+ * @returns The Explore screen component.
+ */
+export default function TabTwoScreen() {
+	return (
+		<ParallaxScrollView
+			headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
+			headerImage={
+				<IconSymbol
+					size={310}
+					color="#808080"
+					name="chevron.left.forwardslash.chevron.right"
+					style={styles.headerImage}
+				/>
+			}>
+			<ThemedView style={styles.titleContainer}>
+				<ThemedText type="title">Explore</ThemedText>
+			</ThemedView>
+			<ThemedText>This app includes example code to help you get started.</ThemedText>
+			<Collapsible title="File-based routing">
+				<ThemedText>
+          This app has two screens:{' '}
+					<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
+					<ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
+				</ThemedText>
+				<ThemedText>
+          The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
+          sets up the tab navigator.
+				</ThemedText>
+				<ExternalLink href="https://docs.expo.dev/router/introduction">
+					<ThemedText type="link">Learn more</ThemedText>
+				</ExternalLink>
+			</Collapsible>
+			<Collapsible title="Android, iOS, and web support">
+				<ThemedText>
+          You can open this project on Android, iOS, and the web. To open the web version, press{' '}
+					<ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
+				</ThemedText>
+			</Collapsible>
+			<Collapsible title="Images">
+				<ThemedText>
+          For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
+					<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
+          different screen densities
+				</ThemedText>
+				<Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
+				<ExternalLink href="https://reactnative.dev/docs/images">
+					<ThemedText type="link">Learn more</ThemedText>
+				</ExternalLink>
+			</Collapsible>
+			<Collapsible title="Custom fonts">
+				<ThemedText>
+          Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '}
+					<ThemedText style={{ fontFamily: 'SpaceMono' }}>
+            custom fonts such as this one.
+					</ThemedText>
+				</ThemedText>
+				<ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font">
+					<ThemedText type="link">Learn more</ThemedText>
+				</ExternalLink>
+			</Collapsible>
+			<Collapsible title="Light and dark mode components">
+				<ThemedText>
+          This template has light and dark mode support. The{' '}
+					<ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
+          what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
+				</ThemedText>
+				<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
+					<ThemedText type="link">Learn more</ThemedText>
+				</ExternalLink>
+			</Collapsible>
+			<Collapsible title="Animations">
+				<ThemedText>
+          This template includes an example of an animated component. The{' '}
+					<ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
+          the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText>{' '}
+          library to create a waving hand animation.
+				</ThemedText>
+				{Platform.select({
+					ios: (
+						<ThemedText>
+              The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
+              component provides a parallax effect for the header image.
+						</ThemedText>
+					),
+				})}
+			</Collapsible>
+		</ParallaxScrollView>
+	);
+}
+
+const styles = StyleSheet.create({
+	headerImage: {
+		color: '#808080',
+		bottom: -90,
+		left: -35,
+		position: 'absolute',
+	},
+	titleContainer: {
+		flexDirection: 'row',
+		gap: 8,
+	},
+});

package/files/expo/app/(tabs)/index.tsx

@@ -0,0 +1,80 @@
+import { Image } from 'expo-image';
+import { Platform, StyleSheet } from 'react-native';
+
+import { HelloWave } from '@/components/HelloWave';
+import ParallaxScrollView from '@/components/ParallaxScrollView';
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+
+/**
+ * Home screen component.
+ * This screen serves as the landing page for the app,
+ * @returns The home screen component.
+ */
+export default function HomeScreen() {
+	return (
+		<ParallaxScrollView
+			headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
+			headerImage={
+				<Image
+					source={require('@/assets/images/partial-react-logo.png')}
+					style={styles.reactLogo}
+				/>
+			}>
+			<ThemedView style={styles.titleContainer}>
+				<ThemedText type="title">Welcome!</ThemedText>
+				<HelloWave />
+			</ThemedView>
+			<ThemedView style={styles.stepContainer}>
+				<ThemedText type="subtitle">Step 1: Try it</ThemedText>
+				<ThemedText>
+          Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
+          Press{' '}
+					<ThemedText type="defaultSemiBold">
+						{Platform.select({
+							ios: 'cmd + d',
+							android: 'cmd + m',
+							web: 'F12',
+						})}
+					</ThemedText>{' '}
+          to open developer tools.
+				</ThemedText>
+			</ThemedView>
+			<ThemedView style={styles.stepContainer}>
+				<ThemedText type="subtitle">Step 2: Explore</ThemedText>
+				<ThemedText>
+					{`Tap the Explore tab to learn more about what's included in this starter app.`}
+				</ThemedText>
+			</ThemedView>
+			<ThemedView style={styles.stepContainer}>
+				<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
+				<ThemedText>
+					{`When you're ready, run `}
+					<ThemedText type="defaultSemiBold">yarn reset-project</ThemedText> to get a fresh{' '}
+					<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
+					<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
+					<ThemedText type="defaultSemiBold">app-example</ThemedText>.
+				</ThemedText>
+			</ThemedView>
+		</ParallaxScrollView>
+	);
+}
+
+const styles = StyleSheet.create({
+	titleContainer: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		gap: 8,
+	},
+	stepContainer: {
+		gap: 8,
+		marginBottom: 8,
+	},
+	reactLogo: {
+		height: 178,
+		width: 290,
+		bottom: 0,
+		left: 0,
+		position: 'absolute',
+	},
+});

package/files/expo/app/+not-found.tsx

@@ -0,0 +1,37 @@
+import { Link, Stack } from 'expo-router';
+import { StyleSheet } from 'react-native';
+
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+
+/**
+ * Renders a not found screen when a route does not exist.
+ * This screen provides a link to navigate back to the home screen.
+ * @returns The not found screen component.
+ */
+export default function NotFoundScreen() {
+	return (
+		<>
+			<Stack.Screen options={{ title: 'Oops!' }} />
+			<ThemedView style={styles.container}>
+				<ThemedText type="title">This screen does not exist.</ThemedText>
+				<Link href="/" style={styles.link}>
+					<ThemedText type="link">Go to home screen!</ThemedText>
+				</Link>
+			</ThemedView>
+		</>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		alignItems: 'center',
+		justifyContent: 'center',
+		padding: 20,
+	},
+	link: {
+		marginTop: 15,
+		paddingVertical: 15,
+	},
+});

package/files/expo/app/_layout.tsx

@@ -1,45 +1,54 @@
 import '@/global.css';
-import "@/lib/utils/polyfills";
+import '@/lib/utils/polyfills';
 
-import { NAV_THEME } from '@/constants/theme';
-import { useColorScheme } from '@/hooks/useColorScheme';
 import { DarkTheme, DefaultTheme, Theme, ThemeProvider } from '@react-navigation/native';
 import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import * as React from 'react';
 import { Platform } from 'react-native';
+
+import { NAV_THEME } from '@/constants/theme';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
 const LIGHT_THEME: Theme = {
-  ...DefaultTheme,
-  colors: NAV_THEME.light,
+	...DefaultTheme,
+	colors: NAV_THEME.light,
 };
 const DARK_THEME: Theme = {
-  ...DarkTheme,
-  colors: NAV_THEME.dark,
+	...DarkTheme,
+	colors: NAV_THEME.dark,
 };
 export { ErrorBoundary } from 'expo-router';
+/**
+ * Root layout component for the application.
+ * This component sets up the theme provider and status bar style based on the user's color scheme preference
+ * @returns The root layout component.
+ */
 export default function RootLayout() {
-  const hasMounted = React.useRef(false);
-  const { colorScheme, isDarkColorScheme } = useColorScheme();
-  const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
-  useIsomorphicLayoutEffect(() => {
-    if (hasMounted.current) {
-      return;
-    }
-    if (Platform.OS === 'web') {
-      // Adds the background color to the html element to prevent white background on overscroll.
-      document.documentElement.classList.add('bg-background');
-    }
-    setIsColorSchemeLoaded(true);
-    hasMounted.current = true;
-  }, []);
-  if (!isColorSchemeLoaded) {
-    return null;
-  }
-  return (
-    <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
-      <StatusBar style={isDarkColorScheme ? 'light' : 'dark'} />
-      <Stack />
-    </ThemeProvider>
-  );
+	const hasMounted = React.useRef(false);
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const { colorScheme, isDarkColorScheme } = useColorScheme();
+	const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
+	useIsomorphicLayoutEffect(() => {
+		if (hasMounted.current) {
+			return;
+		}
+		if (Platform.OS === 'web') {
+			// Adds the background color to the html element to prevent white background on overscroll.
+			document.documentElement.classList.add('bg-background');
+		}
+		setIsColorSchemeLoaded(true);
+		hasMounted.current = true;
+	}, []);
+	if (!isColorSchemeLoaded) {
+		return null;
+	}
+	
+	return (
+		<ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
+			<StatusBar style={isDarkColorScheme ? 'light' : 'dark'} />
+			<Stack />
+		</ThemeProvider>
+	);
 }
 const useIsomorphicLayoutEffect = Platform.OS === 'web' && typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;

package/files/expo/babel.config.js

@@ -1,9 +1,10 @@
 module.exports = function(api) {
-    api.cache(true);
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+	api.cache(true);
 
-    return {
-        presets: [["babel-preset-expo", {
-            jsxImportSource: "nativewind"
-        }], "nativewind/babel"],
-    };
+	return {
+		presets: [['babel-preset-expo', {
+			jsxImportSource: 'nativewind'
+		}], 'nativewind/babel'],
+	};
 };

package/files/expo/components/Collapsible.tsx

@@ -0,0 +1,52 @@
+import { PropsWithChildren, useState } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+import { IconSymbol } from '@/components/ui/IconSymbol';
+import { colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+/**
+ * Renders a collapsible section with a heading and content.
+ * @param root0 - The props for the collapsible component.
+ * @param root0.children - The content to display when the section is expanded.
+ * @param root0.title - The title of the collapsible section.
+ * @returns The collapsible component.
+ */
+export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
+	const [isOpen, setIsOpen] = useState(false);
+	const theme = useColorScheme() ?? 'light';
+
+	return (
+		<ThemedView>
+			<TouchableOpacity
+				style={styles.heading}
+				onPress={() => setIsOpen((value) => !value)}
+				activeOpacity={0.8}>
+				<IconSymbol
+					name="chevron.right"
+					size={18}
+					weight="medium"
+					color={theme === 'light' ? colors.light.icon : colors.dark.icon}
+					style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
+				/>
+
+				<ThemedText type="defaultSemiBold">{title}</ThemedText>
+			</TouchableOpacity>
+			{isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
+		</ThemedView>
+	);
+}
+
+const styles = StyleSheet.create({
+	heading: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		gap: 6,
+	},
+	content: {
+		marginTop: 6,
+		marginLeft: 24,
+	},
+});

package/files/expo/components/ExternalLink.tsx

@@ -0,0 +1,32 @@
+import { Href, Link } from 'expo-router';
+import { openBrowserAsync } from 'expo-web-browser';
+import { type ComponentProps } from 'react';
+import { Platform } from 'react-native';
+
+type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: Href & string };
+
+/**
+ * Renders an external link that opens in an in-app browser on native platforms.
+ * @param root0 - The props for the external link component.
+ * @param root0.href - The URL to link to.
+ * @param root0.rest - Additional props for the link component.
+ * @returns The external link component.
+ */
+export function ExternalLink({ href, ...rest }: Props) {
+	return (
+		<Link
+			target="_blank"
+			{...rest}
+			href={href}
+			// eslint-disable-next-line @typescript-eslint/no-misused-promises
+			onPress={async (event) => {
+				if (Platform.OS !== 'web') {
+					// Prevent the default behavior of linking to the default browser on native.
+					event.preventDefault();
+					// Open the link in an in-app browser.
+					await openBrowserAsync(href);
+				}
+			}}
+		/>
+	);
+}

package/files/expo/components/HapticTab.tsx

@@ -0,0 +1,24 @@
+import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
+import { PlatformPressable } from '@react-navigation/elements';
+import * as Haptics from 'expo-haptics';
+
+/**
+ * Renders a tab button with haptic feedback on press.
+ * @param props - The props for the tab button.
+ * @returns The tab button component with haptic feedback.
+ */
+export function HapticTab(props: BottomTabBarButtonProps) {
+	return (
+		<PlatformPressable
+			{...props}
+			onPressIn={(ev) => {
+				if (process.env.EXPO_OS === 'ios') {
+					// Add a soft haptic feedback when pressing down on the tabs.
+					// eslint-disable-next-line @typescript-eslint/no-floating-promises
+					Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+				}
+				props.onPressIn?.(ev);
+			}}
+		/>
+	);
+}