feat(native): ✨ create basic react native app showcase (#92)

Author: Karthik-B-06

.prettierignore

@@ -13,3 +13,6 @@ pnpm-lock.yaml
 public
 **/*/CHANGELOG.md
 **/types/generated/*.d.ts
+
+# Native app
+native-app

cspell.json

@@ -38,6 +38,7 @@
 		"Faris",
 		"fbca",
 		"folke",
+		"frappeuireactnative",
 		"gacp",
 		"gifv",
 		"groupby",
@@ -69,6 +70,7 @@
 		"Rushabh",
 		"sentryclirc",
 		"shadcn",
+		"springify",
 		"styl",
 		"svgz",
 		"syncer",

eslint.config.js

@@ -95,7 +95,9 @@ export default [
 			// no ignore
 			"!**/.*",
 			"!monorepo.code-workspace",
-			//  Node.js
+			// Native app
+			"native-app",
+			// Node.js
 			".npmrc",
 			".nvmrc",
 			// Lock files

native-app/.gitignore

@@ -0,0 +1,23 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+
+
+
+ios
+android
+
+# macOS
+.DS_Store
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*

native-app/App.tsx

@@ -0,0 +1,88 @@
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { NavigationContainer } from '@react-navigation/native';
+import { StatusBar } from 'expo-status-bar';
+import React from 'react';
+import { SafeAreaView, useColorScheme } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import './gesture-handler';
+import './global.css';
+
+import { AvatarUI } from '@/AvatarUI';
+import { ButtonUI } from '@/ButtonUI';
+import { GamePlanUI } from '@/GamePlanUI';
+import { TagUI } from '@/TagUI';
+import { Button } from '@/components/ui/button';
+import Icon from '@/components/ui/icon';
+import { cx } from '@/lib/utils';
+import { CaretRight } from '@/svg/CaretRight';
+
+const Drawer = createDrawerNavigator();
+
+const CustomDrawer = ({ navigation }: { navigation: any }) => {
+	return (
+		<SafeAreaView className="flex-1 px-4">
+			<Button
+				onPress={() => navigation.navigate('Button')}
+				className="flex-row items-start justify-between"
+				suffix={<Icon icon={<CaretRight />} />}
+				size="xl"
+				variant="ghost">
+				Button
+			</Button>
+			<Button
+				onPress={() => navigation.navigate('Avatar')}
+				suffix={<Icon icon={<CaretRight />} />}
+				className="flex-row items-start justify-between"
+				size="xl"
+				variant="ghost">
+				Avatar
+			</Button>
+			<Button
+				onPress={() => navigation.navigate('Tag')}
+				suffix={<Icon icon={<CaretRight />} />}
+				className="flex-row items-start justify-between"
+				size="xl"
+				variant="ghost">
+				Tag
+			</Button>
+			<Button
+				onPress={() => navigation.navigate('GamePlan')}
+				suffix={<Icon icon={<CaretRight />} />}
+				className="flex-row items-start justify-between"
+				size="xl"
+				variant="ghost">
+				Game Plan
+			</Button>
+		</SafeAreaView>
+	);
+};
+
+function MyDrawer() {
+	return (
+		<Drawer.Navigator
+			initialRouteName="GamePlan"
+			screenOptions={{ headerShown: false }}
+			drawerContent={(props) => <CustomDrawer {...props} />}>
+			<Drawer.Screen name="Button" component={ButtonUI} />
+			<Drawer.Screen name="Avatar" component={AvatarUI} />
+			<Drawer.Screen name="Tag" component={TagUI} />
+			<Drawer.Screen name="GamePlan" component={GamePlanUI} />
+		</Drawer.Navigator>
+	);
+}
+
+export default function App() {
+	const colorScheme = useColorScheme();
+	return (
+		<NavigationContainer>
+			<SafeAreaProvider>
+				<Animated.View
+					className={cx('flex-1', colorScheme === 'dark' ? 'bg-black dark' : 'bg-white')}>
+					<StatusBar style="auto" />
+					<MyDrawer />
+				</Animated.View>
+			</SafeAreaProvider>
+		</NavigationContainer>
+	);
+}

native-app/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Timeless
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

native-app/README.md

@@ -0,0 +1,27 @@
+# Frappe UI React Native Registry
+
+## Development
+
+You can run the app using Expo. 🎉🎉
+
+Clone the repository and run the following commands:
+
+```bash
+# Clone the repository
+git clone [email protected]:timelessco/frappe-ui-react.git
+
+# Navigate to the native app
+cd frappe-ui-react/apps/native-app
+
+# Install dependencies
+### Make sure you have node version v20
+npm install
+
+
+# Build the app
+eas build --profile development
+
+# Start the development server
+npm run start
+
+```

native-app/app.json

@@ -0,0 +1,59 @@
+{
+	"expo": {
+		"name": "frappe-ui-react-native",
+		"slug": "frappe-ui-react-native",
+		"version": "1.0.0",
+		"web": {
+			"favicon": "./assets/favicon.png",
+			"bundler": "metro"
+		},
+		"experiments": {
+			"tsconfigPaths": true
+		},
+		"plugins": [
+			[
+				"expo-dev-launcher",
+				{
+					"launchMode": "most-recent"
+				}
+			],
+			[
+				"expo-font",
+				{
+					"fonts": [
+						"./assets/fonts/InterDisplay-Black.ttf",
+						"./assets/fonts/InterDisplay-Bold.ttf",
+						"./assets/fonts/InterDisplay-Medium.ttf",
+						"./assets/fonts/InterDisplay-Regular.ttf",
+						"./assets/fonts/InterDisplay-SemiBold.ttf"
+					]
+				}
+			]
+		],
+		"orientation": "portrait",
+		"icon": "./assets/icon.png",
+		"userInterfaceStyle": "automatic",
+		"splash": {
+			"image": "./assets/splash.png",
+			"resizeMode": "contain",
+			"backgroundColor": "#ffffff"
+		},
+		"assetBundlePatterns": ["**/*"],
+		"ios": {
+			"supportsTablet": true,
+			"bundleIdentifier": "com.timelessco.frappeuireactnative"
+		},
+		"android": {
+			"adaptiveIcon": {
+				"foregroundImage": "./assets/adaptive-icon.png",
+				"backgroundColor": "#ffffff"
+			},
+			"package": "com.timelessco.frappeuireactnative"
+		},
+		"extra": {
+			"eas": {
+				"projectId": "99094a05-1c65-447d-b0ea-933f14c098f7"
+			}
+		}
+	}
+}