From 7c8229ff3a049eb25f7c65694f3d1422cd0abd66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Qu=E1=BB=91c=20Kh=C3=A1nh?= Date: Sat, 8 Jun 2024 18:02:00 +0700 Subject: [PATCH] feat(mobile): setup nativewind and nativecn --- apps/mobile/README.md | 2 +- apps/mobile/app/(tabs)/explore.tsx | 117 +--- apps/mobile/app/(tabs)/index.tsx | 67 +-- apps/mobile/app/+not-found.tsx | 15 +- apps/mobile/app/_layout.tsx | 2 + apps/mobile/assets/images/adaptive-icon.png | Bin 17547 -> 22892 bytes apps/mobile/assets/images/icon.png | Bin 22380 -> 29400 bytes apps/mobile/assets/images/splash.png | Bin 47346 -> 30838 bytes apps/mobile/babel.config.js | 8 +- apps/mobile/components/Avatar.tsx | 60 ++ apps/mobile/components/Badge.tsx | 59 ++ apps/mobile/components/Button.tsx | 81 +++ apps/mobile/components/Card.tsx | 119 ++++ apps/mobile/components/Checkbox.tsx | 50 ++ apps/mobile/components/Collapsible.tsx | 41 -- apps/mobile/components/Dialog.tsx | 73 +++ apps/mobile/components/DropDown.tsx | 100 ++++ apps/mobile/components/ExternalLink.tsx | 24 - apps/mobile/components/HelloWave.tsx | 37 -- apps/mobile/components/Input.tsx | 27 + apps/mobile/components/ParallaxScrollView.tsx | 10 +- apps/mobile/components/Progress.tsx | 42 ++ apps/mobile/components/RadioGroup.tsx | 90 +++ apps/mobile/components/Skeleton.tsx | 38 ++ apps/mobile/components/Switch.tsx | 29 + apps/mobile/components/Tabs.tsx | 98 +++ apps/mobile/components/ThemedText.tsx | 60 -- apps/mobile/components/ThemedView.tsx | 14 - apps/mobile/components/Toast.tsx | 177 ++++++ apps/mobile/global.css | 81 +++ apps/mobile/lib/theme.ts | 10 + apps/mobile/lib/utils.ts | 6 + apps/mobile/metro.config.js | 4 +- apps/mobile/nativewind-env.d.ts | 1 + apps/mobile/package.json | 11 +- apps/mobile/tailwind.config.js | 72 +++ package.json | 1 + pnpm-lock.yaml | 563 ++++++++++++++++++ 38 files changed, 1831 insertions(+), 358 deletions(-) create mode 100644 apps/mobile/components/Avatar.tsx create mode 100644 apps/mobile/components/Badge.tsx create mode 100644 apps/mobile/components/Button.tsx create mode 100644 apps/mobile/components/Card.tsx create mode 100644 apps/mobile/components/Checkbox.tsx delete mode 100644 apps/mobile/components/Collapsible.tsx create mode 100644 apps/mobile/components/Dialog.tsx create mode 100644 apps/mobile/components/DropDown.tsx delete mode 100644 apps/mobile/components/ExternalLink.tsx delete mode 100644 apps/mobile/components/HelloWave.tsx create mode 100644 apps/mobile/components/Input.tsx create mode 100644 apps/mobile/components/Progress.tsx create mode 100644 apps/mobile/components/RadioGroup.tsx create mode 100644 apps/mobile/components/Skeleton.tsx create mode 100644 apps/mobile/components/Switch.tsx create mode 100644 apps/mobile/components/Tabs.tsx delete mode 100644 apps/mobile/components/ThemedText.tsx delete mode 100644 apps/mobile/components/ThemedView.tsx create mode 100644 apps/mobile/components/Toast.tsx create mode 100644 apps/mobile/global.css create mode 100644 apps/mobile/lib/theme.ts create mode 100644 apps/mobile/lib/utils.ts create mode 100644 apps/mobile/nativewind-env.d.ts create mode 100644 apps/mobile/tailwind.config.js diff --git a/apps/mobile/README.md b/apps/mobile/README.md index cd4feb8a..ff0694bd 100644 --- a/apps/mobile/README.md +++ b/apps/mobile/README.md @@ -1,4 +1,4 @@ -# Welcome to your Expo app 👋 +# @6pm/mobile This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app). diff --git a/apps/mobile/app/(tabs)/explore.tsx b/apps/mobile/app/(tabs)/explore.tsx index e480218a..d6f2bcde 100644 --- a/apps/mobile/app/(tabs)/explore.tsx +++ b/apps/mobile/app/(tabs)/explore.tsx @@ -1,102 +1,25 @@ -import Ionicons from '@expo/vector-icons/Ionicons'; -import { StyleSheet, Image, Platform } 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 { Avatar, AvatarFallback, AvatarImage } from '@/components/Avatar'; +import { View } from 'react-native'; export default function TabTwoScreen() { return ( - }> - - Explore - - This app includes example code to help you get started. - - - This app has two screens:{' '} - app/(tabs)/index.tsx and{' '} - app/(tabs)/explore.tsx - - - The layout file in app/(tabs)/_layout.tsx{' '} - sets up the tab navigator. - - - Learn more - - - - - You can open this project on Android, iOS, and the web. To open the web version, press{' '} - w in the terminal running this project. - - - - - For static images, you can use the @2x and{' '} - @3x suffixes to provide files for - different screen densities - - - - Learn more - - - - - Open app/_layout.tsx to see how to load{' '} - - custom fonts such as this one. - - - - Learn more - - - - - This template has light and dark mode support. The{' '} - useColorScheme() hook lets you inspect - what the user's current color scheme is, and so you can adjust UI colors accordingly. - - - Learn more - - - - - This template includes an example of an animated component. The{' '} - components/HelloWave.tsx component uses - the powerful react-native-reanimated library - to create a waving hand animation. - - {Platform.select({ - ios: ( - - The components/ParallaxScrollView.tsx{' '} - component provides a parallax effect for the header image. - - ), - })} - - + + + + CG + + + + SS + + ); } - -const styles = StyleSheet.create({ - headerImage: { - color: '#808080', - bottom: -90, - left: -35, - position: 'absolute', - }, - titleContainer: { - flexDirection: 'row', - gap: 8, - }, -}); diff --git a/apps/mobile/app/(tabs)/index.tsx b/apps/mobile/app/(tabs)/index.tsx index 324aeb76..3e9d56eb 100644 --- a/apps/mobile/app/(tabs)/index.tsx +++ b/apps/mobile/app/(tabs)/index.tsx @@ -1,70 +1,7 @@ -import { Image, StyleSheet, Platform } from 'react-native'; - -import { HelloWave } from '@/components/HelloWave'; -import ParallaxScrollView from '@/components/ParallaxScrollView'; -import { ThemedText } from '@/components/ThemedText'; -import { ThemedView } from '@/components/ThemedView'; +import { Button } from '@/components/Button'; export default function HomeScreen() { return ( - - }> - - Welcome! - - - - Step 1: Try it - - Edit app/(tabs)/index.tsx to see changes. - Press{' '} - - {Platform.select({ ios: 'cmd + d', android: 'cmd + m' })} - {' '} - to open developer tools. - - - - Step 2: Explore - - Tap the Explore tab to learn more about what's included in this starter app. - - - - Step 3: Get a fresh start - - When you're ready, run{' '} - npm run reset-project to get a fresh{' '} - app directory. This will move the current{' '} - app to{' '} - app-example. - - - +