refactor: Remove navigation prop from SettWrapper in multiple components for consistency

Author: codeAbinash

.github/copilot-instructions.md

@@ -3,6 +3,6 @@
 - Do not add unnecessary comments for my understanding.
 
 - Icons are used from hugeicons if you want to add extra icons to the library, you can add it running `ic-old iconName` command.
-`iconName` is from the hugeicons website.
+  `iconName` is from the hugeicons website.
 
-- No need to fix formatting related issues.
+- No need to fix formatting related issues.

src/components/RoundNotification.tsx

@@ -5,7 +5,7 @@ export default function RoundNotification({ n }: { n: number }) {
   if (n === 0) return null
   return (
     <View className='items-center justify-center rounded-full bg-red-500' style={{ height: 22, width: 22 }}>
-      <SemiBold className='text-xs text-white pt-0.5' numberOfLines={1}>
+      <SemiBold className='pt-0.5 text-xs text-white' numberOfLines={1}>
         {n}
       </SemiBold>
     </View>

src/components/Settings/SettWrapper.tsx

@@ -3,16 +3,17 @@ import { Gap20 } from '@components/Gap'
 import KeyboardAvoid from '@components/KeyboardAvoid'
 import { PaddingBottom } from '@components/SafePadding'
 import { AutoStatusBar } from '@components/StatusBar'
+import { useNavigation } from '@react-navigation/native'
 import { StackNav } from '@utils/types'
 import React from 'react'
 import { ScrollViewProps, useColorScheme, View } from 'react-native'
 
 type SettWrapperProps = ScrollViewProps & {
   Header?: React.ReactNode
   title?: string
-  navigation?: StackNav
 }
-export default function SettWrapper({ Header, title, navigation, children, ...rest }: SettWrapperProps) {
+export default function SettWrapper({ Header, title, children, ...rest }: SettWrapperProps) {
+  const navigation = useNavigation<StackNav>()
   const scheme = useColorScheme()
   return (
     <View className='bg flex-1'>

src/screens/CoordinateNotes/CoordinateNote.tsx

@@ -77,7 +77,7 @@ export default function CoordinateNote({ navigation, route }: CoordinateNoteProp
 
   return (
     <>
-      <SettWrapper navigation={navigation} title={name || 'Location Note'}>
+      <SettWrapper title={name || 'Location Note'}>
         <Gap12 className='mt-3'>
           <SettGroup title='Location Name'>
             <Input

src/screens/CoordinateNotes/CoordinateNotes.tsx

@@ -18,7 +18,7 @@ export default function CoordinateNotes({ navigation }: NavProp) {
   const notes = coordinateNotesStore((state) => state.notes)
   return (
     <>
-      <SettWrapper navigation={navigation} title='Coordinate Notes'>
+      <SettWrapper title='Coordinate Notes'>
         <NoNotes notes={notes} />
         <NotesList notes={notes} />
       </SettWrapper>

src/screens/CoordinateNotes/LocationTags.tsx

@@ -10,8 +10,10 @@ export default function LocationTags() {
       <StatusBar barStyle='default' />
       <AppBar />
       <ScrollView contentContainerClassName='p-5 flex-1 justify-center items-center'>
-        <Bold className='text-3xl text text-center'>Coming Soon!</Bold>
-        <Medium className='text opacity-80 text-base mt-3 text-center'>This feature is currently under development. Stay tuned for updates!</Medium>
+        <Bold className='text text-center text-3xl'>Coming Soon!</Bold>
+        <Medium className='text mt-3 text-center text-base opacity-80'>
+          This feature is currently under development. Stay tuned for updates!
+        </Medium>
         <PaddingBottom />
       </ScrollView>
     </View>

src/screens/DeveloperOptions/DeveloperOptions.tsx

@@ -67,7 +67,7 @@ export default function DeveloperOptions({ navigation }: NavProp) {
   }
 
   return (
-    <SettWrapper title='Developer Options' navigation={navigation}>
+    <SettWrapper title='Developer Options'>
       <Gap12>
         <SettGroup>
           <SettOption

src/screens/DeveloperOptions/MMKVDataEditor.tsx

@@ -72,7 +72,6 @@ export default function MMKVDataEditor({
   return (
     <>
       <SettWrapper
-        navigation={navigation}
         title={isNew ? (key ? key : 'New MMKV data') : key}
         Header={
           <BackHeader

src/screens/DeveloperOptions/MMKVDataList.tsx

@@ -49,7 +49,6 @@ export default function MMKVDataList({ navigation }: NavProp) {
   return (
     <>
       <SettWrapper
-        navigation={navigation}
         Header={
           <>
             <BackHeader title='MMKV data editor' navigation={navigation} />

src/screens/Example/Skia.tsx

@@ -28,7 +28,7 @@ const App = () => {
 
 export default function Skia({ navigation }: NavProp) {
   return (
-    <SettWrapper navigation={navigation} title='Blank Settings'>
+    <SettWrapper title='Blank Settings'>
       <Gap12>
         <SettText className='mt-3'>Beginning Text</SettText>
         <SettGroup title='Sample title'>

src/screens/OS/FCFS.tsx

@@ -55,7 +55,7 @@ export default function FCFS({ navigation }: NavProp) {
 
   return (
     <>
-      <SettWrapper navigation={navigation} title='FCFS Process Scheduling'>
+      <SettWrapper title='FCFS Process Scheduling'>
         <Gap12 className='pb-8'>
           <SettText className='mt-3'>
             FCFS (First Come First Serve) is a scheduling algorithm that schedules according to the arrival time of the

src/screens/OS/SJF.tsx

@@ -55,7 +55,7 @@ export default function SJF({ navigation }: NavProp) {
 
   return (
     <>
-      <SettWrapper navigation={navigation} title='SJF Process Scheduling'>
+      <SettWrapper title='SJF Process Scheduling'>
         <Gap12 className='pb-8'>
           <SettText className='mt-3'>
             SJF (Shortest Job First) is a scheduling algorithm that selects the process with the smallest burst time.

src/screens/Settings/Admin/EditVersion.tsx

@@ -110,7 +110,7 @@ export default function EditVersion({ navigation }: NavProp) {
   }, [version])
 
   return (
-    <SettWrapper navigation={navigation} title='Edit Version'>
+    <SettWrapper title='Edit Version'>
       <Gap12>
         <View>
           <SettText className='mt-3'>

src/screens/Settings/Admin/Users/AllUsers.tsx

@@ -38,7 +38,6 @@ export default function AllUsers({ navigation }: NavProp) {
 
   return (
     <SettWrapper
-      navigation={navigation}
       Header={
         <>
           <BackHeader title='All users' navigation={navigation} />

src/screens/Settings/Admin/Users/User.tsx

@@ -58,7 +58,7 @@ export default function User({ navigation, route }: { navigation: StackNav; rout
   }
 
   return (
-    <SettWrapper navigation={navigation} title={username}>
+    <SettWrapper title={username}>
       <Gap gap={10}>
         <SettText className='mt-3'>You can see all details of the user here.</SettText>
         <SettGroup title='Full Name'>

src/screens/Settings/AppLock/AppLock.tsx

@@ -35,7 +35,7 @@ export default function AppLock({ navigation }: NavProp) {
   }, [isAppLockEnabled])
 
   return (
-    <SettWrapper navigation={navigation} title='App Lock'>
+    <SettWrapper title='App Lock'>
       <Gap12>
         <SettText className='mt-3 text-blue-500'>This feature will be available in the next release. CodeAntu</SettText>
         <SettGroup title='App Lock Settings'>

src/screens/Settings/BackupAndRestore.tsx

@@ -5,7 +5,7 @@ import type { NavProp } from '@utils/types'
 
 export default function BackupAndRestore({ navigation }: NavProp) {
   return (
-    <SettWrapper navigation={navigation} title='Backup and Restore'>
+    <SettWrapper title='Backup and Restore'>
       <Gap12>
         <SettText className='mt-3'>In this section, you can backup and restore your data.</SettText>
       </Gap12>

src/screens/Settings/BlankSettings.tsx

@@ -9,7 +9,7 @@ import type { NavProp } from '@utils/types'
 
 export default function BlankSettings({ navigation }: NavProp) {
   return (
-    <SettWrapper navigation={navigation} title='Blank Settings'>
+    <SettWrapper title='Blank Settings'>
       <Gap12>
         <SettText className='mt-3'>Beginning Text</SettText>
         <SettGroup title='Sample title'>

src/screens/Settings/Devices/Device.tsx

@@ -90,7 +90,7 @@ export default function Device({ navigation, route }: { navigation: StackNav; ro
           <Medium className='mt-10 text-center text-2xl text-white'>Device</Medium>
         </View>
       </View> */}
-      <SettWrapper title={device?.name || 'Unknown Device'} navigation={navigation}>
+      <SettWrapper title={device?.name || 'Unknown Device'}>
         <Gap gap={15}>
           <SettText className='mt-3'>If you cannot identify this device, you can remove it from the list.</SettText>
           <SettGroup title='Device' className='pb-4'>

src/screens/Settings/Devices/Devices.tsx

@@ -50,7 +50,7 @@ export default function Devices({ navigation }: NavProp) {
   }
 
   return (
-    <SettWrapper title='Devices' navigation={navigation}>
+    <SettWrapper title='Devices'>
       <Gap12>
         <SettText className='mt-3'>You can remove unwanted devices from the list.</SettText>
         <SettGroup title='This Device'>

src/screens/Settings/ManageStorage.tsx

@@ -23,7 +23,7 @@ const colors = [
 
 export default function ManageStorage({ navigation }: NavProp) {
   return (
-    <SettWrapper navigation={navigation} title='Manage Storage'>
+    <SettWrapper title='Manage Storage'>
       <Gap12>
         <SettText className='mt-3'>
           Manage different types of storage in the app. This screen is under development.

src/screens/Settings/UiAndComponents.tsx

@@ -44,7 +44,7 @@ export default function UiAndComponents({ navigation }: NavProp) {
   }, [option1])
 
   return (
-    <SettWrapper navigation={navigation} title='UI & Components'>
+    <SettWrapper title='UI & Components'>
       <>
         <Gap12>
           <SettText className='mt-3'>This is a test screen to show the different settings components</SettText>

src/screens/Settings/YourProfile.tsx

@@ -37,7 +37,7 @@ export default function YourProfile({ navigation }: NavProp) {
   const setGender = profileStore((s) => s.setGender)
 
   return (
-    <SettWrapper navigation={navigation} title='Your Profile'>
+    <SettWrapper title='Your Profile'>
       <Gap12>
         <SettText className='mt-3'>Enter your details below to get the best experience from the app.</SettText>
         <SettGroup title='First and Last Name'>

src/screens/Test.tsx

@@ -7,7 +7,7 @@ import type { NavProp } from '@utils/types'
 export default function Test({ navigation }: NavProp) {
   return (
     <>
-      <SettWrapper navigation={navigation} title='Test Screen'>
+      <SettWrapper title='Test Screen'>
         <SettText className='mt-5'>This is a test screen</SettText>
         <SettGroup title='Normal Input'>
           <Input placeholder='Test Input' />

src/screens/Try/RandomPassword.tsx

@@ -13,7 +13,7 @@ import { Colors } from '@utils/colors'
 import { W } from '@utils/dimensions'
 import { Medium, SemiBold } from '@utils/fonts'
 import type { NavProp } from '@utils/types'
-import React, { memo, useCallback, useEffect, useState } from 'react'
+import React, { memo, useCallback, useEffect, useState, JSX } from 'react'
 import { ToastAndroid, TouchableOpacity, View } from 'react-native'
 
 const MAX = 50
@@ -55,7 +55,7 @@ export default function RandomPassword({ navigation }: NavProp) {
     )
   }, [len, lowercase, numerical, special, uppercase])
   return (
-    <SettWrapper navigation={navigation} title='Random Password'>
+    <SettWrapper title='Random Password'>
       <Gap12>
         <Lottie source={Animations.lock} style={{ marginTop: 20, width: W * 0.5, height: W * 0.5 }} />
         <SettText>Here you will set some options to generate a random password</SettText>

src/screens/Try/YourAge.tsx

@@ -33,7 +33,7 @@ export default function YourAge({ navigation }: NavProp) {
 
   useEffect(() => getAge(), [birthDay, getAge])
   return (
-    <SettWrapper navigation={navigation} title='Your Age'>
+    <SettWrapper title='Your Age'>
       <Gap12>
         <SettText className='mt-3'>Here you can see your age in years, months, days etc.</SettText>
         <Medium className='mt-6 text-center text-3xl text-black/70 dark:text-white/70'>{second}s</Medium>

src/screens/Update/Update.tsx

@@ -43,7 +43,6 @@ export default function Update({ navigation, route }: { navigation: StackNav; ro
 
   return (
     <SettWrapper
-      navigation={navigation}
       title='App Update'
       Header={<BackHeader title='App Update' navigation={navigation} onBackPress={cannotSkipBack} />}
     >

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

@@ -7,7 +7,7 @@ import { Icons } from '@screens/Weather/utils'
 import { F, Medium, Regular } from '@utils/fonts'
 import type { Theme } from '@utils/types'
 import { getDay, tempConverter } from '@utils/utils'
-import React, { useMemo } from 'react'
+import React, { JSX, useMemo } from 'react'
 import { View } from 'react-native'
 import Animated, { FadeIn } from 'react-native-reanimated'
 import WeatherLabel, { Underline } from './WeatherLabel'

src/screens/Weather/Settings/AtmPressureUnit.tsx

@@ -11,7 +11,7 @@ export default function AtmPressureUnit({ navigation }: NavProp) {
   const atmPressureUnit = weatherStore((state) => state.atmPressureUnit)
   const setAtmPressureUnit = weatherStore((state) => state.setAtmPressureUnit)
   return (
-    <SettWrapper navigation={navigation} title='Atmospheric Pressure Unit'>
+    <SettWrapper title='Atmospheric Pressure Unit'>
       <Gap12>
         <SettText className='mt-3'>Select the unit of atmospheric pressure you want to use.</SettText>
         <SettGroup>

src/screens/Weather/Settings/DistanceUnit.tsx

@@ -13,7 +13,7 @@ export default function DistanceUnit({ navigation }: NavProp) {
   const distanceUnit = weatherStore((state) => state.distanceUnit)
   const setDistUnit = weatherStore((state) => state.setDistanceUnit)
   return (
-    <SettWrapper navigation={navigation} title='Distance Unit'>
+    <SettWrapper title='Distance Unit'>
       <Gap12>
         <SettText className='mt-3'>Select the unit of distance you want to use.</SettText>
         <SettGroup>

src/screens/Weather/Settings/TempUnit.tsx

@@ -13,7 +13,7 @@ export default function TempUnit({ navigation }: NavProp) {
   const temperatureUnit = weatherStore((state) => state.temperatureUnit)
   const setTmpUnit = weatherStore((state) => state.setTemperatureUnit)
   return (
-    <SettWrapper navigation={navigation} title='Temperature Unit'>
+    <SettWrapper title='Temperature Unit'>
       <Gap12>
         <SettText className='mt-3'>Select the unit of temperature you want to use.</SettText>
         <SettGroup>

src/screens/Weather/Settings/TimeFormatUnit.tsx

@@ -13,7 +13,7 @@ export default function TimeFormatUnit({ navigation }: NavProp) {
   const timeFormatUnit = weatherStore((state) => state.weatherTimeFormat)
   const setWeatherTimeFormat = weatherStore((state) => state.setWeatherTimeFormat)
   return (
-    <SettWrapper navigation={navigation} title='Time Format Unit'>
+    <SettWrapper title='Time Format Unit'>
       <Gap12>
         <SettText className='mt-3'>Choose between 12 hour and 24 hour time format</SettText>
         <SettGroup>

src/screens/Weather/Settings/WeatherSettings.tsx

@@ -75,7 +75,7 @@ export default function WeatherScienceSettings({ navigation }: NavProp) {
   }, [focused])
 
   return (
-    <SettWrapper navigation={navigation} title='Weather Settings'>
+    <SettWrapper title='Weather Settings'>
       <Gap12>
         <SettText className='mt-3'>Customize the weather settings to your preference.</SettText>
         <SettGroup title='General Settings'>

src/screens/Weather/Settings/WindSpeedUnit.tsx

@@ -19,7 +19,7 @@ export default function WindSpeedUnit({ navigation }: NavProp) {
   const windSpeedUnit = weatherStore((state) => state.windSpeedUnit)
   const setWindSpeedUnit = weatherStore((state) => state.setWindSpeedUnit)
   return (
-    <SettWrapper navigation={navigation} title='Wind Speed Unit'>
+    <SettWrapper title='Wind Speed Unit'>
       <Gap12>
         <SettText className='mt-3'>Select the unit of wind speed you want to use.</SettText>
         <SettGroup>

src/screens/randomPasswordGenerator/randomPasswordGenerator.tsx

@@ -62,7 +62,7 @@ export default function randomPasswordGenerator({ navigation }: NavProp) {
   }
 
   return (
-    <SettWrapper navigation={navigation} title='Blank Settings'>
+    <SettWrapper title='Blank Settings'>
       <Gap12>
         <SettText className='mt-3'>Beginning Text</SettText>
         <SettGroup title='Sample title'>