diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..cc73513 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "printWidth": 100, + "tabWidth": 2, + "useTabs": false, + "singleQuote": true, + "jsxSingleQuote": true, + "trailingComma": "all" +} diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index cfbc1e2..0063071 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -25,19 +25,20 @@ export default function TabLayout() { }, default: {}, }), - }}> + }} + > , + tabBarIcon: ({ color }) => , }} /> , + tabBarIcon: ({ color }) => , }} /> diff --git a/app/(tabs)/explore.tsx b/app/(tabs)/explore.tsx index 06e70c4..016867b 100644 --- a/app/(tabs)/explore.tsx +++ b/app/(tabs)/explore.tsx @@ -14,78 +14,79 @@ export default function TabTwoScreen() { headerImage={ - }> + } + > - Explore + Explore This app includes example code to help you get started. - + This app has two screens:{' '} - app/(tabs)/index.tsx and{' '} - app/(tabs)/explore.tsx + app/(tabs)/index.tsx and{' '} + app/(tabs)/explore.tsx - The layout file in app/(tabs)/_layout.tsx{' '} + The layout file in app/(tabs)/_layout.tsx{' '} sets up the tab navigator. - - Learn more + + 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. + w in the terminal running this project. - + - For static images, you can use the @2x and{' '} - @3x suffixes to provide files for + For static images, you can use the @2x and{' '} + @3x suffixes to provide files for different screen densities - - Learn more + + Learn more - + - Open app/_layout.tsx to see how to load{' '} + Open app/_layout.tsx to see how to load{' '} custom fonts such as this one. - - Learn more + + Learn more - + This template has light and dark mode support. The{' '} - useColorScheme() hook lets you inspect + useColorScheme() hook lets you inspect what the user's current color scheme is, and so you can adjust UI colors accordingly. - - Learn more + + Learn more - + This template includes an example of an animated component. The{' '} - components/HelloWave.tsx component uses - the powerful react-native-reanimated{' '} + components/HelloWave.tsx component uses + the powerful react-native-reanimated{' '} library to create a waving hand animation. {Platform.select({ ios: ( - The components/ParallaxScrollView.tsx{' '} + 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 886b079..f0a1f3e 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -14,40 +14,41 @@ export default function HomeScreen() { source={require('@/assets/images/partial-react-logo.png')} style={styles.reactLogo} /> - }> + } + > - Welcome! + Welcome! - Step 1: Try it + Step 1: Try it - Edit app/(tabs)/index.tsx to see changes. + Edit app/(tabs)/index.tsx to see changes. Press{' '} - + {Platform.select({ ios: 'cmd + d', android: 'cmd + m', - web: 'F12' + web: 'F12', })} {' '} to open developer tools. - Step 2: Explore + Step 2: Explore Tap the Explore tab to learn more about what's included in this starter app. - Step 3: Get a fresh start + 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. + npm run reset-project to get a fresh{' '} + app directory. This will move the current{' '} + app to{' '} + app-example. diff --git a/app/+not-found.tsx b/app/+not-found.tsx index 963b04f..ba91e7f 100644 --- a/app/+not-found.tsx +++ b/app/+not-found.tsx @@ -9,9 +9,9 @@ export default function NotFoundScreen() { <> - This screen doesn't exist. - - Go to home screen! + This screen doesn't exist. + + Go to home screen! diff --git a/app/_layout.tsx b/app/_layout.tsx index db74578..13ca20f 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -30,10 +30,10 @@ export default function RootLayout() { return ( - - + + - + ); } diff --git a/components/Collapsible.tsx b/components/Collapsible.tsx index 55bff2f..e8942c8 100644 --- a/components/Collapsible.tsx +++ b/components/Collapsible.tsx @@ -16,16 +16,17 @@ export function Collapsible({ children, title }: PropsWithChildren & { title: st setIsOpen((value) => !value)} - activeOpacity={0.8}> + activeOpacity={0.8} + > - {title} + {title} {isOpen && {children}} diff --git a/components/ExternalLink.tsx b/components/ExternalLink.tsx index 8f05675..18f611f 100644 --- a/components/ExternalLink.tsx +++ b/components/ExternalLink.tsx @@ -8,7 +8,7 @@ type Props = Omit, 'href'> & { href: string }; export function ExternalLink({ href, ...rest }: Props) { return ( { diff --git a/components/HelloWave.tsx b/components/HelloWave.tsx index 9b4bc31..7e4fd88 100644 --- a/components/HelloWave.tsx +++ b/components/HelloWave.tsx @@ -16,7 +16,7 @@ export function HelloWave() { useEffect(() => { rotationAnimation.value = withRepeat( withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })), - 4 // Run the animation 4 times + 4, // Run the animation 4 times ); }, []); diff --git a/components/ParallaxScrollView.tsx b/components/ParallaxScrollView.tsx index 5df1d75..8b2aa7e 100644 --- a/components/ParallaxScrollView.tsx +++ b/components/ParallaxScrollView.tsx @@ -34,7 +34,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], ), }, { @@ -50,13 +50,15 @@ export default function ParallaxScrollView({ ref={scrollRef} scrollEventThrottle={16} scrollIndicatorInsets={{ bottom }} - contentContainerStyle={{ paddingBottom: bottom }}> + contentContainerStyle={{ paddingBottom: bottom }} + > + ]} + > {headerImage} {children} diff --git a/components/ui/IconSymbol.ios.tsx b/components/ui/IconSymbol.ios.tsx index 9177f4d..d8501ae 100644 --- a/components/ui/IconSymbol.ios.tsx +++ b/components/ui/IconSymbol.ios.tsx @@ -18,7 +18,7 @@ export function IconSymbol({ diff --git a/hooks/useThemeColor.ts b/hooks/useThemeColor.ts index 0608e73..08a3019 100644 --- a/hooks/useThemeColor.ts +++ b/hooks/useThemeColor.ts @@ -8,7 +8,7 @@ import { useColorScheme } from '@/hooks/useColorScheme'; export function useThemeColor( props: { light?: string; dark?: string }, - colorName: keyof typeof Colors.light & keyof typeof Colors.dark + colorName: keyof typeof Colors.light & keyof typeof Colors.dark, ) { const theme = useColorScheme() ?? 'light'; const colorFromProps = props[theme]; diff --git a/package-lock.json b/package-lock.json index 7ac802d..a9b5b16 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44,6 +44,7 @@ "@types/react-test-renderer": "^18.3.0", "jest": "^29.2.1", "jest-expo": "~52.0.3", + "prettier": "^3.4.2", "react-test-renderer": "18.3.1", "typescript": "^5.3.3" } @@ -11826,6 +11827,22 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "license": "MIT" }, + "node_modules/prettier": { + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz", + "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", diff --git a/package.json b/package.json index b79d92f..b48216e 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,9 @@ "ios": "expo start --ios", "web": "expo start --web", "test": "jest --watchAll", - "lint": "expo lint" + "lint": "expo lint", + "format:write": "prettier --write \"**/*.{ts,tsx,js,jsx,mdx}\" --cache", + "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mdx}\" --cache" }, "jest": { "preset": "jest-expo" @@ -22,14 +24,17 @@ "expo": "~52.0.28", "expo-blur": "~14.0.3", "expo-constants": "~17.0.5", + "expo-dev-client": "~5.0.10", "expo-font": "~13.0.3", "expo-haptics": "~14.0.1", + "expo-insights": "~0.8.2", "expo-linking": "~7.0.5", "expo-router": "~4.0.17", "expo-splash-screen": "~0.29.21", "expo-status-bar": "~2.0.1", "expo-symbols": "~0.2.1", "expo-system-ui": "~4.0.7", + "expo-updates": "~0.26.13", "expo-web-browser": "~14.0.2", "react": "18.3.1", "react-dom": "18.3.1", @@ -39,10 +44,7 @@ "react-native-safe-area-context": "4.12.0", "react-native-screens": "~4.4.0", "react-native-web": "~0.19.13", - "react-native-webview": "13.12.5", - "expo-dev-client": "~5.0.10", - "expo-insights": "~0.8.2", - "expo-updates": "~0.26.13" + "react-native-webview": "13.12.5" }, "devDependencies": { "@babel/core": "^7.25.2", @@ -51,6 +53,7 @@ "@types/react-test-renderer": "^18.3.0", "jest": "^29.2.1", "jest-expo": "~52.0.3", + "prettier": "^3.4.2", "react-test-renderer": "18.3.1", "typescript": "^5.3.3" } diff --git a/scripts/reset-project.js b/scripts/reset-project.js index 5f81463..2dde114 100755 --- a/scripts/reset-project.js +++ b/scripts/reset-project.js @@ -6,13 +6,13 @@ * 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 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 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"; @@ -60,21 +60,21 @@ const moveDirectories = async () => { // 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.\n3. Delete the /app-example directory when you're done referencing it." + "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}`);