diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index db364e6..e1e3489 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -37,14 +37,16 @@ const TabLayout = () => { name='index' options={{ title: 'Home', - tabBarIcon: ({ color }) => , + tabBarIcon: ({ color }) => + , }} /> , + tabBarIcon: ({ color }) => + , }} /> diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index eb39d68..91f6d3f 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -1,11 +1,8 @@ import { Image, StyleSheet, Platform } from 'react-native'; import ParallaxScrollView from '@/components/default/ParallaxScrollView'; import { ThemedText, ThemedView } from '@/components/theme/Theme'; -import { Colors } from '@/constants/Colors'; -import { useColorScheme } from '@/hooks/useColorScheme'; const HomeScreen = () => { - const scheme = useColorScheme() ?? 'dark'; return ( { } > - Welcome! - - - Step 1: Try it - - Edit app/(tabs)/index.tsx to see changes. - Press{' '} - - {Platform.select({ - ios: 'cmd + d', - android: 'cmd + m', - web: 'F12', - })} - {' '} - to open developer tools. - - - - Step 2: Explore - - Tap the Explore tab to learn more about what's included in this starter app. - - - - Step 3: Get a fresh start - - When you're ready, run{' '} - npm run reset-project to get a fresh{' '} - app directory. This will move the current{' '} - app to{' '} - app-example. - + ); @@ -68,16 +34,16 @@ const styles = StyleSheet.create({ marginBottom: 8, }, reactLogo: { - height: 80, - width: 82, + height: 70, + width: 72, bottom: 10, - left: 10, + left: 40, position: 'absolute', }, headerTitle: { position: 'absolute', bottom: 20, - left: 40, + left: 75, right: 0, textAlign: 'center', fontSize: 48, diff --git a/app/(tabs)/settings.tsx b/app/(tabs)/settings.tsx index c772ba4..e9a3b37 100644 --- a/app/(tabs)/settings.tsx +++ b/app/(tabs)/settings.tsx @@ -8,84 +8,15 @@ import { IconSymbol } from '@/components/ui/IconSymbol'; const TabTwoScreen = () => { return ( + + } + headerTitle={ + + Settings + } > - - Settings - - This app includes example code to help you get started. - - - This app has two screens:{' '} - app/(tabs)/index.tsx and{' '} - app/(tabs)/explore.tsx - - - The layout file in app/(tabs)/_layout.tsx{' '} - sets up the tab navigator. - - - Learn more - - - - - You can open this project on Android, iOS, and the web. To open the web version, press{' '} - w in the terminal running this project. - - - - - For static images, you can use the @2x and{' '} - @3x suffixes to provide files for - different screen densities - - - - Learn more - - - - - Open app/_layout.tsx to see how to load{' '} - - custom fonts such as this one. - - - - Learn more - - - - - This template has light and dark mode support. The{' '} - useColorScheme() hook lets you inspect - what the user's current color scheme is, and so you can adjust UI colors accordingly. - - - Learn more - - - - - 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. - - {Platform.select({ - ios: ( - - The components/ParallaxScrollView.tsx{' '} - component provides a parallax effect for the header image. - - ), - })} - ); }; @@ -94,10 +25,20 @@ export default TabTwoScreen; const styles = StyleSheet.create({ headerImage: { color: '#808080', - bottom: -90, - left: -35, + bottom: 6, + left: 38, position: 'absolute', }, + headerTitle: { + position: 'absolute', + bottom: 20, + left: 16, + right: 0, + textAlign: 'center', + fontSize: 48, + lineHeight: 64, + fontWeight: 'bold', + }, titleContainer: { flexDirection: 'row', gap: 8, diff --git a/components/default/ParallaxScrollView.tsx b/components/default/ParallaxScrollView.tsx index ac2a573..71b947d 100644 --- a/components/default/ParallaxScrollView.tsx +++ b/components/default/ParallaxScrollView.tsx @@ -77,9 +77,6 @@ const ParallaxScrollView = ({ export default ParallaxScrollView; const styles = StyleSheet.create({ - blank: { - - }, container: { flex: 1, }, diff --git a/scripts/reset-project.js b/scripts/reset-project.js deleted file mode 100755 index 2dde114..0000000 --- a/scripts/reset-project.js +++ /dev/null @@ -1,84 +0,0 @@ -#!/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();