Refactor navigation to add Update screen

Author: codeAbinash

App.tsx

@@ -27,6 +27,7 @@ import Test from '@screens/Test'
 import RandomColor from '@screens/Try/RandomColor'
 import RandomPassword from '@screens/Try/RandomPassword'
 import YourAge from '@screens/Try/YourAge'
+import Update from '@screens/Update/Update'
 import type { ConfirmCityParamList } from '@screens/Weather/ConfirmCity'
 import ConfirmCity from '@screens/Weather/ConfirmCity'
 import WeatherScreen from '@screens/Weather/Main/Weather'
@@ -139,6 +140,7 @@ export type RootStackParamList = {
   AppLock: undefined
   RandomPassword: undefined
   GlobalSearch: undefined
+  Update: undefined
 }
 
 const Stack = createStackNavigator<RootStackParamList>()
@@ -212,6 +214,7 @@ function Navigation() {
         <Stack.Screen name='AppLock' component={AppLock} options={GestureEnabled} />
         <Stack.Screen name='RandomPassword' component={RandomPassword} options={GestureEnabled} />
         <Stack.Screen name='GlobalSearch' component={GlobalSearch} options={IOS_BOTTOM_STYLE} />
+        <Stack.Screen name='Update' component={Update} options={IOS_BOTTOM_STYLE} />
       </Stack.Navigator>
     </>
   )

src/screens/Settings/Extra/About.tsx

@@ -7,11 +7,19 @@ import AppIcon from '@assets/icons/icon.svg'
 export default function About() {
   return (
     <View className='flex-1 items-center justify-center'>
-      <View className='my-5 bg-appIconBg p-1' style={{ borderRadius: 35 }}>
-        <AppIcon width={150} height={150} />
-      </View>
+      <AppIconUI />
       <SemiBold className='text-base text-black dark:text-white'>Tech Triangle</SemiBold>
       <SemiBold className='text-xs text-black/50 dark:text-white'>v{APP_VERSION}</SemiBold>
     </View>
   )
 }
+
+export function AppIconUI() {
+  return (
+    <View className='flex-row items-center justify-center'>
+      <View className='my-5 bg-appIconBg p-1' style={{ borderRadius: 28 }}>
+        <AppIcon width={100} height={100} />
+      </View>
+    </View>
+  )
+}

src/screens/Settings/Settings.tsx

@@ -11,6 +11,7 @@ import {
   FolderFileStorageSolidIcon,
   InformationCircleSolidIcon,
   PolicySolidIcon,
+  Setting07SolidIcon,
   ShieldUserSolidIcon,
   SquareLock02SolidIcon,
   SunCloudAngledRainZap01SolidIcon,
@@ -27,7 +28,7 @@ import { TxtAcc } from '@components/Text'
 import { useIsFocused } from '@react-navigation/native'
 import { Colors } from '@utils/colors'
 import { APP_VERSION, APP_VERSION_CODE, ask_a_question, join_telegram_channel } from '@utils/data'
-import { Bold } from '@utils/fonts'
+import { Bold, SemiBold } from '@utils/fonts'
 import { Caches, clearStorage, getStartWithSize, getStorageSize } from '@utils/storage'
 import type { NavProp } from '@utils/types'
 import { screenDelay, toReadableSize } from '@utils/utils'
@@ -89,6 +90,22 @@ export default function Settings({ navigation }: NavProp) {
               Go to each section to customize your experience. All settings are saved automatically.
             </SettText>
             <SettGroup title='General'>
+              <SettOption
+                title='App Update'
+                Icon={<RoundedIcon Icon={Setting07SolidIcon} className='bg-slate-500' />}
+                arrow
+                Right={
+                  <View
+                    className='items-center justify-center rounded-full bg-red-500'
+                    style={{ height: 22, width: 22 }}
+                  >
+                    <SemiBold className='text-xs text-white' style={{ paddingTop: 2 }}>
+                      1
+                    </SemiBold>
+                  </View>
+                }
+                onPress={() => navigation.navigate('Update')}
+              />
               <SettOption
                 title='Your Profile'
                 Icon={<RoundedIcon Icon={UserSolidIcon} className='bg-green-500' />}

src/screens/Update/Update.tsx

@@ -0,0 +1,48 @@
+import AppIcon from '@assets/icons/icon.svg'
+import Btn from '@components/Button'
+import { PaddingBottom } from '@components/SafePadding'
+import StackHeader from '@components/StackHeader'
+import { GITHUB_REPO } from '@utils/constants'
+import { Medium, Regular, SemiBold } from '@utils/fonts'
+import type { NavProp } from '@utils/types'
+import React from 'react'
+import { Linking, StatusBar, View } from 'react-native'
+
+export default function Update({ navigation }: NavProp) {
+  return (
+    <View className='flex-1 p-5'>
+      <View>
+        <StatusBar barStyle='default' />
+        <StackHeader title='App Update' navigation={navigation} left='Cancel' right='Done' />
+      </View>
+      <View className='mt-3 flex-1 justify-between'>
+        <View className='flex-1 rounded-3xl bg-appIconBg p-8'>
+          <AppIcon width={80} height={80} className='mt-8' />
+          <SemiBold style={{ fontSize: 24 }} className='mt-5 text-white'>
+            Update Available
+          </SemiBold>
+          <Medium style={{ fontSize: 14 }} className='mt-1 text-white opacity-70'>
+            v1.0.0 15MB
+          </Medium>
+          <Regular className='mt-5 text-white opacity-80' style={{ fontSize: 12 }}>
+            We bring you the latest features and improvements. Update now to enjoy the best experience.
+          </Regular>
+          <Regular className='mt-5 text-white opacity-80' style={{ fontSize: 12 }}>
+            Download size may vary. The Download Now button will redirect you to the GitHub and you can download the
+            latest.
+          </Regular>
+        </View>
+
+        <View className='mt-5 px-5'>
+          <Btn
+            title='Download Update'
+            onPress={() => {
+              Linking.openURL(GITHUB_REPO)
+            }}
+          />
+          <PaddingBottom />
+        </View>
+      </View>
+    </View>
+  )
+}

src/screens/Weather/Main/Weather.tsx

@@ -170,7 +170,7 @@ function Boxes({ w, theme }: { w: Weather; theme: Theme }) {
         phase={w?.daily[0]?.moon_phase}
       />
       <View className='w-full items-center justify-center'>
-        <SemiBold className='mt-5 text-center opacity-50' style={F.F10}>
+        <SemiBold className='mt-5 text-center opacity-50' style={[F.F10, theme.color]}>
           Powered by OpenWeatherMap
         </SemiBold>
       </View>

src/screens/Weather/Main/components/SunRiseSet.tsx

@@ -27,7 +27,7 @@ export default function SunRiseSet({ theme, now, sunrise, sunset }: SunRiseSetPr
         label={isDay === null ? 'Daylight' : isDay ? 'Sunset' : 'Sunrise'}
       />
       <View className='flex-1 justify-between px-5 pb-4 pt-0'>
-        <Medium style={[{ fontSize: 28 }, theme.color]}>
+        <Medium style={[{ fontSize: 30 }, theme.color]}>
           {isDay === null
             ? '__:__'
             : isDay

src/utils/constants.ts

@@ -1,3 +1,5 @@
 export const ANIM_DUR = 150
 export const SCREEN_TRANSITION = 300
 export const WEATHER_CACHE_TIME = 1000 * 60 * 10 // 10 minutes
+
+export const GITHUB_REPO = 'https://github.com/codeAbinash/tech-triangle'