diff --git a/.gitignore b/.gitignore index ec8a36a..05f2cff 100644 --- a/.gitignore +++ b/.gitignore @@ -10,5 +10,756 @@ npm-debug.* *.orig.* web-build/ -# macOS +# Created by https://www.toptal.com/developers/gitignore/api/rider,visualstudio,reactnative,macos +# Edit at https://www.toptal.com/developers/gitignore?templates=rider,visualstudio,reactnative,macos + +### macOS ### +# General .DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + +### macOS Patch ### +# iCloud generated files +*.icloud + +### ReactNative ### +# React Native Stack Base + +.expo +__generated__ + +### ReactNative.Node Stack ### +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* +.pnpm-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) +web_modules/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional stylelint cache +.stylelintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variable files +.env +.env.development.local +.env.test.local +.env.production.local +.env.local + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# Next.js build output +.next +out + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and not Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# vuepress v2.x temp and cache directory +.temp + +# Docusaurus cache and generated files +.docusaurus + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Stores VSCode versions used for testing VSCode extensions +.vscode-test + +# yarn v2 +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* + +### ReactNative.macOS Stack ### +# General + +# Icon must end with two \r + +# Thumbnails + +# Files that might appear in the root of a volume + +# Directories potentially created on remote AFP share + +### ReactNative.Android Stack ### +# Gradle files +.gradle/ +build/ + +# Local configuration file (sdk path, etc) +local.properties + +# Log/OS Files + +# Android Studio generated files and folders +captures/ +.externalNativeBuild/ +.cxx/ +*.apk +output.json + +# IntelliJ +*.iml +.idea/ +misc.xml +deploymentTargetDropDown.xml +render.experimental.xml + +# Keystore files +*.jks +*.keystore + +# Google Services (e.g. APIs or Firebase) +google-services.json + +# Android Profiling +*.hprof + +### ReactNative.Xcode Stack ### +## User settings +xcuserdata/ + +## Xcode 8 and earlier +*.xcscmblueprint +*.xccheckout + +### ReactNative.Buck Stack ### +buck-out/ +.buckconfig.local +.buckd/ +.buckversion +.fakebuckversion + +### ReactNative.Gradle Stack ### +.gradle +**/build/ +!src/**/build/ + +# Ignore Gradle GUI config +gradle-app.setting + +# Avoid ignoring Gradle wrapper jar file (.jar files are usually ignored) +!gradle-wrapper.jar + +# Avoid ignore Gradle wrappper properties +!gradle-wrapper.properties + +# Cache of project +.gradletasknamecache + +# Eclipse Gradle plugin generated files +# Eclipse Core +.project +# JDT-specific (Eclipse Java Development Tools) +.classpath + +### ReactNative.Linux Stack ### +*~ + +# temporary files which can be created if a process still has a handle open of a deleted file +.fuse_hidden* + +# KDE directory preferences +.directory + +# Linux trash folder which might appear on any partition or disk +.Trash-* + +# .nfs files are created when an open file is removed but is still being accessed +.nfs* + +### Rider ### +# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider +# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 + +# User-specific stuff +.idea/**/workspace.xml +.idea/**/tasks.xml +.idea/**/usage.statistics.xml +.idea/**/dictionaries +.idea/**/shelf + +# AWS User-specific +.idea/**/aws.xml + +# Generated files +.idea/**/contentModel.xml + +# Sensitive or high-churn files +.idea/**/dataSources/ +.idea/**/dataSources.ids +.idea/**/dataSources.local.xml +.idea/**/sqlDataSources.xml +.idea/**/dynamic.xml +.idea/**/uiDesigner.xml +.idea/**/dbnavigator.xml + +# Gradle +.idea/**/gradle.xml +.idea/**/libraries + +# Gradle and Maven with auto-import +# When using Gradle or Maven with auto-import, you should exclude module files, +# since they will be recreated, and may cause churn. Uncomment if using +# auto-import. +# .idea/artifacts +# .idea/compiler.xml +# .idea/jarRepositories.xml +# .idea/modules.xml +# .idea/*.iml +# .idea/modules +# *.iml +# *.ipr + +# CMake +cmake-build-*/ + +# Mongo Explorer plugin +.idea/**/mongoSettings.xml + +# File-based project format +*.iws + +# IntelliJ +out/ + +# mpeltonen/sbt-idea plugin +.idea_modules/ + +# JIRA plugin +atlassian-ide-plugin.xml + +# Cursive Clojure plugin +.idea/replstate.xml + +# SonarLint plugin +.idea/sonarlint/ + +# Crashlytics plugin (for Android Studio and IntelliJ) +com_crashlytics_export_strings.xml +crashlytics.properties +crashlytics-build.properties +fabric.properties + +# Editor-based Rest Client +.idea/httpRequests + +# Android studio 3.1+ serialized cache file +.idea/caches/build_file_checksums.ser + +### VisualStudio ### +## Ignore Visual Studio temporary files, build results, and +## files generated by popular Visual Studio add-ons. +## +## Get latest from https://github.com/github/gitignore/blob/main/VisualStudio.gitignore + +# User-specific files +*.rsuser +*.suo +*.user +*.userosscache +*.sln.docstates + +# User-specific files (MonoDevelop/Xamarin Studio) +*.userprefs + +# Mono auto generated files +mono_crash.* + +# Build results +[Dd]ebug/ +[Dd]ebugPublic/ +[Rr]elease/ +[Rr]eleases/ +x64/ +x86/ +[Ww][Ii][Nn]32/ +[Aa][Rr][Mm]/ +[Aa][Rr][Mm]64/ +bld/ +[Bb]in/ +[Oo]bj/ +[Ll]og/ +[Ll]ogs/ + +# Visual Studio 2015/2017 cache/options directory +.vs/ +# Uncomment if you have tasks that create the project's static files in wwwroot +#wwwroot/ + +# Visual Studio 2017 auto generated files +Generated\ Files/ + +# MSTest test Results +[Tt]est[Rr]esult*/ +[Bb]uild[Ll]og.* + +# NUnit +*.VisualState.xml +TestResult.xml +nunit-*.xml + +# Build Results of an ATL Project +[Dd]ebugPS/ +[Rr]eleasePS/ +dlldata.c + +# Benchmark Results +BenchmarkDotNet.Artifacts/ + +# .NET Core +project.lock.json +project.fragment.lock.json +artifacts/ + +# ASP.NET Scaffolding +ScaffoldingReadMe.txt + +# StyleCop +StyleCopReport.xml + +# Files built by Visual Studio +*_i.c +*_p.c +*_h.h +*.ilk +*.meta +*.obj +*.iobj +*.pch +*.pdb +*.ipdb +*.pgc +*.pgd +*.rsp +*.sbr +*.tlb +*.tli +*.tlh +*.tmp +*.tmp_proj +*_wpftmp.csproj +*.tlog +*.vspscc +*.vssscc +.builds +*.pidb +*.svclog +*.scc + +# Chutzpah Test files +_Chutzpah* + +# Visual C++ cache files +ipch/ +*.aps +*.ncb +*.opendb +*.opensdf +*.sdf +*.cachefile +*.VC.db +*.VC.VC.opendb + +# Visual Studio profiler +*.psess +*.vsp +*.vspx +*.sap + +# Visual Studio Trace Files +*.e2e + +# TFS 2012 Local Workspace +$tf/ + +# Guidance Automation Toolkit +*.gpState + +# ReSharper is a .NET coding add-in +_ReSharper*/ +*.[Rr]e[Ss]harper +*.DotSettings.user + +# TeamCity is a build add-in +_TeamCity* + +# DotCover is a Code Coverage Tool +*.dotCover + +# AxoCover is a Code Coverage Tool +.axoCover/* +!.axoCover/settings.json + +# Coverlet is a free, cross platform Code Coverage Tool +coverage*.json +coverage*.xml +coverage*.info + +# Visual Studio code coverage results +*.coverage +*.coveragexml + +# NCrunch +_NCrunch_* +.*crunch*.local.xml +nCrunchTemp_* + +# MightyMoose +*.mm.* +AutoTest.Net/ + +# Web workbench (sass) +.sass-cache/ + +# Installshield output folder +[Ee]xpress/ + +# DocProject is a documentation generator add-in +DocProject/buildhelp/ +DocProject/Help/*.HxT +DocProject/Help/*.HxC +DocProject/Help/*.hhc +DocProject/Help/*.hhk +DocProject/Help/*.hhp +DocProject/Help/Html2 +DocProject/Help/html + +# Click-Once directory +publish/ + +# Publish Web Output +*.[Pp]ublish.xml +*.azurePubxml +# Note: Comment the next line if you want to checkin your web deploy settings, +# but database connection strings (with potential passwords) will be unencrypted +*.pubxml +*.publishproj + +# Microsoft Azure Web App publish settings. Comment the next line if you want to +# checkin your Azure Web App publish settings, but sensitive information contained +# in these scripts will be unencrypted +PublishScripts/ + +# NuGet Packages +*.nupkg +# NuGet Symbol Packages +*.snupkg +# The packages folder can be ignored because of Package Restore +**/[Pp]ackages/* +# except build/, which is used as an MSBuild target. +!**/[Pp]ackages/build/ +# Uncomment if necessary however generally it will be regenerated when needed +#!**/[Pp]ackages/repositories.config +# NuGet v3's project.json files produces more ignorable files +*.nuget.props +*.nuget.targets + +# Microsoft Azure Build Output +csx/ +*.build.csdef + +# Microsoft Azure Emulator +ecf/ +rcf/ + +# Windows Store app package directories and files +AppPackages/ +BundleArtifacts/ +Package.StoreAssociation.xml +_pkginfo.txt +*.appx +*.appxbundle +*.appxupload + +# Visual Studio cache files +# files ending in .cache can be ignored +*.[Cc]ache +# but keep track of directories ending in .cache +!?*.[Cc]ache/ + +# Others +ClientBin/ +~$* +*.dbmdl +*.dbproj.schemaview +*.jfm +*.pfx +*.publishsettings +orleans.codegen.cs + +# Including strong name files can present a security risk +# (https://github.com/github/gitignore/pull/2483#issue-259490424) +#*.snk + +# Since there are multiple workflows, uncomment next line to ignore bower_components +# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) +#bower_components/ + +# RIA/Silverlight projects +Generated_Code/ + +# Backup & report files from converting an old project file +# to a newer Visual Studio version. Backup files are not needed, +# because we have git ;-) +_UpgradeReport_Files/ +Backup*/ +UpgradeLog*.XML +UpgradeLog*.htm +ServiceFabricBackup/ +*.rptproj.bak + +# SQL Server files +*.mdf +*.ldf +*.ndf + +# Business Intelligence projects +*.rdl.data +*.bim.layout +*.bim_*.settings +*.rptproj.rsuser +*- [Bb]ackup.rdl +*- [Bb]ackup ([0-9]).rdl +*- [Bb]ackup ([0-9][0-9]).rdl + +# Microsoft Fakes +FakesAssemblies/ + +# GhostDoc plugin setting file +*.GhostDoc.xml + +# Node.js Tools for Visual Studio +.ntvs_analysis.dat + +# Visual Studio 6 build log +*.plg + +# Visual Studio 6 workspace options file +*.opt + +# Visual Studio 6 auto-generated workspace file (contains which files were open etc.) +*.vbw + +# Visual Studio 6 auto-generated project file (contains which files were open etc.) +*.vbp + +# Visual Studio 6 workspace and project file (working project files containing files to include in project) +*.dsw +*.dsp + +# Visual Studio 6 technical files + +# Visual Studio LightSwitch build output +**/*.HTMLClient/GeneratedArtifacts +**/*.DesktopClient/GeneratedArtifacts +**/*.DesktopClient/ModelManifest.xml +**/*.Server/GeneratedArtifacts +**/*.Server/ModelManifest.xml +_Pvt_Extensions + +# Paket dependency manager +.paket/paket.exe +paket-files/ + +# FAKE - F# Make +.fake/ + +# CodeRush personal settings +.cr/personal + +# Python Tools for Visual Studio (PTVS) +__pycache__/ +*.pyc + +# Cake - Uncomment if you are using it +# tools/** +# !tools/packages.config + +# Tabs Studio +*.tss + +# Telerik's JustMock configuration file +*.jmconfig + +# BizTalk build output +*.btp.cs +*.btm.cs +*.odx.cs +*.xsd.cs + +# OpenCover UI analysis results +OpenCover/ + +# Azure Stream Analytics local run output +ASALocalRun/ + +# MSBuild Binary and Structured Log +*.binlog + +# NVidia Nsight GPU debugger configuration file +*.nvuser + +# MFractors (Xamarin productivity tool) working folder +.mfractor/ + +# Local History for Visual Studio +.localhistory/ + +# Visual Studio History (VSHistory) files +.vshistory/ + +# BeatPulse healthcheck temp database +healthchecksdb + +# Backup folder for Package Reference Convert tool in Visual Studio 2017 +MigrationBackup/ + +# Ionide (cross platform F# VS Code tools) working folder +.ionide/ + +# Fody - auto-generated XML schema +FodyWeavers.xsd + +# VS Code files for those working on multiple tools +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +*.code-workspace + +# Local History for Visual Studio Code +.history/ + +# Windows Installer files from build outputs +*.cab +*.msi +*.msix +*.msm +*.msp + +# JetBrains Rider +*.sln.iml + +### VisualStudio Patch ### +# Additional files built by Visual Studio + +# End of https://www.toptal.com/developers/gitignore/api/rider,visualstudio,reactnative,macos + + + +idea/ \ No newline at end of file diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..521a9f7 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +legacy-peer-deps=true diff --git a/TO REMOVE LATER/app/(tabs)/_layout.tsx b/TO REMOVE LATER/app/(tabs)/_layout.tsx new file mode 100644 index 0000000..cfbc1e2 --- /dev/null +++ b/TO REMOVE LATER/app/(tabs)/_layout.tsx @@ -0,0 +1,45 @@ +import { Tabs } from 'expo-router'; +import React from 'react'; +import { Platform } from 'react-native'; + +import { HapticTab } from '@/components/HapticTab'; +import { IconSymbol } from '@/components/ui/IconSymbol'; +import TabBarBackground from '@/components/ui/TabBarBackground'; +import { Colors } from '@/constants/Colors'; +import { useColorScheme } from '@/hooks/useColorScheme'; + +export default function TabLayout() { + const colorScheme = useColorScheme(); + + return ( + + , + }} + /> + , + }} + /> + + ); +} diff --git a/app/(tabs)/explore.tsx b/TO REMOVE LATER/app/(tabs)/explore.tsx similarity index 92% rename from app/(tabs)/explore.tsx rename to TO REMOVE LATER/app/(tabs)/explore.tsx index e480218..06e70c4 100644 --- a/app/(tabs)/explore.tsx +++ b/TO REMOVE LATER/app/(tabs)/explore.tsx @@ -1,4 +1,3 @@ -import Ionicons from '@expo/vector-icons/Ionicons'; import { StyleSheet, Image, Platform } from 'react-native'; import { Collapsible } from '@/components/Collapsible'; @@ -6,12 +5,20 @@ import { ExternalLink } from '@/components/ExternalLink'; import ParallaxScrollView from '@/components/ParallaxScrollView'; import { ThemedText } from '@/components/ThemedText'; import { ThemedView } from '@/components/ThemedView'; +import { IconSymbol } from '@/components/ui/IconSymbol'; export default function TabTwoScreen() { return ( }> + headerImage={ + + }> Explore @@ -72,8 +79,8 @@ export default function TabTwoScreen() { This template includes an example of an animated component. The{' '} components/HelloWave.tsx component uses - the powerful react-native-reanimated library - to create a waving hand animation. + the powerful react-native-reanimated{' '} + library to create a waving hand animation. {Platform.select({ ios: ( diff --git a/app/(tabs)/index.tsx b/TO REMOVE LATER/app/(tabs)/index.tsx similarity index 94% rename from app/(tabs)/index.tsx rename to TO REMOVE LATER/app/(tabs)/index.tsx index 324aeb7..886b079 100644 --- a/app/(tabs)/index.tsx +++ b/TO REMOVE LATER/app/(tabs)/index.tsx @@ -25,7 +25,11 @@ export default function HomeScreen() { Edit app/(tabs)/index.tsx to see changes. Press{' '} - {Platform.select({ ios: 'cmd + d', android: 'cmd + m' })} + {Platform.select({ + ios: 'cmd + d', + android: 'cmd + m', + web: 'F12' + })} {' '} to open developer tools. diff --git a/app/+not-found.tsx b/TO REMOVE LATER/app/+not-found.tsx similarity index 100% rename from app/+not-found.tsx rename to TO REMOVE LATER/app/+not-found.tsx diff --git a/TO REMOVE LATER/app/_layout.tsx b/TO REMOVE LATER/app/_layout.tsx new file mode 100644 index 0000000..db74578 --- /dev/null +++ b/TO REMOVE LATER/app/_layout.tsx @@ -0,0 +1,39 @@ +import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'; +import { useFonts } from 'expo-font'; +import { Stack } from 'expo-router'; +import * as SplashScreen from 'expo-splash-screen'; +import { StatusBar } from 'expo-status-bar'; +import { useEffect } from 'react'; +import 'react-native-reanimated'; + +import { useColorScheme } from '@/hooks/useColorScheme'; + +// Prevent the splash screen from auto-hiding before asset loading is complete. +SplashScreen.preventAutoHideAsync(); + +export default function RootLayout() { + const colorScheme = useColorScheme(); + const [loaded] = useFonts({ + SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'), + }); + + useEffect(() => { + if (loaded) { + SplashScreen.hideAsync(); + } + }, [loaded]); + + if (!loaded) { + return null; + } + + return ( + + + + + + + + ); +} diff --git a/components/Collapsible.tsx b/TO REMOVE LATER/components/Collapsible.tsx similarity index 75% rename from components/Collapsible.tsx rename to TO REMOVE LATER/components/Collapsible.tsx index c326473..55bff2f 100644 --- a/components/Collapsible.tsx +++ b/TO REMOVE LATER/components/Collapsible.tsx @@ -1,10 +1,11 @@ -import Ionicons from '@expo/vector-icons/Ionicons'; import { PropsWithChildren, useState } from 'react'; -import { StyleSheet, TouchableOpacity, useColorScheme } from 'react-native'; +import { StyleSheet, TouchableOpacity } from 'react-native'; import { ThemedText } from '@/components/ThemedText'; import { ThemedView } from '@/components/ThemedView'; +import { IconSymbol } from '@/components/ui/IconSymbol'; import { Colors } from '@/constants/Colors'; +import { useColorScheme } from '@/hooks/useColorScheme'; export function Collapsible({ children, title }: PropsWithChildren & { title: string }) { const [isOpen, setIsOpen] = useState(false); @@ -16,11 +17,14 @@ export function Collapsible({ children, title }: PropsWithChildren & { title: st style={styles.heading} onPress={() => setIsOpen((value) => !value)} activeOpacity={0.8}> - + {title} {isOpen && {children}} diff --git a/components/ExternalLink.tsx b/TO REMOVE LATER/components/ExternalLink.tsx similarity index 100% rename from components/ExternalLink.tsx rename to TO REMOVE LATER/components/ExternalLink.tsx diff --git a/TO REMOVE LATER/components/HapticTab.tsx b/TO REMOVE LATER/components/HapticTab.tsx new file mode 100644 index 0000000..7f3981c --- /dev/null +++ b/TO REMOVE LATER/components/HapticTab.tsx @@ -0,0 +1,18 @@ +import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs'; +import { PlatformPressable } from '@react-navigation/elements'; +import * as Haptics from 'expo-haptics'; + +export function HapticTab(props: BottomTabBarButtonProps) { + return ( + { + if (process.env.EXPO_OS === 'ios') { + // Add a soft haptic feedback when pressing down on the tabs. + Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); + } + props.onPressIn?.(ev); + }} + /> + ); +} diff --git a/components/HelloWave.tsx b/TO REMOVE LATER/components/HelloWave.tsx similarity index 73% rename from components/HelloWave.tsx rename to TO REMOVE LATER/components/HelloWave.tsx index f4b6ea5..9b4bc31 100644 --- a/components/HelloWave.tsx +++ b/TO REMOVE LATER/components/HelloWave.tsx @@ -1,3 +1,4 @@ +import { useEffect } from 'react'; import { StyleSheet } from 'react-native'; import Animated, { useSharedValue, @@ -12,10 +13,12 @@ import { ThemedText } from '@/components/ThemedText'; export function HelloWave() { const rotationAnimation = useSharedValue(0); - rotationAnimation.value = withRepeat( - withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })), - 4 // Run the animation 4 times - ); + useEffect(() => { + rotationAnimation.value = withRepeat( + withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })), + 4 // Run the animation 4 times + ); + }, []); const animatedStyle = useAnimatedStyle(() => ({ transform: [{ rotate: `${rotationAnimation.value}deg` }], diff --git a/components/ParallaxScrollView.tsx b/TO REMOVE LATER/components/ParallaxScrollView.tsx similarity index 80% rename from components/ParallaxScrollView.tsx rename to TO REMOVE LATER/components/ParallaxScrollView.tsx index 0a35419..5df1d75 100644 --- a/components/ParallaxScrollView.tsx +++ b/TO REMOVE LATER/components/ParallaxScrollView.tsx @@ -1,5 +1,5 @@ import type { PropsWithChildren, ReactElement } from 'react'; -import { StyleSheet, useColorScheme } from 'react-native'; +import { StyleSheet } from 'react-native'; import Animated, { interpolate, useAnimatedRef, @@ -8,6 +8,8 @@ import Animated, { } from 'react-native-reanimated'; import { ThemedView } from '@/components/ThemedView'; +import { useBottomTabOverflow } from '@/components/ui/TabBarBackground'; +import { useColorScheme } from '@/hooks/useColorScheme'; const HEADER_HEIGHT = 250; @@ -24,7 +26,7 @@ export default function ParallaxScrollView({ const colorScheme = useColorScheme() ?? 'light'; const scrollRef = useAnimatedRef(); const scrollOffset = useScrollViewOffset(scrollRef); - + const bottom = useBottomTabOverflow(); const headerAnimatedStyle = useAnimatedStyle(() => { return { transform: [ @@ -44,7 +46,11 @@ export default function ParallaxScrollView({ return ( - + ; + weight?: SymbolWeight; +}) { + return ( + + ); +} diff --git a/TO REMOVE LATER/components/ui/IconSymbol.tsx b/TO REMOVE LATER/components/ui/IconSymbol.tsx new file mode 100644 index 0000000..f1fabd4 --- /dev/null +++ b/TO REMOVE LATER/components/ui/IconSymbol.tsx @@ -0,0 +1,43 @@ +// This file is a fallback for using MaterialIcons on Android and web. + +import MaterialIcons from '@expo/vector-icons/MaterialIcons'; +import { SymbolWeight } from 'expo-symbols'; +import React from 'react'; +import { OpaqueColorValue, StyleProp, ViewStyle } from 'react-native'; + +// Add your SFSymbol to MaterialIcons mappings here. +const MAPPING = { + // See MaterialIcons here: https://icons.expo.fyi + // See SF Symbols in the SF Symbols app on Mac. + 'house.fill': 'home', + 'paperplane.fill': 'send', + 'chevron.left.forwardslash.chevron.right': 'code', + 'chevron.right': 'chevron-right', +} as Partial< + Record< + import('expo-symbols').SymbolViewProps['name'], + React.ComponentProps['name'] + > +>; + +export type IconSymbolName = keyof typeof MAPPING; + +/** + * An icon component that uses native SFSymbols on iOS, and MaterialIcons on Android and web. This ensures a consistent look across platforms, and optimal resource usage. + * + * Icon `name`s are based on SFSymbols and require manual mapping to MaterialIcons. + */ +export function IconSymbol({ + name, + size = 24, + color, + style, +}: { + name: IconSymbolName; + size?: number; + color: string | OpaqueColorValue; + style?: StyleProp; + weight?: SymbolWeight; +}) { + return ; +} diff --git a/TO REMOVE LATER/components/ui/TabBarBackground.ios.tsx b/TO REMOVE LATER/components/ui/TabBarBackground.ios.tsx new file mode 100644 index 0000000..6668e78 --- /dev/null +++ b/TO REMOVE LATER/components/ui/TabBarBackground.ios.tsx @@ -0,0 +1,22 @@ +import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'; +import { BlurView } from 'expo-blur'; +import { StyleSheet } from 'react-native'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; + +export default function BlurTabBarBackground() { + return ( + + ); +} + +export function useBottomTabOverflow() { + const tabHeight = useBottomTabBarHeight(); + const { bottom } = useSafeAreaInsets(); + return tabHeight - bottom; +} diff --git a/TO REMOVE LATER/components/ui/TabBarBackground.tsx b/TO REMOVE LATER/components/ui/TabBarBackground.tsx new file mode 100644 index 0000000..70d1c3c --- /dev/null +++ b/TO REMOVE LATER/components/ui/TabBarBackground.tsx @@ -0,0 +1,6 @@ +// This is a shim for web and Android where the tab bar is generally opaque. +export default undefined; + +export function useBottomTabOverflow() { + return 0; +} diff --git a/constants/Colors.ts b/TO REMOVE LATER/constants/Colors.ts similarity index 100% rename from constants/Colors.ts rename to TO REMOVE LATER/constants/Colors.ts diff --git a/hooks/useColorScheme.ts b/TO REMOVE LATER/hooks/useColorScheme.ts similarity index 100% rename from hooks/useColorScheme.ts rename to TO REMOVE LATER/hooks/useColorScheme.ts diff --git a/TO REMOVE LATER/hooks/useColorScheme.web.ts b/TO REMOVE LATER/hooks/useColorScheme.web.ts new file mode 100644 index 0000000..7eb1c1b --- /dev/null +++ b/TO REMOVE LATER/hooks/useColorScheme.web.ts @@ -0,0 +1,21 @@ +import { useEffect, useState } from 'react'; +import { useColorScheme as useRNColorScheme } from 'react-native'; + +/** + * To support static rendering, this value needs to be re-calculated on the client side for web + */ +export function useColorScheme() { + const [hasHydrated, setHasHydrated] = useState(false); + + useEffect(() => { + setHasHydrated(true); + }, []); + + const colorScheme = useRNColorScheme(); + + if (hasHydrated) { + return colorScheme; + } + + return 'light'; +} diff --git a/hooks/useThemeColor.ts b/TO REMOVE LATER/hooks/useThemeColor.ts similarity index 89% rename from hooks/useThemeColor.ts rename to TO REMOVE LATER/hooks/useThemeColor.ts index ae43b47..0608e73 100644 --- a/hooks/useThemeColor.ts +++ b/TO REMOVE LATER/hooks/useThemeColor.ts @@ -3,9 +3,8 @@ * https://docs.expo.dev/guides/color-schemes/ */ -import { useColorScheme } from 'react-native'; - import { Colors } from '@/constants/Colors'; +import { useColorScheme } from '@/hooks/useColorScheme'; export function useThemeColor( props: { light?: string; dark?: string }, diff --git a/TO REMOVE LATER/scripts/reset-project.js b/TO REMOVE LATER/scripts/reset-project.js new file mode 100644 index 0000000..5f81463 --- /dev/null +++ b/TO REMOVE LATER/scripts/reset-project.js @@ -0,0 +1,84 @@ +#!/usr/bin/env node + +/** + * This script is used to reset the project to a blank state. + * It moves the /app, /components, /hooks, /scripts, and /constants directories to /app-example and creates a new /app directory with an index.tsx and _layout.tsx file. + * You can remove the `reset-project` script from package.json and safely delete this file after running it. + */ + +const fs = require("fs"); +const path = require("path"); + +const root = process.cwd(); +const oldDirs = ["app", "components", "hooks", "constants", "scripts"]; +const newDir = "app-example"; +const newAppDir = "app"; +const newDirPath = path.join(root, newDir); + +const indexContent = `import { Text, View } from "react-native"; + +export default function Index() { + return ( + + Edit app/index.tsx to edit this screen. + + ); +} +`; + +const layoutContent = `import { Stack } from "expo-router"; + +export default function RootLayout() { + return ; +} +`; + +const moveDirectories = async () => { + try { + // Create the app-example directory + await fs.promises.mkdir(newDirPath, { recursive: true }); + console.log(`šŸ“ /${newDir} directory created.`); + + // Move old directories to new app-example directory + for (const dir of oldDirs) { + const oldDirPath = path.join(root, dir); + const newDirPath = path.join(root, newDir, dir); + if (fs.existsSync(oldDirPath)) { + await fs.promises.rename(oldDirPath, newDirPath); + console.log(`āž”ļø /${dir} moved to /${newDir}/${dir}.`); + } else { + console.log(`āž”ļø /${dir} does not exist, skipping.`); + } + } + + // Create new /app directory + const newAppDirPath = path.join(root, newAppDir); + await fs.promises.mkdir(newAppDirPath, { recursive: true }); + console.log("\nšŸ“ New /app directory created."); + + // Create index.tsx + const indexPath = path.join(newAppDirPath, "index.tsx"); + await fs.promises.writeFile(indexPath, indexContent); + console.log("šŸ“„ app/index.tsx created."); + + // Create _layout.tsx + const layoutPath = path.join(newAppDirPath, "_layout.tsx"); + await fs.promises.writeFile(layoutPath, layoutContent); + console.log("šŸ“„ app/_layout.tsx created."); + + console.log("\nāœ… Project reset complete. Next steps:"); + console.log( + "1. Run `npx expo start` to start a development server.\n2. Edit app/index.tsx to edit the main screen.\n3. Delete the /app-example directory when you're done referencing it." + ); + } catch (error) { + console.error(`Error during script execution: ${error}`); + } +}; + +moveDirectories(); diff --git a/app.json b/app.json index 0e3ec0c..17b7f1f 100644 --- a/app.json +++ b/app.json @@ -1,17 +1,13 @@ { "expo": { - "name": "Optifit-App", - "slug": "Optifit-App", + "name": "Optifit", + "slug": "Optifit", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/images/icon.png", "scheme": "myapp", "userInterfaceStyle": "automatic", - "splash": { - "image": "./assets/images/splash.png", - "resizeMode": "contain", - "backgroundColor": "#ffffff" - }, + "newArchEnabled": true, "ios": { "supportsTablet": true }, @@ -27,7 +23,16 @@ "favicon": "./assets/images/favicon.png" }, "plugins": [ - "expo-router" + "expo-router", + [ + "expo-splash-screen", + { + "image": "./assets/images/splash-icon.png", + "imageWidth": 200, + "resizeMode": "contain", + "backgroundColor": "#ffffff" + } + ] ], "experiments": { "typedRoutes": true diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx deleted file mode 100644 index 22a49b6..0000000 --- a/app/(tabs)/_layout.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { Tabs } from 'expo-router'; -import React from 'react'; - -import { TabBarIcon } from '@/components/navigation/TabBarIcon'; -import { Colors } from '@/constants/Colors'; -import { useColorScheme } from '@/hooks/useColorScheme'; - -export default function TabLayout() { - const colorScheme = useColorScheme(); - - return ( - - ( - - ), - }} - /> - ( - - ), - }} - /> - - ); -} diff --git a/app/+html.tsx b/app/+html.tsx deleted file mode 100644 index 8b92456..0000000 --- a/app/+html.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { ScrollViewStyleReset } from 'expo-router/html'; -import { type PropsWithChildren } from 'react'; - -/** - * This file is web-only and used to configure the root HTML for every web page during static rendering. - * The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs. - */ -export default function Root({ children }: PropsWithChildren) { - return ( - - - - - - - {/* - Disable body scrolling on web. This makes ScrollView components work closer to how they do on native. - However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line. - */} - - - {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */} -