From 10c737788d6c336609351f10820a09e2d2ea77c6 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 7 Feb 2026 17:52:28 +0000 Subject: [PATCH] Remove Expo dependencies and refactor to bare React Native - Remove all Expo packages (expo-router, expo-font, expo-splash-screen, expo-status-bar, expo-web-browser, expo-constants, expo-system-ui, expo-linking, @expo/vector-icons) - Replace @expo/vector-icons with react-native-vector-icons - Replace expo-router file-based routing with standard RN entry point - Fix parseInt() calls missing radix parameter (parse vulnerability) - Add NaN validation guard on settings form submission - Fix .gitignore that was excluding package.json and package-lock.json - Remove dangerouslySetInnerHTML usage (was in Expo web HTML template) - Remove unused Expo boilerplate (explore tab, themed components, parallax scroll, collapsible, hello wave, external link, etc.) - Fix timer stop not resetting all phase states - Fix settings button positioned with hardcoded left offset - Restructure to src/screens/ layout with clean separation - Add babel.config.js and metro.config.js for bare RN - Update tsconfig.json to standalone config (no Expo base) - Simplify app.json to bare RN format https://claude.ai/code/session_01Rp88EoMTfDVMGJDbBd15tV --- .gitignore | 38 +- App.tsx | 13 + app.json | 36 +- app/(tabs)/_layout.tsx | 37 - app/(tabs)/explore.tsx | 102 - app/(tabs)/route.tsx | 6 - app/+html.tsx | 39 - app/+not-found.tsx | 32 - app/_layout.tsx | 37 - assets/images/favicon.png | Bin 1466 -> 0 bytes assets/images/partial-react-logo.png | Bin 5075 -> 0 bytes assets/images/react-logo.png | Bin 6341 -> 0 bytes assets/images/react-logo@2x.png | Bin 14225 -> 0 bytes assets/images/react-logo@3x.png | Bin 21252 -> 0 bytes babel.config.js | 3 + components/Collapsible.tsx | 41 - components/ExternalLink.tsx | 24 - components/HelloWave.tsx | 37 - components/ParallaxScrollView.tsx | 76 - components/ThemedText.tsx | 60 - components/ThemedView.tsx | 14 - components/__tests__/ThemedText-test.tsx | 10 - .../__snapshots__/ThemedText-test.tsx.snap | 24 - components/navigation/TabBarIcon.tsx | 9 - constants/Colors.ts | 26 - expo-env.d.ts | 3 - hooks/useColorScheme.ts | 1 - hooks/useColorScheme.web.ts | 8 - hooks/useThemeColor.ts | 22 - index.js | 5 + metro.config.js | 5 + package-lock.json | 17722 ---------------- package.json | 49 +- scripts/reset-project.js | 73 - .../screens/SettingsScreen.tsx | 251 +- .../index.tsx => src/screens/TimerScreen.tsx | 274 +- tsconfig.json | 27 +- 37 files changed, 372 insertions(+), 18732 deletions(-) create mode 100644 App.tsx delete mode 100644 app/(tabs)/_layout.tsx delete mode 100644 app/(tabs)/explore.tsx delete mode 100644 app/(tabs)/route.tsx delete mode 100644 app/+html.tsx delete mode 100644 app/+not-found.tsx delete mode 100644 app/_layout.tsx delete mode 100644 assets/images/favicon.png delete mode 100644 assets/images/partial-react-logo.png delete mode 100644 assets/images/react-logo.png delete mode 100644 assets/images/react-logo@2x.png delete mode 100644 assets/images/react-logo@3x.png create mode 100644 babel.config.js delete mode 100644 components/Collapsible.tsx delete mode 100644 components/ExternalLink.tsx delete mode 100644 components/HelloWave.tsx delete mode 100644 components/ParallaxScrollView.tsx delete mode 100644 components/ThemedText.tsx delete mode 100644 components/ThemedView.tsx delete mode 100644 components/__tests__/ThemedText-test.tsx delete mode 100644 components/__tests__/__snapshots__/ThemedText-test.tsx.snap delete mode 100644 components/navigation/TabBarIcon.tsx delete mode 100644 constants/Colors.ts delete mode 100644 expo-env.d.ts delete mode 100644 hooks/useColorScheme.ts delete mode 100644 hooks/useColorScheme.web.ts delete mode 100644 hooks/useThemeColor.ts create mode 100644 index.js create mode 100644 metro.config.js delete mode 100644 package-lock.json delete mode 100644 scripts/reset-project.js rename app/(tabs)/settings.tsx => src/screens/SettingsScreen.tsx (58%) rename app/(tabs)/index.tsx => src/screens/TimerScreen.tsx (59%) diff --git a/.gitignore b/.gitignore index 9ca9696e..c48d0278 100644 --- a/.gitignore +++ b/.gitignore @@ -1,19 +1,43 @@ -.expo/ +# Dependencies +node_modules/ + +# Build output dist/ +build/ +android/app/build/ +ios/build/ + +# Debug logs npm-debug.* +yarn-debug.* +yarn-error.* + +# Signing keys and certificates *.jks *.p8 *.p12 *.key *.mobileprovision *.orig.* -web-build/ -package-lock.json -package.json -expo-env.d.ts + +# IDE +.idea/ +.vscode/ +*.swp +*.swo # macOS .DS_Store -# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb -# The following patterns were generated by expo-cli +# React Native +*.hbc + +# Buck +buck-out/ +\.buckd/ + +# CocoaPods +ios/Pods/ + +# Temporary files +*.log diff --git a/App.tsx b/App.tsx new file mode 100644 index 00000000..bc63267d --- /dev/null +++ b/App.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { StatusBar } from 'react-native'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; +import TimerScreen from './src/screens/TimerScreen'; + +export default function App() { + return ( + + + + + ); +} diff --git a/app.json b/app.json index ce41b45f..c6099f3b 100644 --- a/app.json +++ b/app.json @@ -1,36 +1,4 @@ { - "expo": { - "name": "intervaltimerap", - "slug": "intervaltimerap", - "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" - }, - "ios": { - "supportsTablet": true - }, - "android": { - "adaptiveIcon": { - "foregroundImage": "./assets/images/adaptive-icon.png", - "backgroundColor": "#ffffff" - } - }, - "web": { - "bundler": "metro", - "output": "static", - "favicon": "./assets/images/favicon.png" - }, - "plugins": [ - "expo-router" - ], - "experiments": { - "typedRoutes": true - } - } + "name": "IntervalTimer", + "displayName": "Interval Timer" } diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx deleted file mode 100644 index 22a49b62..00000000 --- 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/(tabs)/explore.tsx b/app/(tabs)/explore.tsx deleted file mode 100644 index e480218a..00000000 --- a/app/(tabs)/explore.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import Ionicons from '@expo/vector-icons/Ionicons'; -import { StyleSheet, Image, Platform } from 'react-native'; - -import { Collapsible } from '@/components/Collapsible'; -import { ExternalLink } from '@/components/ExternalLink'; -import ParallaxScrollView from '@/components/ParallaxScrollView'; -import { ThemedText } from '@/components/ThemedText'; -import { ThemedView } from '@/components/ThemedView'; - -export default function TabTwoScreen() { - return ( - }> - - 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 - - - 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. - - ), - })} - - - ); -} - -const styles = StyleSheet.create({ - headerImage: { - color: '#808080', - bottom: -90, - left: -35, - position: 'absolute', - }, - titleContainer: { - flexDirection: 'row', - gap: 8, - }, -}); diff --git a/app/(tabs)/route.tsx b/app/(tabs)/route.tsx deleted file mode 100644 index 21cbf218..00000000 --- a/app/(tabs)/route.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import MainScreen from './index'; - -export default function Root() { - return ; -} \ No newline at end of file diff --git a/app/+html.tsx b/app/+html.tsx deleted file mode 100644 index 8b924561..00000000 --- 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. */} -