commit 96fa01c3d9e56b5f807e3381d3ae839099dd4a11 · gmstn.systems/gemstone-app

+43

.gitignore

···

       1
       1
       +
       # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files

     

       2
       2
       +
       

     

       3
       3
       +
       # dependencies

     

       4
       4
       +
       node_modules/

     

       5
       5
       +
       

     

       6
       6
       +
       # Expo

     

       7
       7
       +
       .expo/

     

       8
       8
       +
       dist/

     

       9
       9
       +
       web-build/

     

       10
       10
       +
       expo-env.d.ts

     

       11
       11
       +
       

     

       12
       12
       +
       # Native

     

       13
       13
       +
       .kotlin/

     

       14
       14
       +
       *.orig.*

     

       15
       15
       +
       *.jks

     

       16
       16
       +
       *.p8

     

       17
       17
       +
       *.p12

     

       18
       18
       +
       *.key

     

       19
       19
       +
       *.mobileprovision

     

       20
       20
       +
       

     

       21
       21
       +
       # Metro

     

       22
       22
       +
       .metro-health-check*

     

       23
       23
       +
       

     

       24
       24
       +
       # debug

     

       25
       25
       +
       npm-debug.*

     

       26
       26
       +
       yarn-debug.*

     

       27
       27
       +
       yarn-error.*

     

       28
       28
       +
       

     

       29
       29
       +
       # macOS

     

       30
       30
       +
       .DS_Store

     

       31
       31
       +
       *.pem

     

       32
       32
       +
       

     

       33
       33
       +
       # local env files

     

       34
       34
       +
       .env*.local

     

       35
       35
       +
       

     

       36
       36
       +
       # typescript

     

       37
       37
       +
       *.tsbuildinfo

     

       38
       38
       +
       

     

       39
       39
       +
       app-example

     

       40
       40
       +
       

     

       41
       41
       +
       # generated native folders

     

       42
       42
       +
       /ios

     

       43
       43
       +
       /android

.vscode/extensions.json

···

       1
       1
       +
       { "recommendations": ["expo.vscode-expo-tools"] }

.vscode/settings.json

···

       1
       1
       +
       {

     

       2
       2
       +
         "editor.codeActionsOnSave": {

     

       3
       3
       +
           "source.fixAll": "explicit",

     

       4
       4
       +
           "source.organizeImports": "explicit",

     

       5
       5
       +
           "source.sortMembers": "explicit"

     

       6
       6
       +
         }

     

       7
       7
       +
       }

+50

README.md

···

       1
       1
       +
       # Welcome to your Expo app 👋

     

       2
       2
       +
       

     

       3
       3
       +
       This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).

     

       4
       4
       +
       

     

       5
       5
       +
       ## Get started

     

       6
       6
       +
       

     

       7
       7
       +
       1. Install dependencies

     

       8
       8
       +
       

     

       9
       9
       +
          ```bash

     

       10
       10
       +
          npm install

     

       11
       11
       +
          ```

     

       12
       12
       +
       

     

       13
       13
       +
       2. Start the app

     

       14
       14
       +
       

     

       15
       15
       +
          ```bash

     

       16
       16
       +
          npx expo start

     

       17
       17
       +
          ```

     

       18
       18
       +
       

     

       19
       19
       +
       In the output, you'll find options to open the app in a

     

       20
       20
       +
       

     

       21
       21
       +
       - [development build](https://docs.expo.dev/develop/development-builds/introduction/)

     

       22
       22
       +
       - [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)

     

       23
       23
       +
       - [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)

     

       24
       24
       +
       - [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo

     

       25
       25
       +
       

     

       26
       26
       +
       You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).

     

       27
       27
       +
       

     

       28
       28
       +
       ## Get a fresh project

     

       29
       29
       +
       

     

       30
       30
       +
       When you're ready, run:

     

       31
       31
       +
       

     

       32
       32
       +
       ```bash

     

       33
       33
       +
       npm run reset-project

     

       34
       34
       +
       ```

     

       35
       35
       +
       

     

       36
       36
       +
       This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.

     

       37
       37
       +
       

     

       38
       38
       +
       ## Learn more

     

       39
       39
       +
       

     

       40
       40
       +
       To learn more about developing your project with Expo, look at the following resources:

     

       41
       41
       +
       

     

       42
       42
       +
       - [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).

     

       43
       43
       +
       - [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.

     

       44
       44
       +
       

     

       45
       45
       +
       ## Join the community

     

       46
       46
       +
       

     

       47
       47
       +
       Join our community of developers creating universal apps.

     

       48
       48
       +
       

     

       49
       49
       +
       - [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.

     

       50
       50
       +
       - [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

+48

app.json

···

       1
       1
       +
       {

     

       2
       2
       +
         "expo": {

     

       3
       3
       +
           "name": "gemstone-app",

     

       4
       4
       +
           "slug": "gemstone-app",

     

       5
       5
       +
           "version": "1.0.0",

     

       6
       6
       +
           "orientation": "portrait",

     

       7
       7
       +
           "icon": "./assets/images/icon.png",

     

       8
       8
       +
           "scheme": "gemstoneapp",

     

       9
       9
       +
           "userInterfaceStyle": "automatic",

     

       10
       10
       +
           "newArchEnabled": true,

     

       11
       11
       +
           "ios": {

     

       12
       12
       +
             "supportsTablet": true

     

       13
       13
       +
           },

     

       14
       14
       +
           "android": {

     

       15
       15
       +
             "adaptiveIcon": {

     

       16
       16
       +
               "backgroundColor": "#E6F4FE",

     

       17
       17
       +
               "foregroundImage": "./assets/images/android-icon-foreground.png",

     

       18
       18
       +
               "backgroundImage": "./assets/images/android-icon-background.png",

     

       19
       19
       +
               "monochromeImage": "./assets/images/android-icon-monochrome.png"

     

       20
       20
       +
             },

     

       21
       21
       +
             "edgeToEdgeEnabled": true,

     

       22
       22
       +
             "predictiveBackGestureEnabled": false

     

       23
       23
       +
           },

     

       24
       24
       +
           "web": {

     

       25
       25
       +
             "output": "static",

     

       26
       26
       +
             "favicon": "./assets/images/favicon.png"

     

       27
       27
       +
           },

     

       28
       28
       +
           "plugins": [

     

       29
       29
       +
             "expo-router",

     

       30
       30
       +
             [

     

       31
       31
       +
               "expo-splash-screen",

     

       32
       32
       +
               {

     

       33
       33
       +
                 "image": "./assets/images/splash-icon.png",

     

       34
       34
       +
                 "imageWidth": 200,

     

       35
       35
       +
                 "resizeMode": "contain",

     

       36
       36
       +
                 "backgroundColor": "#ffffff",

     

       37
       37
       +
                 "dark": {

     

       38
       38
       +
                   "backgroundColor": "#000000"

     

       39
       39
       +
                 }

     

       40
       40
       +
               }

     

       41
       41
       +
             ]

     

       42
       42
       +
           ],

     

       43
       43
       +
           "experiments": {

     

       44
       44
       +
             "typedRoutes": true,

     

       45
       45
       +
             "reactCompiler": true

     

       46
       46
       +
           }

     

       47
       47
       +
         }

     

       48
       48
       +
       }

+35

app/(tabs)/_layout.tsx

···

       1
       1
       +
       import { Tabs } from 'expo-router';

     

       2
       2
       +
       import React from 'react';

     

       3
       3
       +
       

     

       4
       4
       +
       import { HapticTab } from '@/components/haptic-tab';

     

       5
       5
       +
       import { IconSymbol } from '@/components/ui/icon-symbol';

     

       6
       6
       +
       import { Colors } from '@/constants/theme';

     

       7
       7
       +
       import { useColorScheme } from '@/hooks/use-color-scheme';

     

       8
       8
       +
       

     

       9
       9
       +
       export default function TabLayout() {

     

       10
       10
       +
         const colorScheme = useColorScheme();

     

       11
       11
       +
       

     

       12
       12
       +
         return (

     

       13
       13
       +
           <Tabs

     

       14
       14
       +
             screenOptions={{

     

       15
       15
       +
               tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,

     

       16
       16
       +
               headerShown: false,

     

       17
       17
       +
               tabBarButton: HapticTab,

     

       18
       18
       +
             }}>

     

       19
       19
       +
             <Tabs.Screen

     

       20
       20
       +
               name="index"

     

       21
       21
       +
               options={{

     

       22
       22
       +
                 title: 'Home',

     

       23
       23
       +
                 tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,

     

       24
       24
       +
               }}

     

       25
       25
       +
             />

     

       26
       26
       +
             <Tabs.Screen

     

       27
       27
       +
               name="explore"

     

       28
       28
       +
               options={{

     

       29
       29
       +
                 title: 'Explore',

     

       30
       30
       +
                 tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,

     

       31
       31
       +
               }}

     

       32
       32
       +
             />

     

       33
       33
       +
           </Tabs>

     

       34
       34
       +
         );

     

       35
       35
       +
       }

+112

app/(tabs)/explore.tsx

···

       1
       1
       +
       import { Image } from 'expo-image';

     

       2
       2
       +
       import { Platform, StyleSheet } from 'react-native';

     

       3
       3
       +
       

     

       4
       4
       +
       import { Collapsible } from '@/components/ui/collapsible';

     

       5
       5
       +
       import { ExternalLink } from '@/components/external-link';

     

       6
       6
       +
       import ParallaxScrollView from '@/components/parallax-scroll-view';

     

       7
       7
       +
       import { ThemedText } from '@/components/themed-text';

     

       8
       8
       +
       import { ThemedView } from '@/components/themed-view';

     

       9
       9
       +
       import { IconSymbol } from '@/components/ui/icon-symbol';

     

       10
       10
       +
       import { Fonts } from '@/constants/theme';

     

       11
       11
       +
       

     

       12
       12
       +
       export default function TabTwoScreen() {

     

       13
       13
       +
         return (

     

       14
       14
       +
           <ParallaxScrollView

     

       15
       15
       +
             headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}

     

       16
       16
       +
             headerImage={

     

       17
       17
       +
               <IconSymbol

     

       18
       18
       +
                 size={310}

     

       19
       19
       +
                 color="#808080"

     

       20
       20
       +
                 name="chevron.left.forwardslash.chevron.right"

     

       21
       21
       +
                 style={styles.headerImage}

     

       22
       22
       +
               />

     

       23
       23
       +
             }>

     

       24
       24
       +
             <ThemedView style={styles.titleContainer}>

     

       25
       25
       +
               <ThemedText

     

       26
       26
       +
                 type="title"

     

       27
       27
       +
                 style={{

     

       28
       28
       +
                   fontFamily: Fonts.rounded,

     

       29
       29
       +
                 }}>

     

       30
       30
       +
                 Explore

     

       31
       31
       +
               </ThemedText>

     

       32
       32
       +
             </ThemedView>

     

       33
       33
       +
             <ThemedText>This app includes example code to help you get started.</ThemedText>

     

       34
       34
       +
             <Collapsible title="File-based routing">

     

       35
       35
       +
               <ThemedText>

     

       36
       36
       +
                 This app has two screens:{' '}

     

       37
       37
       +
                 <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}

     

       38
       38
       +
                 <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>

     

       39
       39
       +
               </ThemedText>

     

       40
       40
       +
               <ThemedText>

     

       41
       41
       +
                 The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}

     

       42
       42
       +
                 sets up the tab navigator.

     

       43
       43
       +
               </ThemedText>

     

       44
       44
       +
               <ExternalLink href="https://docs.expo.dev/router/introduction">

     

       45
       45
       +
                 <ThemedText type="link">Learn more</ThemedText>

     

       46
       46
       +
               </ExternalLink>

     

       47
       47
       +
             </Collapsible>

     

       48
       48
       +
             <Collapsible title="Android, iOS, and web support">

     

       49
       49
       +
               <ThemedText>

     

       50
       50
       +
                 You can open this project on Android, iOS, and the web. To open the web version, press{' '}

     

       51
       51
       +
                 <ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.

     

       52
       52
       +
               </ThemedText>

     

       53
       53
       +
             </Collapsible>

     

       54
       54
       +
             <Collapsible title="Images">

     

       55
       55
       +
               <ThemedText>

     

       56
       56
       +
                 For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}

     

       57
       57
       +
                 <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for

     

       58
       58
       +
                 different screen densities

     

       59
       59
       +
               </ThemedText>

     

       60
       60
       +
               <Image

     

       61
       61
       +
                 source={require('@/assets/images/react-logo.png')}

     

       62
       62
       +
                 style={{ width: 100, height: 100, alignSelf: 'center' }}

     

       63
       63
       +
               />

     

       64
       64
       +
               <ExternalLink href="https://reactnative.dev/docs/images">

     

       65
       65
       +
                 <ThemedText type="link">Learn more</ThemedText>

     

       66
       66
       +
               </ExternalLink>

     

       67
       67
       +
             </Collapsible>

     

       68
       68
       +
             <Collapsible title="Light and dark mode components">

     

       69
       69
       +
               <ThemedText>

     

       70
       70
       +
                 This template has light and dark mode support. The{' '}

     

       71
       71
       +
                 <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect

     

       72
       72
       +
                 what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.

     

       73
       73
       +
               </ThemedText>

     

       74
       74
       +
               <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">

     

       75
       75
       +
                 <ThemedText type="link">Learn more</ThemedText>

     

       76
       76
       +
               </ExternalLink>

     

       77
       77
       +
             </Collapsible>

     

       78
       78
       +
             <Collapsible title="Animations">

     

       79
       79
       +
               <ThemedText>

     

       80
       80
       +
                 This template includes an example of an animated component. The{' '}

     

       81
       81
       +
                 <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses

     

       82
       82
       +
                 the powerful{' '}

     

       83
       83
       +
                 <ThemedText type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>

     

       84
       84
       +
                   react-native-reanimated

     

       85
       85
       +
                 </ThemedText>{' '}

     

       86
       86
       +
                 library to create a waving hand animation.

     

       87
       87
       +
               </ThemedText>

     

       88
       88
       +
               {Platform.select({

     

       89
       89
       +
                 ios: (

     

       90
       90
       +
                   <ThemedText>

     

       91
       91
       +
                     The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}

     

       92
       92
       +
                     component provides a parallax effect for the header image.

     

       93
       93
       +
                   </ThemedText>

     

       94
       94
       +
                 ),

     

       95
       95
       +
               })}

     

       96
       96
       +
             </Collapsible>

     

       97
       97
       +
           </ParallaxScrollView>

     

       98
       98
       +
         );

     

       99
       99
       +
       }

     

       100
       100
       +
       

     

       101
       101
       +
       const styles = StyleSheet.create({

     

       102
       102
       +
         headerImage: {

     

       103
       103
       +
           color: '#808080',

     

       104
       104
       +
           bottom: -90,

     

       105
       105
       +
           left: -35,

     

       106
       106
       +
           position: 'absolute',

     

       107
       107
       +
         },

     

       108
       108
       +
         titleContainer: {

     

       109
       109
       +
           flexDirection: 'row',

     

       110
       110
       +
           gap: 8,

     

       111
       111
       +
         },

     

       112
       112
       +
       });

+98

app/(tabs)/index.tsx

···

       1
       1
       +
       import { Image } from 'expo-image';

     

       2
       2
       +
       import { Platform, StyleSheet } from 'react-native';

     

       3
       3
       +
       

     

       4
       4
       +
       import { HelloWave } from '@/components/hello-wave';

     

       5
       5
       +
       import ParallaxScrollView from '@/components/parallax-scroll-view';

     

       6
       6
       +
       import { ThemedText } from '@/components/themed-text';

     

       7
       7
       +
       import { ThemedView } from '@/components/themed-view';

     

       8
       8
       +
       import { Link } from 'expo-router';

     

       9
       9
       +
       

     

       10
       10
       +
       export default function HomeScreen() {

     

       11
       11
       +
         return (

     

       12
       12
       +
           <ParallaxScrollView

     

       13
       13
       +
             headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}

     

       14
       14
       +
             headerImage={

     

       15
       15
       +
               <Image

     

       16
       16
       +
                 source={require('@/assets/images/partial-react-logo.png')}

     

       17
       17
       +
                 style={styles.reactLogo}

     

       18
       18
       +
               />

     

       19
       19
       +
             }>

     

       20
       20
       +
             <ThemedView style={styles.titleContainer}>

     

       21
       21
       +
               <ThemedText type="title">Welcome!</ThemedText>

     

       22
       22
       +
               <HelloWave />

     

       23
       23
       +
             </ThemedView>

     

       24
       24
       +
             <ThemedView style={styles.stepContainer}>

     

       25
       25
       +
               <ThemedText type="subtitle">Step 1: Try it</ThemedText>

     

       26
       26
       +
               <ThemedText>

     

       27
       27
       +
                 Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.

     

       28
       28
       +
                 Press{' '}

     

       29
       29
       +
                 <ThemedText type="defaultSemiBold">

     

       30
       30
       +
                   {Platform.select({

     

       31
       31
       +
                     ios: 'cmd + d',

     

       32
       32
       +
                     android: 'cmd + m',

     

       33
       33
       +
                     web: 'F12',

     

       34
       34
       +
                   })}

     

       35
       35
       +
                 </ThemedText>{' '}

     

       36
       36
       +
                 to open developer tools.

     

       37
       37
       +
               </ThemedText>

     

       38
       38
       +
             </ThemedView>

     

       39
       39
       +
             <ThemedView style={styles.stepContainer}>

     

       40
       40
       +
               <Link href="/modal">

     

       41
       41
       +
                 <Link.Trigger>

     

       42
       42
       +
                   <ThemedText type="subtitle">Step 2: Explore</ThemedText>

     

       43
       43
       +
                 </Link.Trigger>

     

       44
       44
       +
                 <Link.Preview />

     

       45
       45
       +
                 <Link.Menu>

     

       46
       46
       +
                   <Link.MenuAction title="Action" icon="cube" onPress={() => alert('Action pressed')} />

     

       47
       47
       +
                   <Link.MenuAction

     

       48
       48
       +
                     title="Share"

     

       49
       49
       +
                     icon="square.and.arrow.up"

     

       50
       50
       +
                     onPress={() => alert('Share pressed')}

     

       51
       51
       +
                   />

     

       52
       52
       +
                   <Link.Menu title="More" icon="ellipsis">

     

       53
       53
       +
                     <Link.MenuAction

     

       54
       54
       +
                       title="Delete"

     

       55
       55
       +
                       icon="trash"

     

       56
       56
       +
                       destructive

     

       57
       57
       +
                       onPress={() => alert('Delete pressed')}

     

       58
       58
       +
                     />

     

       59
       59
       +
                   </Link.Menu>

     

       60
       60
       +
                 </Link.Menu>

     

       61
       61
       +
               </Link>

     

       62
       62
       +
       

     

       63
       63
       +
               <ThemedText>

     

       64
       64
       +
                 {`Tap the Explore tab to learn more about what's included in this starter app.`}

     

       65
       65
       +
               </ThemedText>

     

       66
       66
       +
             </ThemedView>

     

       67
       67
       +
             <ThemedView style={styles.stepContainer}>

     

       68
       68
       +
               <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>

     

       69
       69
       +
               <ThemedText>

     

       70
       70
       +
                 {`When you're ready, run `}

     

       71
       71
       +
                 <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}

     

       72
       72
       +
                 <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}

     

       73
       73
       +
                 <ThemedText type="defaultSemiBold">app</ThemedText> to{' '}

     

       74
       74
       +
                 <ThemedText type="defaultSemiBold">app-example</ThemedText>.

     

       75
       75
       +
               </ThemedText>

     

       76
       76
       +
             </ThemedView>

     

       77
       77
       +
           </ParallaxScrollView>

     

       78
       78
       +
         );

     

       79
       79
       +
       }

     

       80
       80
       +
       

     

       81
       81
       +
       const styles = StyleSheet.create({

     

       82
       82
       +
         titleContainer: {

     

       83
       83
       +
           flexDirection: 'row',

     

       84
       84
       +
           alignItems: 'center',

     

       85
       85
       +
           gap: 8,

     

       86
       86
       +
         },

     

       87
       87
       +
         stepContainer: {

     

       88
       88
       +
           gap: 8,

     

       89
       89
       +
           marginBottom: 8,

     

       90
       90
       +
         },

     

       91
       91
       +
         reactLogo: {

     

       92
       92
       +
           height: 178,

     

       93
       93
       +
           width: 290,

     

       94
       94
       +
           bottom: 0,

     

       95
       95
       +
           left: 0,

     

       96
       96
       +
           position: 'absolute',

     

       97
       97
       +
         },

     

       98
       98
       +
       });

+24

app/_layout.tsx

···

       1
       1
       +
       import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';

     

       2
       2
       +
       import { Stack } from 'expo-router';

     

       3
       3
       +
       import { StatusBar } from 'expo-status-bar';

     

       4
       4
       +
       import 'react-native-reanimated';

     

       5
       5
       +
       

     

       6
       6
       +
       import { useColorScheme } from '@/hooks/use-color-scheme';

     

       7
       7
       +
       

     

       8
       8
       +
       export const unstable_settings = {

     

       9
       9
       +
         anchor: '(tabs)',

     

       10
       10
       +
       };

     

       11
       11
       +
       

     

       12
       12
       +
       export default function RootLayout() {

     

       13
       13
       +
         const colorScheme = useColorScheme();

     

       14
       14
       +
       

     

       15
       15
       +
         return (

     

       16
       16
       +
           <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>

     

       17
       17
       +
             <Stack>

     

       18
       18
       +
               <Stack.Screen name="(tabs)" options={{ headerShown: false }} />

     

       19
       19
       +
               <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />

     

       20
       20
       +
             </Stack>

     

       21
       21
       +
             <StatusBar style="auto" />

     

       22
       22
       +
           </ThemeProvider>

     

       23
       23
       +
         );

     

       24
       24
       +
       }

assets/images/android-icon-background.png