{"id":26271288,"url":"https://github.com/arsh342/tic-tac-toe-react-native","last_synced_at":"2026-04-22T08:31:49.539Z","repository":{"id":282080156,"uuid":"947113834","full_name":"arsh342/tic-tac-toe-react-native","owner":"arsh342","description":"This repository contains a React Native mobile application for Android, featuring a fun and interactive Tic Tac Toe game with single-player and two-player modes, along with a React-based website for users to download the APK file.","archived":false,"fork":false,"pushed_at":"2026-01-27T18:05:51.000Z","size":2625,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-28T03:08:47.471Z","etag":null,"topics":["android","android-app","expo","expo-cli","expo-go","react-native"],"latest_commit_sha":null,"homepage":"https://downloadapp.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arsh342.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-03-12T07:11:16.000Z","updated_at":"2026-01-27T18:16:30.000Z","dependencies_parsed_at":"2025-09-09T11:08:21.751Z","dependency_job_id":"68a25aa8-1c71-4e03-80a4-926441cff40c","html_url":"https://github.com/arsh342/tic-tac-toe-react-native","commit_stats":null,"previous_names":["arsh342/tic-tac-toe-react-native"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/arsh342/tic-tac-toe-react-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arsh342%2Ftic-tac-toe-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arsh342%2Ftic-tac-toe-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arsh342%2Ftic-tac-toe-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arsh342%2Ftic-tac-toe-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arsh342","download_url":"https://codeload.github.com/arsh342/tic-tac-toe-react-native/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arsh342%2Ftic-tac-toe-react-native/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32127854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T07:37:52.372Z","status":"ssl_error","status_checked_at":"2026-04-22T07:37:51.635Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-app","expo","expo-cli","expo-go","react-native"],"created_at":"2025-03-14T06:19:15.058Z","updated_at":"2026-04-22T08:31:49.223Z","avatar_url":"https://github.com/arsh342.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":" # Tic Tac Toe - React Native\n\nA modern and optimized Tic Tac Toe game built with React Native and Expo, designed to provide a smooth and engaging user experience across various devices, including foldable phones and tablets.\n\n## ✨ Features\n\n*   **Single Player Mode:** Play against a challenging AI opponent.\n*   **Two Players Mode:** Play locally with a friend on the same device.\n*   **AI Difficulty Levels:** Choose between easy and hard AI difficulties.\n*   **Customizable Player Names:** Personalize player names for both X and O.\n*   **Theming Options:** Switch between light and dark themes.\n*   **Sound Effects:** Toggle in-game sound effects.\n*   **Score Tracking:** Keep track of wins for each player.\n*   **Move History:** View a log of all moves made during a game.\n*   **Game Reset \u0026 Undo:** Reset the game or undo the last move.\n\n## 🚀 Optimizations \u0026 Enhancements\n\nThis project has been significantly optimized for performance, user experience, and adaptability across different device types.\n\n*   **Foldable Phone Optimization:**\n    *   Dynamic screen dimension tracking in the root layout.\n    *   Implementation of safe area insets to prevent content overlap with system UI.\n    *   Responsive layouts that adapt to both portrait and landscape orientations.\n    *   Optimized game board sizing to fit within screen bounds on foldable devices.\n*   **Tablet Orientation Support:**\n    *   Enabled automatic orientation changes for tablets by setting `orientation` to `\"default\"` in `app.json`.\n*   **Performance Optimization:**\n    *   Extensive use of `React.memo`, `useMemo`, and `useCallback` hooks across `app/game.tsx`, `app/settings.tsx`, and `app/(tabs)/index.tsx` to:\n        *   Reduce unnecessary component re-renders.\n        *   Memoize expensive calculations and object creations (e.g., theme `colors`, `boardSize`).\n        *   Provide stable function references for event handlers, improving the efficiency of child components.\n    *   Optimized image assets and font loading to minimize app footprint.\n*   **Animation Enhancements:**\n    *   Implemented `react-native-reanimated` for smooth and engaging animations.\n    *   **Home Screen:** Staggered `FadeInUp` and `FadeInLeft` animations for the title and game mode selection buttons.\n    *   **Game Screen:** Entry animations (`FadeInUp`, `FadeInLeft`, `FadeInRight`) for the game board, status text, header elements (Back button, Score container), and the \"Play Again\" button.\n    *   **Settings Screen:** Staggered `FadeInUp` animations for the title and each settings section, creating a dynamic entry effect.\n*   **Dark Mode Flash Fix:**\n    *   Ensured the root view's background color in `app/_layout.tsx` matches the theme from the very beginning, eliminating a brief white flash when opening the app in dark mode.\n*   **Navigation Bar Adjustment:**\n    *   The tab bar now correctly adjusts its bottom padding using `useSafeAreaInsets` to account for on-screen navigation buttons, ensuring it's always visible.\n\n## 🛠️ Technologies Used\n\n*   **React Native:** A framework for building native apps using React.\n*   **Expo:** A framework and platform for universal React applications.\n*   **Zustand:** A small, fast, and scalable bear-bones state-management solution.\n*   **React Native Reanimated:** A powerful animation library for React Native.\n*   **Expo Router:** File-system based routing for Expo and React Native.\n*   **Lucide Icons:** A set of beautiful and consistent open-source icons.\n*   **@expo-google-fonts/space-grotesk:** Google Fonts integration for Expo projects.\n*   **@react-native-async-storage/async-storage:** Persistent key-value storage.\n*   **react-native-safe-area-context:** API for consuming insets from safe area.\n\n## 📦 Setup Instructions\n\n### Prerequisites\n\n*   Node.js (LTS version recommended)\n*   npm or yarn\n*   Expo CLI (`npm install -g expo-cli`)\n\n### Installation\n\n1.  **Clone the repository:**\n    ```bash\n    git clone https://github.com/your-username/tic-tac-toe-react-native.git\n    cd tic-tac-toe-react-native\n    ```\n2.  **Install dependencies:**\n    ```bash\n    npm install\n    # OR\n    yarn install\n    ```\n\n## 🏃‍♀️ Running the App\n\n### For Development\n\n```bash\nnpm run dev\n# OR\nyarn dev\n```\nThis will start the Expo development server. You can then:\n*   Scan the QR code with the Expo Go app on your phone.\n*   Press `a` to run on Android emulator.\n*   Press `i` to run on iOS simulator.\n*   Press `w` to run in a web browser.\n\n### For Production Builds\n\n```bash\n# Build for Android\neas build -p android --profile production\n\n# Build for iOS\neas build -p ios --profile production\n\n# Build for Web\nnpm run build:web\n# OR\nyarn build:web\n```\n\n## 📂 Project Structure\n\n```\n.\n├── app/                  # Main application screens and navigation\n│   ├── (tabs)/           # Tab-based navigation screens (Home, Leaderboard, Settings)\n│   │   ├── _layout.tsx   # Tab navigator configuration\n│   │   └── index.tsx     # Home screen (game mode selection)\n│   ├── _layout.tsx       # Root layout for the app (global configuration)\n│   ├── game.tsx          # Main Tic Tac Toe game logic and UI\n│   └── settings.tsx      # App settings screen\n├── assets/               # Static assets like images and fonts\n├── components/           # Reusable UI components\n├── hooks/                # Custom React hooks\n├── store/                # Zustand stores for state management (game logic, theme)\n├── .gitignore            # Git ignore file\n├── app.json              # Expo application configuration\n├── package.json          # Project dependencies and scripts\n├── tsconfig.json         # TypeScript configuration\n└── README.md             # Project documentation (this file)\n```\n\n## 🤝 Credits\n\nThis project was built as a demonstration of a highly optimized and animated React Native application using modern best practices.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farsh342%2Ftic-tac-toe-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farsh342%2Ftic-tac-toe-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farsh342%2Ftic-tac-toe-react-native/lists"}