initial commit

app/.gitignore

@@ -0,0 +1,45 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# Dependencies
+node_modules/
+.yarn/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Uniwind (generated on first `expo start`)
+uniwind-types.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# Debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# Local env files
+.env*.local
+
+# TypeScript
+*.tsbuildinfo
+
+# Generated native folders
+/ios
+/android

app/.prettierignore

@@ -0,0 +1,13 @@
+node_modules
+.expo
+dist
+ios
+android
+*.lock
+pnpm-lock.yaml
+yarn.lock
+package-lock.json
+bun.lockb
+expo-env.d.ts
+uniwind-types.d.ts
+.DS_Store

app/.prettierrc.json

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}

app/README.md

@@ -0,0 +1,46 @@
+# Welcome to your HeroUI Native app 👋
+
+This is an [Expo](https://expo.dev) project preconfigured with
+[HeroUI Native](https://heroui.com/docs/native), [Uniwind](https://docs.uniwind.dev)
+(Tailwind CSS for React Native), and [Expo Router](https://docs.expo.dev/router/introduction)
+with a bottom-tab layout.
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+   npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **src/app** directory. The tabs themselves live under `src/app/(tabs)/`. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## What's preconfigured
+
+- **HeroUI Native** (`heroui-native`) wrapped in `HeroUINativeProvider` and `GestureHandlerRootView` in `src/app/_layout.tsx`
+- **Uniwind** + **Tailwind CSS** wired through `metro.config.js` and `src/global.css`
+- All HeroUI Native mandatory peer dependencies: `react-native-reanimated`, `react-native-gesture-handler`, `react-native-worklets`, `react-native-safe-area-context`, `react-native-svg`, `react-native-screens`
+- `@gorhom/bottom-sheet` for bottom-sheet UIs
+- `@expo/vector-icons` (Ionicons) for tab bar icons
+- TypeScript with `strict: true` and `@/*` path alias to `./src/*`
+- React Compiler enabled
+
+## Learn more
+
+- [HeroUI Native components](https://heroui.com/docs/native) — full component reference
+- [Expo documentation](https://docs.expo.dev/) — Expo fundamentals and guides
+- [Uniwind documentation](https://docs.uniwind.dev) — Tailwind for React Native
+- [Expo Router](https://docs.expo.dev/router/introduction) — file-based routing

app/app.json

@@ -0,0 +1,37 @@
+{
+  "expo": {
+    "name": "volana",
+    "slug": "volana",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "heroui-native-app",
+    "userInterfaceStyle": "automatic",
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "predictiveBackGestureEnabled": false
+    },
+    "plugins": [
+      "expo-router",
+      "expo-font",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff"
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "reactCompiler": true
+    }
+  }
+}

app/eslint.config.js

@@ -0,0 +1,8 @@
+const expoConfig = require("eslint-config-expo/flat");
+
+module.exports = [
+  ...expoConfig,
+  {
+    ignores: ["dist/*", ".expo/*", "node_modules/*", "expo-env.d.ts", "uniwind-types.d.ts"],
+  },
+];

app/metro.config.js

@@ -0,0 +1,8 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withUniwindConfig } = require("uniwind/metro");
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withUniwindConfig(config, {
+  cssEntryFile: "./src/global.css",
+});

app/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "volana",
+  "version": "1.0.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@expo/metro-runtime": "~56.0.13",
+    "@expo/vector-icons": "^15.0.3",
+    "@gorhom/bottom-sheet": "^5.2.14",
+    "expo": "~56.0.5",
+    "expo-constants": "~56.0.16",
+    "expo-font": "~56.0.5",
+    "expo-linking": "~56.0.12",
+    "expo-router": "~56.2.7",
+    "expo-splash-screen": "~56.0.10",
+    "expo-status-bar": "~56.0.4",
+    "heroui-native": "^1.0.2",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-gesture-handler": "~2.31.2",
+    "react-native-reanimated": "~4.3.1",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "~4.25.2",
+    "react-native-svg": "15.15.4",
+    "react-native-worklets": "0.8.3",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.1.17",
+    "uniwind": "^1.5.0"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.15",
+    "eslint": "^9.39.4",
+    "eslint-config-expo": "^56.0.4",
+    "prettier": "^3.8.3",
+    "typescript": "~6.0.3"
+  }
+}

app/src/app/(tabs)/_layout.tsx

@@ -0,0 +1,31 @@
+import { Ionicons } from "@expo/vector-icons";
+import { Tabs } from "expo-router";
+import type { ComponentProps, JSX } from "react";
+import type { ColorValue } from "react-native";
+
+type IoniconName = ComponentProps<typeof Ionicons>["name"];
+
+function TabIcon({ name, color }: { name: IoniconName; color: ColorValue }): JSX.Element {
+  return <Ionicons name={name} size={24} color={color} />;
+}
+
+export default function TabsLayout(): JSX.Element {
+  return (
+    <Tabs screenOptions={{ headerShown: false }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Home",
+          tabBarIcon: ({ color }) => <TabIcon name="home-outline" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="explore"
+        options={{
+          title: "Explore",
+          tabBarIcon: ({ color }) => <TabIcon name="compass-outline" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}

app/src/app/(tabs)/explore.tsx

@@ -0,0 +1,6 @@
+import type { JSX } from "react";
+import { View } from "react-native";
+
+export default function ExploreTab(): JSX.Element {
+  return <View className="flex-1 bg-background" />;
+}

app/src/app/(tabs)/index.tsx

@@ -0,0 +1,52 @@
+import { Button, Card, Typography, useThemeColor } from "heroui-native";
+import type { JSX } from "react";
+import { View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+function HeroUILogo({ tintColor }: { tintColor: string }): JSX.Element {
+  return (
+    <Svg width={90} height={30} viewBox="0 0 140 44" fill="none">
+      <Path
+        d="M0.677734 11.3847V24.0405C0.677734 24.6387 0.985209 25.1946 1.49107 25.5109L10.1195 30.9067C11.2693 31.6257 12.7586 30.796 12.7586 29.4363V18.7981C12.7586 18.186 13.0803 17.6194 13.605 17.3074L18.8683 14.1785V41.4437C18.8683 42.7988 20.3486 43.6293 21.4988 42.9195L30.4044 37.4229C30.9152 37.1076 31.2264 36.549 31.2264 35.9471V9.76484C31.2264 8.41634 29.759 7.58483 28.6085 8.28139L18.8683 14.1785V2.55643C18.8683 1.21158 17.408 0.379537 16.2574 1.06878L1.51927 9.89703C0.997365 10.2097 0.677734 10.7747 0.677734 11.3847Z"
+        fill={tintColor}
+      />
+      <Path
+        d="M63.8763 24.0707C63.8763 20.4817 62.4078 18.8253 59.4709 18.8253C56.1076 18.8253 53.7391 21.0799 53.7391 26.1412V37.7363H47.6756V5.52769H53.7391V17.3069C55.2075 14.9142 57.6234 13.7179 60.9394 13.7179C66.5764 13.7179 69.8924 17.1688 69.8924 22.9664V37.7363H63.8763V24.0707Z"
+        fill={tintColor}
+      />
+      <Path
+        d="M84.8996 38.4725C77.3677 38.4725 72.5832 33.5952 72.5832 26.0952C72.5832 18.6872 77.3203 13.7179 84.8996 13.7179C93.0947 13.7179 97.5475 19.5154 96.3158 27.6596H78.6467C78.9783 31.5247 81.252 33.7333 84.8996 33.7333C87.8839 33.7333 89.684 32.2149 90.1577 30.6964H96.1737C95.2263 35.2057 91.0577 38.4725 84.8996 38.4725ZM78.7888 23.6566H90.4419C90.3945 20.4817 88.3102 18.3191 84.7574 18.3191C81.5836 18.3191 79.3572 20.1596 78.7888 23.6566Z"
+        fill={tintColor}
+      />
+      <Path
+        d="M99.6225 20.3437C99.6225 16.5246 101.754 14.4541 105.828 14.4541H113.597V19.4234H105.686V37.7363H99.6225V20.3437Z"
+        fill={tintColor}
+      />
+      <Path
+        d="M126.863 38.4725C119.189 38.4725 114.31 33.5492 114.31 26.0952C114.31 18.6412 119.189 13.7179 126.863 13.7179C134.442 13.7179 139.322 18.6412 139.322 26.0952C139.322 33.5492 134.442 38.4725 126.863 38.4725ZM126.863 33.4572C130.653 33.4572 133.163 30.5584 133.163 26.0952C133.163 21.632 130.653 18.6872 126.863 18.6872C123.026 18.6872 120.515 21.632 120.515 26.0952C120.515 30.5584 123.026 33.4572 126.863 33.4572Z"
+        fill={tintColor}
+      />
+    </Svg>
+  );
+}
+
+export default function HomeTab(): JSX.Element {
+  const themeColorForeground = useThemeColor("foreground");
+
+  return (
+    <View className="flex-1 bg-background justify-center px-6">
+      <Card className="items-center gap-8">
+        <HeroUILogo tintColor={themeColorForeground} />
+        <Typography.Paragraph className="text-center">
+          A modern starter for React Native, preconfigured with HeroUI Native, Uniwind, and Expo
+          Router. Edit{" "}
+          <Typography.Paragraph className="font-semibold">
+            app/(tabs)/index.tsx
+          </Typography.Paragraph>{" "}
+          and watch it reload.
+        </Typography.Paragraph>
+        <Button className="w-full">Get started</Button>
+      </Card>
+    </View>
+  );
+}

app/src/app/_layout.tsx

@@ -0,0 +1,20 @@
+import type { JSX } from "react";
+import { Stack } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import { HeroUINativeProvider } from "heroui-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+
+import "../global.css";
+
+export default function RootLayout(): JSX.Element {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <HeroUINativeProvider>
+        <Stack screenOptions={{ headerShown: false }}>
+          <Stack.Screen name="(tabs)" />
+        </Stack>
+        <StatusBar style="auto" />
+      </HeroUINativeProvider>
+    </GestureHandlerRootView>
+  );
+}

app/src/global.css

@@ -0,0 +1,8 @@
+@import "tailwindcss";
+@import "uniwind";
+
+@import "heroui-native/styles";
+
+/* End-user path: heroui-native lives in the project's node_modules, one
+   level up from this src/global.css file. */
+@source '../node_modules/heroui-native/lib';

app/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@/assets/*": ["./assets/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts", "uniwind-env.d.ts"]
+}

app/uniwind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="uniwind/types" />