feat: Add Coordinate Notes screens

Author: codeAbinash

App.tsx

@@ -7,11 +7,14 @@ import { queryClient } from '@query/index'
 import { NavigationContainer, useNavigation } from '@react-navigation/native'
 import { CardStyleInterpolators, createStackNavigator, type StackNavigationOptions } from '@react-navigation/stack'
 import ComputerScienceSettings from '@screens/ComputerScience/ComputerScienceSettings'
+import CoordinateNotes from '@screens/CoordinateNotes/CoordinateNotes'
 import DeveloperOptions from '@screens/DeveloperOptions/DeveloperOptions'
 import MMKVDataEditor, { type MMKVDataEditorParamList } from '@screens/DeveloperOptions/MMKVDataEditor'
 import MMKVDataList from '@screens/DeveloperOptions/MMKVDataList'
+import Skia from '@screens/Example/Skia'
 import Explore from '@screens/Explore/Explore'
 import Greeting from '@screens/Home/Greeting'
+import fabStyles from '@screens/Home/styles/fabStyles'
 import NotesWelcome from '@screens/Notes/NotesWelcome'
 import type { ChartParamList } from '@screens/OS/Chart'
 import Chart from '@screens/OS/Chart'
@@ -56,7 +59,7 @@ import { Dimensions, SafeAreaView, useColorScheme } from 'react-native'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'
 import './global.css'
-import Skia from '@screens/Example/Skia'
+import NewCoordinateNotes from '@screens/CoordinateNotes/NewCoordinateNotes'
 
 function App(): React.JSX.Element {
   const scheme = useColorScheme()
@@ -129,7 +132,6 @@ export type RootStackParamList = {
   MMKVDataList: undefined
   UiAndComponents: undefined
   BlankSettings: undefined
-  CoordinateNotes: undefined
   TempUnit: undefined
   DistanceUnit: undefined
   WindSpeedUnit: undefined
@@ -160,6 +162,8 @@ export type RootStackParamList = {
   Chart: ChartParamList
   Onboarding: undefined
   Skia: undefined
+  CoordinateNotes: undefined
+  NewCoordinateNotes: undefined
 }
 
 const Stack = createStackNavigator<RootStackParamList>()
@@ -258,6 +262,8 @@ function Navigation() {
         <Stack.Screen name='SJF' component={SJF} options={GestureEnabled} />
         <Stack.Screen name='Chart' component={Chart} options={IOS_BOTTOM_STYLE} />
         <Stack.Screen name='Onboarding' component={Onboarding} options={NO_ANIMATION} />
+        <Stack.Screen name='CoordinateNotes' component={CoordinateNotes} options={GestureEnabled} />
+        <Stack.Screen name='NewCoordinateNotes' component={NewCoordinateNotes} options={IOS_BOTTOM_STYLE} />
       </Stack.Navigator>
     </>
   )

src/assets/animations/animations.ts

@@ -3,6 +3,7 @@ const Animations = {
   'coming-soon': require('./lottie/coming-soon.lottie'),
   welcome: require('./lottie/welcome.lottie'),
   lock: require('./lottie/lock.lottie'),
+  location: require('./lottie/location.lottie'),
 }
 
 export default Animations

src/assets/animations/lottie/location.lottie

@@ -139,3 +139,9 @@ export { default as SmileSolidIcon } from '@icons/smile-solid-rounded.svg'
 export { default as PlaySolidIcon } from '@icons/play-solid-rounded.svg'
 export { default as ReloadIcon } from '@icons/reload-solid-rounded.svg'
 export { default as ReactIcon } from '@icons/react-solid-rounded.svg'
+export { default as LongitudeIcon } from '@icons/longitude-solid-rounded.svg'
+export { default as LatitudeIcon } from '@icons/latitude-solid-rounded.svg'
+export { default as DashboardSpeed02Icon } from '@icons/dashboard-speed-02-solid-rounded.svg'
+export { default as Rocket01Icon } from '@icons/rocket-01-solid-rounded.svg'
+export { default as EarthIcon } from '@icons/earth-solid-rounded.svg'
+export { default as Timer02Icon } from '@icons/timer-02-solid-rounded.svg'

src/assets/icons/icons.ts

@@ -0,0 +1,44 @@
+import { PlusSignSolidIcon } from '@assets/icons/icons'
+import Press from '@components/Press'
+import SettWrapper from '@components/Settings/SettWrapper'
+import { useNavigation } from '@react-navigation/native'
+import fabStyles from '@screens/Home/styles/fabStyles'
+import type { NavProp, StackNav } from '@utils/types'
+import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import NoNotes from './NoCoordinateNotes'
+
+export default function CoordinateNotes({ navigation }: NavProp) {
+  return (
+    <>
+      <SettWrapper navigation={navigation} title='Coordinate Notes'>
+        <NoNotes />
+      </SettWrapper>
+      <FabButton />
+    </>
+  )
+}
+
+export const FabButton = () => {
+  const navigation = useNavigation<StackNav>()
+  const bottom = useSafeAreaInsets().bottom
+
+  return (
+    <Animated.View
+      entering={ZoomIn.duration(200)}
+      exiting={ZoomOut.duration(200)}
+      className='absolute right-5 z-10'
+      style={{ bottom: bottom + 15 }}
+    >
+      <Press
+        style={fabStyles.fabShadow}
+        onPress={() => navigation.navigate('NewCoordinateNotes')}
+        activeOpacity={0.9}
+        activeScale={0.95}
+        className='items-center justify-center rounded-full bg-accent'
+      >
+        <PlusSignSolidIcon color={'white'} height={25} width={25} />
+      </Press>
+    </Animated.View>
+  )
+}