gib/Tech_Tracker_Expo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finish cleaning up code & using TailwindCSS

Browse Source
This commit is contained in:
Gabriel Brown 2024-08-05 10:57:09 -05:00
parent 9c08af78f8
commit 89ca581625
3 changed files with 62 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
README.md
View File

@ -1,50 +1,5 @@
# Welcome to your Expo app 👋 <img src="https://git.gibbyb.com/gib/Tech_Tracker_Web/raw/branch/master/public/images/tech_tracker_logo.png" alt="Tech Tracker Logo" width="50"/>
This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app). # Tech Tracker Native iOS Application
## Get started Only available to COG employees via Testflight.
1. Install dependencies
```bash
npm install
```
2. Start the app
```bash
npx expo start
```
In the output, you'll find options to open the app in a
- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
## Get a fresh project
When you're ready, run:
```bash
npm run reset-project
```
This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
## Learn more
To learn more about developing your project with Expo, look at the following resources:
- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
- [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.
## Join the community
Join our community of developers creating universal apps.
- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

94
app/(tabs)/explore.tsx
View File

@ -1,102 +1,88 @@
import Ionicons from '@expo/vector-icons/Ionicons'; import Ionicons from '@expo/vector-icons/Ionicons';
import { StyleSheet, Image, Platform } from 'react-native'; import { Image, Platform } from 'react-native';
import { Collapsible } from '@/components/Collapsible'; import { Collapsible } from '@/components/Collapsible';
import { ExternalLink } from '@/components/ExternalLink'; import { ExternalLink } from '@/components/ExternalLink';
import ParallaxScrollView from '@/components/ParallaxScrollView'; import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText'; import { Text, View } from 'react-native';
import { ThemedView } from '@/components/ThemedView';
export default function TabTwoScreen() { export default function TabTwoScreen() {
return ( return (
<ParallaxScrollView <ParallaxScrollView
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }} headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
headerImage={<Ionicons size={310} name="code-slash" style={styles.headerImage} />}> headerImage={<Ionicons size={310} name="code-slash" className='bottom-24 left-9 absolute' />}>
<ThemedView style={styles.titleContainer}> <View className="flex flex-row gap-2">
<ThemedText type="title">Explore</ThemedText> <Text>Explore</Text>
</ThemedView> </View>
<ThemedText>This app includes example code to help you get started.</ThemedText> <Text>This app includes example code to help you get started.</Text>
<Collapsible title="File-based routing"> <Collapsible title="File-based routing">
<ThemedText> <Text>
This app has two screens:{' '} This app has two screens:{' '}
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '} <Text>app/(tabs)/index.tsx</Text> and{' '}
<ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText> <Text>app/(tabs)/explore.tsx</Text>
</ThemedText> </Text>
<ThemedText> <Text>
The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '} The layout file in <Text>app/(tabs)/_layout.tsx</Text>{' '}
sets up the tab navigator. sets up the tab navigator.
</ThemedText> </Text>
<ExternalLink href="https://docs.expo.dev/router/introduction"> <ExternalLink href="https://docs.expo.dev/router/introduction">
<ThemedText type="link">Learn more</ThemedText> <Text>Learn more</Text>
</ExternalLink> </ExternalLink>
</Collapsible> </Collapsible>
<Collapsible title="Android, iOS, and web support"> <Collapsible title="Android, iOS, and web support">
<ThemedText> <Text>
You can open this project on Android, iOS, and the web. To open the web version, press{' '} You can open this project on Android, iOS, and the web. To open the web version, press{' '}
<ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project. <Text>w</Text> in the terminal running this project.
</ThemedText> </Text>
</Collapsible> </Collapsible>
<Collapsible title="Images"> <Collapsible title="Images">
<ThemedText> <Text>
For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '} For static images, you can use the <Text>@2x</Text> and{' '}
<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for <Text>@3x</Text> suffixes to provide files for
different screen densities different screen densities
</ThemedText> </Text>
<Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} /> <Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
<ExternalLink href="https://reactnative.dev/docs/images"> <ExternalLink href="https://reactnative.dev/docs/images">
<ThemedText type="link">Learn more</ThemedText> <Text>Learn more</Text>
</ExternalLink> </ExternalLink>
</Collapsible> </Collapsible>
<Collapsible title="Custom fonts"> <Collapsible title="Custom fonts">
<ThemedText> <Text>
Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '} Open <Text>app/_layout.tsx</Text> to see how to load{' '}
<ThemedText style={{ fontFamily: 'SpaceMono' }}> <Text style={{ fontFamily: 'SpaceMono' }}>
custom fonts such as this one. custom fonts such as this one.
</ThemedText> </Text>
</ThemedText> </Text>
<ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font"> <ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font">
<ThemedText type="link">Learn more</ThemedText> <Text>Learn more</Text>
</ExternalLink> </ExternalLink>
</Collapsible> </Collapsible>
<Collapsible title="Light and dark mode components"> <Collapsible title="Light and dark mode components">
<ThemedText> <Text>
This template has light and dark mode support. The{' '} This template has light and dark mode support. The{' '}
<ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect <Text>useColorScheme()</Text> hook lets you inspect
what the user's current color scheme is, and so you can adjust UI colors accordingly. what the user's current color scheme is, and so you can adjust UI colors accordingly.
</ThemedText> </Text>
<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/"> <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
<ThemedText type="link">Learn more</ThemedText> <Text>Learn more</Text>
</ExternalLink> </ExternalLink>
</Collapsible> </Collapsible>
<Collapsible title="Animations"> <Collapsible title="Animations">
<ThemedText> <Text>
This template includes an example of an animated component. The{' '} This template includes an example of an animated component. The{' '}
<ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses <Text>components/HelloWave.tsx</Text> component uses
the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText> library the powerful <Text>react-native-reanimated</Text> library
to create a waving hand animation. to create a waving hand animation.
</ThemedText> </Text>
{Platform.select({ {Platform.select({
ios: ( ios: (
<ThemedText> <Text>
The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '} The <Text>components/ParallaxScrollView.tsx</Text>{' '}
component provides a parallax effect for the header image. component provides a parallax effect for the header image.
</ThemedText> </Text>
), ),
})} })}
</Collapsible> </Collapsible>
</ParallaxScrollView> </ParallaxScrollView>
); );
} }
const styles = StyleSheet.create({
headerImage: {
color: '#808080',
bottom: -90,
left: -35,
position: 'absolute',
},
titleContainer: {
flexDirection: 'row',
gap: 8,
},
});

37
package-lock.json generated
View File

@ -37,7 +37,7 @@
"jest": "^29.2.1", "jest": "^29.2.1",
"jest-expo": "~51.0.3", "jest-expo": "~51.0.3",
"react-test-renderer": "18.2.0", "react-test-renderer": "18.2.0",
"tailwindcss": "^3.3.2", "tailwindcss": "3.3.2",
"typescript": "~5.3.3" "typescript": "~5.3.3"
} }
}, },
@ -7825,13 +7825,13 @@
} }
}, },
"node_modules/babel-plugin-polyfill-corejs3": { "node_modules/babel-plugin-polyfill-corejs3": {
"version": "0.10.4", "version": "0.10.6",
"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.4.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz",
"integrity": "sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==", "integrity": "sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/helper-define-polyfill-provider": "^0.6.1", "@babel/helper-define-polyfill-provider": "^0.6.2",
"core-js-compat": "^3.36.1" "core-js-compat": "^3.38.0"
}, },
"peerDependencies": { "peerDependencies": {
"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
@ -8327,9 +8327,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001646", "version": "1.0.30001649",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001646.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001649.tgz",
"integrity": "sha512-dRg00gudiBDDTmUhClSdv3hqRfpbOnU28IpI1T6PBTLWa+kOj0681C8uML3PifYfREuBrVjDGhL3adYpBT6spw==", "integrity": "sha512-fJegqZZ0ZX8HOWr6rcafGr72+xcgJKI9oWfDW5DrD7ExUtgZC7a7R7ZYmZqplh7XDocFdGeIFn7roAxhOeYrPQ==",
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -8759,12 +8759,12 @@
} }
}, },
"node_modules/core-js-compat": { "node_modules/core-js-compat": {
"version": "3.37.1", "version": "3.38.0",
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.1.tgz", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.0.tgz",
"integrity": "sha512-9TNiImhKvQqSUkOvk/mMRZzOANTiEVC7WaBNhHcKM7x+/5E1l5NvsysR19zuDQScE8k+kfQXWRN3AtS/eOSHpg==", "integrity": "sha512-75LAicdLa4OJVwFxFbQR3NdnZjNgX6ILpVcVzcC4T2smerB5lELMrJQQQoWV6TiuC/vlaFqgU2tKQx9w5s0e0A==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"browserslist": "^4.23.0" "browserslist": "^4.23.3"
}, },
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
@ -18808,9 +18808,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/tailwindcss": { "node_modules/tailwindcss": {
"version": "3.4.7", "version": "3.3.2",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.7.tgz", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
"integrity": "sha512-rxWZbe87YJb4OcSopb7up2Ba4U82BoiSGUdoDr3Ydrg9ckxFS/YWsvhN323GMcddgU65QRy7JndC7ahhInhvlQ==", "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@alloc/quick-lru": "^5.2.0", "@alloc/quick-lru": "^5.2.0",
@ -18818,10 +18818,10 @@
"chokidar": "^3.5.3", "chokidar": "^3.5.3",
"didyoumean": "^1.2.2", "didyoumean": "^1.2.2",
"dlv": "^1.1.3", "dlv": "^1.1.3",
"fast-glob": "^3.3.0", "fast-glob": "^3.2.12",
"glob-parent": "^6.0.2", "glob-parent": "^6.0.2",
"is-glob": "^4.0.3", "is-glob": "^4.0.3",
"jiti": "^1.21.0", "jiti": "^1.18.2",
"lilconfig": "^2.1.0", "lilconfig": "^2.1.0",
"micromatch": "^4.0.5", "micromatch": "^4.0.5",
"normalize-path": "^3.0.0", "normalize-path": "^3.0.0",
@ -18833,6 +18833,7 @@
"postcss-load-config": "^4.0.1", "postcss-load-config": "^4.0.1",
"postcss-nested": "^6.0.1", "postcss-nested": "^6.0.1",
"postcss-selector-parser": "^6.0.11", "postcss-selector-parser": "^6.0.11",
"postcss-value-parser": "^4.2.0",
"resolve": "^1.22.2", "resolve": "^1.22.2",
"sucrase": "^3.32.0" "sucrase": "^3.32.0"
}, },