feat(mobile): adopt rn-reusables (#64)

- Migrate all `nativecn` components to `react-native-reusables`.
- RN Text -> `@components/ui/text`

Docs: https://rnr-docs.vercel.app

To add new component:

```
cd apps/mobile
```

```
npx @react-native-reusables/cli@latest add <component-name>
```

apps/mobile/app/(app)/(tabs)/_layout.tsx

@@ -6,7 +6,7 @@ import { Tabs } from 'expo-router'
 import { CogIcon, LandPlotIcon, ScanTextIcon, WalletIcon } from 'lucide-react-native'
 
 export default function TabLayout() {
-  const colorScheme = useColorScheme()
+  const { colorScheme } = useColorScheme()
   const { i18n } = useLingui()
   return (
     <Tabs

apps/mobile/app/(app)/(tabs)/settings.tsx

@@ -1,15 +1,15 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/Avatar'
-import { Badge } from '@/components/Badge'
-import { Button } from '@/components/Button'
-import { IconButton } from '@/components/IconButton'
 import { MenuItem } from '@/components/common/menu-item'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Text } from '@/components/ui/text'
 import { useLocale } from '@/locales/provider'
 import { useAuth, useUser } from '@clerk/clerk-expo'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { Link } from 'expo-router'
 import { ChevronRightIcon, EarthIcon, LogOutIcon, PencilIcon, SwatchBookIcon } from 'lucide-react-native'
-import { Alert, ScrollView, Text, View } from 'react-native'
+import { Alert, ScrollView, View } from 'react-native'
 
 export default function SettingsScreen() {
   const { signOut } = useAuth()
@@ -22,7 +22,7 @@ export default function SettingsScreen() {
       <View className="bg-muted rounded-lg mx-6 px-4 py-3 justify-end h-40">
         <View className="flex flex-row items-center gap-2 justify-between">
           <View className="flex flex-row items-center gap-3">
-            <Avatar className="w-12 h-12">
+            <Avatar alt='avatar' className="w-12 h-12">
               <AvatarImage
                 source={{
                   uri: user?.imageUrl,
@@ -32,16 +32,19 @@ export default function SettingsScreen() {
             </Avatar>
             <View>
               <Badge
-                variant="secondary"
-                label="Free"
+                variant="outline"
                 className="self-start rounded-md mb-1"
-              />
+              >
+                <Text className="text-xs font-medium">Free</Text>
+              </Badge>
               <Text className="font-medium text-primary">
                 {user?.fullName ?? user?.primaryEmailAddress?.emailAddress}
               </Text>
             </View>
           </View>
-          <IconButton icon={PencilIcon} size="sm" variant="ghost" />
+          <Button size="icon" variant="ghost">
+            <PencilIcon className="w-5 h-5 text-primary" />
+          </Button>
         </View>
       </View>
       <View className="gap-2 mt-4">
@@ -75,7 +78,6 @@ export default function SettingsScreen() {
           {t(i18n)`Others`}
         </Text>
         <Button
-          label={t(i18n)`Sign out`}
           variant="ghost"
           onPress={() => Alert.alert(t(i18n)`Are you sure you want to sign out?`, '', [
             {
@@ -88,10 +90,13 @@ export default function SettingsScreen() {
               onPress: () => signOut(),
             },
           ])}
-          labelClasses="text-red-500 font-regular"
-          leftIcon={LogOutIcon}
           className="justify-start gap-6 px-6"
-        />
+        >
+          <LogOutIcon className="w-5 h-5 text-red-500" />
+          <Text className="text-red-500 font-regular group-active:text-red-500">
+            {t(i18n)`Sign out`}
+          </Text>
+        </Button>
       </View>
     </ScrollView>
   )

apps/mobile/app/(app)/_layout.tsx

@@ -8,7 +8,7 @@ import { useEffect } from 'react'
 
 export default function AuthenticatedLayout() {
   const { isLoaded, isSignedIn } = useAuth()
-  const colorScheme = useColorScheme()
+  const { colorScheme } = useColorScheme()
   const { i18n } = useLingui()
 
   useEffect(() => {

apps/mobile/app/(app)/appearance.tsx

@@ -1,9 +1,10 @@
-import { Tabs, TabsList, TabsTrigger } from '@/components/Tabs'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Text } from '@/components/ui/text'
+import { useColorScheme } from '@/hooks/useColorScheme'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
-import { MoonStarIcon, SmartphoneIcon, SunIcon } from 'lucide-react-native'
-import { useColorScheme } from 'nativewind'
-import { ScrollView, Text } from 'react-native'
+import { MoonStarIcon, SunIcon } from 'lucide-react-native'
+import { ScrollView } from 'react-native'
 
 export default function AppearanceScreen() {
   const { colorScheme, setColorScheme } = useColorScheme()
@@ -18,26 +19,19 @@ export default function AppearanceScreen() {
         {t(i18n)`Choose a preferred theme for the 6pm`}
       </Text>
       <Tabs
-        defaultValue={colorScheme || 'light'}
+        value={colorScheme || 'light'}
         // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-        onChange={(value: any) => setColorScheme(value)}
+        onValueChange={(value: any) => setColorScheme(value)}
       >
         <TabsList>
-          <TabsTrigger
-            value="light"
-            title={t(i18n)`Light`}
-            icon={SunIcon}
-          />
-          <TabsTrigger
-            value="dark"
-            title={t(i18n)`Dark`}
-            icon={MoonStarIcon}
-          />
-          <TabsTrigger
-            value="system"
-            title={t(i18n)`System`}
-            icon={SmartphoneIcon}
-          />
+          <TabsTrigger value="light">
+            <SunIcon className="w-5 h-5 text-muted-foreground" />
+            <Text>{t(i18n)`Light`}</Text>
+          </TabsTrigger>
+          <TabsTrigger value="dark">
+            <MoonStarIcon className="w-5 h-5 text-muted-foreground" />
+            <Text>{t(i18n)`Dark`}</Text>
+          </TabsTrigger>
         </TabsList>
       </Tabs>
     </ScrollView>

apps/mobile/app/(app)/language.tsx

@@ -1,10 +1,11 @@
 import { MenuItem } from '@/components/common/menu-item'
+import { Text } from '@/components/ui/text'
 import { useLocale } from '@/locales/provider'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { useRouter } from 'expo-router'
 import { CheckCircleIcon } from 'lucide-react-native'
-import { ScrollView, Text } from 'react-native'
+import { ScrollView } from 'react-native'
 
 export default function LanguageScreen() {
   const { i18n } = useLingui()
@@ -13,7 +14,7 @@ export default function LanguageScreen() {
 
   return (
     <ScrollView className="bg-card">
-      <Text className="font-sans font-medium text-primary text-lg m-6 mx-auto">
+      <Text className="font-medium text-lg m-6 mx-auto">
         {t(i18n)`Language`}
       </Text>
       <MenuItem

apps/mobile/app/(auth)/login.tsx

@@ -1,17 +1,18 @@
-import { Button } from '@/components/Button'
-import { Separator } from '@/components/Separator'
 import { AuthEmail } from '@/components/auth/auth-email'
 import {
   AppleAuthButton,
   GoogleAuthButton,
 } from '@/components/auth/auth-social'
 import { AuthIllustration } from '@/components/svg-assets/auth-illustration'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { Text } from '@/components/ui/text'
 import { Trans, t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { Link } from 'expo-router'
 import { MailIcon } from 'lucide-react-native'
 import { useState } from 'react'
-import { ScrollView, Text, View } from 'react-native'
+import { ScrollView, View } from 'react-native'
 
 export default function LoginScreen() {
   const [withEmail, setWithEmail] = useState(false)
@@ -38,23 +39,24 @@ export default function LoginScreen() {
         <AppleAuthButton />
         <GoogleAuthButton />
         <Button
-          label={t(i18n)`Continue with Email`}
-          leftIcon={MailIcon}
           variant="outline"
           onPress={() => setWithEmail(true)}
-        />
+        >
+          <MailIcon className="w-5 h-5 text-primary" />
+          <Text>{t(i18n)`Continue with Email`}</Text>
+        </Button>
         <Separator className="w-[70%] mx-auto my-3" />
         {withEmail && <AuthEmail />}
       </View>
       <Trans>
         <Text className="font-sans text-muted-foreground text-xs text-center mx-auto px-4 mt-4">
           By continuing, you acknowledge that you understand and agree to the{' '}
-          <Link href="/terms-of-service" asChild className="text-primary">
-            <Text>Terms & Conditions</Text>
+          <Link href="/terms-of-service">
+            <Text className="text-primary text-xs">Terms & Conditions</Text>
           </Link>{' '}
           and{' '}
-          <Link href="/privacy-policy" asChild className="text-primary">
-            <Text>Privacy Policy</Text>
+          <Link href="/privacy-policy">
+            <Text className="text-primary text-xs">Privacy Policy</Text>
           </Link>
         </Text>
       </Trans>

apps/mobile/app/+not-found.tsx

@@ -1,7 +1,8 @@
 import { Link, Stack } from 'expo-router'
-import { Text, View } from 'react-native'
+import { View } from 'react-native'
 
-import { Button } from '@/components/Button'
+import { Button } from '@/components/ui/button'
+import { Text } from '@/components/ui/text'
 
 export default function NotFoundScreen() {
   return (
@@ -10,7 +11,9 @@ export default function NotFoundScreen() {
       <View className="flex-1 items-center justify-center p-4 gap-4">
         <Text className='font-sans text-primary font-medium'>This screen doesn't exist.</Text>
         <Link href="/" asChild={true}>
-          <Button label="Go to home screen!" />
+          <Button>
+            <Text>Go to home screen!</Text>
+          </Button>
         </Link>
       </View>
     </>

apps/mobile/app/_layout.tsx

@@ -47,7 +47,7 @@ export const unstable_settings = {
 
 export default function RootLayout() {
   useWarmUpBrowser();
-  const colorScheme = useColorScheme()
+  const { colorScheme } = useColorScheme()
   const [fontsLoaded] = useFonts({
     BeVietnamPro_300Light,
     BeVietnamPro_400Regular,

apps/mobile/components.json

@@ -0,0 +1,7 @@
+{
+  "platforms": "universal",
+  "aliases": {
+    "components": "@/components",
+    "lib": "@/lib"
+  }
+}