Add Skia screen and React icon; update navigation and icon exports

Author: codeAbinash

App.tsx

@@ -56,6 +56,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'
 
 function App(): React.JSX.Element {
   const scheme = useColorScheme()
@@ -158,6 +159,7 @@ export type RootStackParamList = {
   SJF: undefined
   Chart: ChartParamList
   Onboarding: undefined
+  Skia: undefined
 }
 
 const Stack = createStackNavigator<RootStackParamList>()
@@ -185,6 +187,7 @@ function Navigation() {
         <Stack.Screen name='Home' component={Home} options={SMOOTH_ANIMATION} />
         <Stack.Screen name='Test' component={Test} options={GestureEnabled} />
         <Stack.Screen name='AllUsers' component={AllUsers} options={GestureEnabled} />
+        <Stack.Screen name='Skia' component={Skia} options={GestureEnabled} />
         {/* <Stack.Screen name='Location' component={Location} /> */}
         {/* <Stack.Screen name='CompassAnimation' component={CompassAnimation} /> */}
         {/* <Stack.Screen name='ParallaxWallpaper' component={ParallaxWallpaper} /> */}

src/assets/icons/icons.ts

@@ -138,3 +138,4 @@ export { default as AngrySolidIcon } from '@icons/angry-solid-rounded.svg'
 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'

src/assets/icons/src/react-solid-rounded.svg

@@ -0,0 +1,47 @@
+import { Setting07SolidIcon } from '@assets/icons/icons'
+import { Gap12 } from '@components/Gap'
+import RoundedIcon from '@components/RoundedIcon'
+import SettGroup from '@components/Settings/SettGroup'
+import { SettOption } from '@components/Settings/SettOption'
+import SettText from '@components/Settings/SettText'
+import SettWrapper from '@components/Settings/SettWrapper'
+import { Canvas, Circle, Group } from '@shopify/react-native-skia'
+import type { NavProp } from '@utils/types'
+import { View } from 'react-native'
+
+const App = () => {
+  const width = 256
+  const height = 256
+  const r = width * 0.33
+  return (
+    <View className='items-center justify-center p-5'>
+      <Canvas style={{ width, height }}>
+        <Group blendMode='multiply'>
+          <Circle cx={r} cy={r} r={r} color='cyan' />
+          <Circle cx={width - r} cy={r} r={r} color='magenta' />
+          <Circle cx={width / 2} cy={width - r} r={r} color='yellow' />
+        </Group>
+      </Canvas>
+    </View>
+  )
+}
+
+export default function Skia({ navigation }: NavProp) {
+  return (
+    <SettWrapper navigation={navigation} title='Blank Settings'>
+      <Gap12>
+        <SettText className='mt-3'>Beginning Text</SettText>
+        <SettGroup title='Sample title'>
+          <SettOption
+            title='A blank setting'
+            Icon={<RoundedIcon Icon={Setting07SolidIcon} className='bg-slate-500' />}
+            arrow
+          />
+        </SettGroup>
+        <SettText>Sample text</SettText>
+      </Gap12>
+      <SettText>End Text</SettText>
+      <App />
+    </SettWrapper>
+  )
+}

src/screens/Example/Skia.tsx

@@ -12,6 +12,7 @@ import {
   MathSolidIcon,
   NeuralNetworkSolidIcon,
   PaintBoardSolidIcon,
+  ReactIcon,
   Setting07SolidIcon,
   SoftwareLicenseSolidIcon,
   TestTube01SolidIcon,
@@ -56,6 +57,7 @@ const tools: Group[] = [
     startText: 'Here are some tools related to computer science. You can try them out and see how they work.',
     title: 'Tools',
     tools: [
+      { title: 'RN Skia', Icon: ReactIcon, to: 'Skia', className: 'bg-blue-500' },
       { title: 'Your Age', Icon: Calendar03SolidIcon, to: 'YourAge', className: 'bg-rose-500' },
       { title: 'Random Color', Icon: PaintBoardSolidIcon, to: 'RandomColor', className: 'bg-orange-500' },
       { title: 'Gradient Colors', Icon: ColorsSolidIcon, className: 'bg-green-500' },