diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index 54e11d0..495ca3a 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -15,7 +15,8 @@ export default function TabLayout() { tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint, headerShown: false, tabBarButton: HapticTab, - }}> + }} + > - }> + } + > + }} + > Explore This app includes example code to help you get started. - This app has two screens:{' '} - app/(tabs)/index.tsx and{' '} + 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. + The layout file in app/(tabs)/_layout.tsx sets up the tab + navigator. Learn more @@ -54,8 +55,7 @@ export default function TabTwoScreen() { For static images, you can use the @2x and{' '} - @3x suffixes to provide files for - different screen densities + @3x suffixes to provide files for different screen densities 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. + useColorScheme() hook lets you inspect what the user's + current color scheme is, and so you can adjust UI colors accordingly. Learn more @@ -78,8 +78,7 @@ export default function TabTwoScreen() { This template includes an example of an animated component. The{' '} - components/HelloWave.tsx component uses - the powerful{' '} + components/HelloWave.tsx component uses the powerful{' '} react-native-reanimated {' '} @@ -88,8 +87,8 @@ export default function TabTwoScreen() { {Platform.select({ ios: ( - The components/ParallaxScrollView.tsx{' '} - component provides a parallax effect for the header image. + The components/ParallaxScrollView.tsx component provides a + parallax effect for the header image. ), })} diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index 786b736..acfe4dd 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -11,12 +11,8 @@ export default function HomeScreen() { return ( - }> + headerImage={} + > Welcome! @@ -24,8 +20,7 @@ export default function HomeScreen() { Step 1: Try it - Edit app/(tabs)/index.tsx to see changes. - Press{' '} + Edit app/(tabs)/index.tsx to see changes. Press{' '} {Platform.select({ ios: 'cmd + d', @@ -44,25 +39,14 @@ export default function HomeScreen() { alert('Action pressed')} /> - alert('Share pressed')} - /> + alert('Share pressed')} /> - alert('Delete pressed')} - /> + alert('Delete pressed')} /> - - {`Tap the Explore tab to learn more about what's included in this starter app.`} - + {`Tap the Explore tab to learn more about what's included in this starter app.`} Step 3: Get a fresh start diff --git a/components/hello-wave.tsx b/components/hello-wave.tsx index 5def547..4f16865 100644 --- a/components/hello-wave.tsx +++ b/components/hello-wave.tsx @@ -12,7 +12,8 @@ export function HelloWave() { }, animationIterationCount: 4, animationDuration: '300ms', - }}> + }} + > šŸ‘‹ ); diff --git a/components/parallax-scroll-view.tsx b/components/parallax-scroll-view.tsx index 6f674a7..b3fa647 100644 --- a/components/parallax-scroll-view.tsx +++ b/components/parallax-scroll-view.tsx @@ -1,11 +1,6 @@ import type { PropsWithChildren, ReactElement } from 'react'; import { StyleSheet } from 'react-native'; -import Animated, { - interpolate, - useAnimatedRef, - useAnimatedStyle, - useScrollOffset, -} from 'react-native-reanimated'; +import Animated, { interpolate, useAnimatedRef, useAnimatedStyle, useScrollOffset } from 'react-native-reanimated'; import { ThemedView } from '@/components/themed-view'; import { useColorScheme } from '@/hooks/use-color-scheme'; @@ -18,11 +13,7 @@ type Props = PropsWithChildren<{ headerBackgroundColor: { dark: string; light: string }; }>; -export default function ParallaxScrollView({ - children, - headerImage, - headerBackgroundColor, -}: Props) { +export default function ParallaxScrollView({ children, headerImage, headerBackgroundColor }: Props) { const backgroundColor = useThemeColor({}, 'background'); const colorScheme = useColorScheme() ?? 'light'; const scrollRef = useAnimatedRef(); @@ -34,7 +25,7 @@ export default function ParallaxScrollView({ translateY: interpolate( scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], - [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75] + [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75], ), }, { @@ -45,16 +36,10 @@ export default function ParallaxScrollView({ }); return ( - + + style={[styles.header, { backgroundColor: headerBackgroundColor[colorScheme] }, headerAnimatedStyle]} + > {headerImage} {children} diff --git a/components/themed-text.tsx b/components/themed-text.tsx index d79d0a1..73ef6e6 100644 --- a/components/themed-text.tsx +++ b/components/themed-text.tsx @@ -8,13 +8,7 @@ export type ThemedTextProps = TextProps & { type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link'; }; -export function ThemedText({ - style, - lightColor, - darkColor, - type = 'default', - ...rest -}: ThemedTextProps) { +export function ThemedText({ style, lightColor, darkColor, type = 'default', ...rest }: ThemedTextProps) { const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text'); return ( diff --git a/components/ui/collapsible.tsx b/components/ui/collapsible.tsx index 6345fde..8eea153 100644 --- a/components/ui/collapsible.tsx +++ b/components/ui/collapsible.tsx @@ -13,10 +13,7 @@ export function Collapsible({ children, title }: PropsWithChildren & { title: st return ( - setIsOpen((value) => !value)} - activeOpacity={0.8}> + setIsOpen((value) => !value)} activeOpacity={0.8}> { try { - if (userInput === "y") { + if (userInput === 'y') { // Create the app-example directory await fs.promises.mkdir(exampleDirPath, { recursive: true }); console.log(`šŸ“ /${exampleDir} directory created.`); @@ -57,7 +57,7 @@ const moveDirectories = async (userInput) => { for (const dir of oldDirs) { const oldDirPath = path.join(root, dir); if (fs.existsSync(oldDirPath)) { - if (userInput === "y") { + if (userInput === 'y') { const newDirPath = path.join(root, exampleDir, dir); await fs.promises.rename(oldDirPath, newDirPath); console.log(`āž”ļø /${dir} moved to /${exampleDir}/${dir}.`); @@ -73,40 +73,35 @@ const moveDirectories = async (userInput) => { // Create new /app directory const newAppDirPath = path.join(root, newAppDir); await fs.promises.mkdir(newAppDirPath, { recursive: true }); - console.log("\nšŸ“ New /app directory created."); + console.log('\nšŸ“ New /app directory created.'); // Create index.tsx - const indexPath = path.join(newAppDirPath, "index.tsx"); + const indexPath = path.join(newAppDirPath, 'index.tsx'); await fs.promises.writeFile(indexPath, indexContent); - console.log("šŸ“„ app/index.tsx created."); + console.log('šŸ“„ app/index.tsx created.'); // Create _layout.tsx - const layoutPath = path.join(newAppDirPath, "_layout.tsx"); + const layoutPath = path.join(newAppDirPath, '_layout.tsx'); await fs.promises.writeFile(layoutPath, layoutContent); - console.log("šŸ“„ app/_layout.tsx created."); + console.log('šŸ“„ app/_layout.tsx created.'); - console.log("\nāœ… Project reset complete. Next steps:"); + 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.${ - userInput === "y" - ? `\n3. Delete the /${exampleDir} directory when you're done referencing it.` - : "" - }` + userInput === 'y' ? `\n3. Delete the /${exampleDir} directory when you're done referencing it.` : '' + }`, ); } catch (error) { console.error(`āŒ Error during script execution: ${error.message}`); } }; -rl.question( - "Do you want to move existing files to /app-example instead of deleting them? (Y/n): ", - (answer) => { - const userInput = answer.trim().toLowerCase() || "y"; - if (userInput === "y" || userInput === "n") { - moveDirectories(userInput).finally(() => rl.close()); - } else { - console.log("āŒ Invalid input. Please enter 'Y' or 'N'."); - rl.close(); - } +rl.question('Do you want to move existing files to /app-example instead of deleting them? (Y/n): ', (answer) => { + const userInput = answer.trim().toLowerCase() || 'y'; + if (userInput === 'y' || userInput === 'n') { + moveDirectories(userInput).finally(() => rl.close()); + } else { + console.log("āŒ Invalid input. Please enter 'Y' or 'N'."); + rl.close(); } -); +});