React Native Guess Game 🎯

A fully functional number guessing game built with React Native and Expo, designed to demonstrate core React Native concepts including state management, component-based architecture, conditional rendering, and dynamic list handling with FlatList.

---

🚀 Features

• Number guessing game: Player picks a number, the device guesses it.
• Round tracking: Logs all guesses with round numbers.
• Game reset: Start a new game anytime.
• Custom components: Reusable UI elements like buttons, cards, and log items.
• Responsive UI: Scrollable list for guesses, works across devices.
• Styling & layout: Flexbox, shadows, and themed colors.

---

🧩 Built With

• React Native – Core mobile framework
• Expo – Simplified React Native workflow
• JavaScript / JSX – Logic and UI structure
• React Hooks – useState, useEffect for state and side effects
• FlatList – Efficient list rendering

---

📝 Usage

1. Clone the repository:

git clone https://github.com/khalil-js/react-native-guess-game.git
cd react-native-guess-game

2. Install dependencies:

npm install
# or
yarn install

3. Start the app with Expo:

expo start

4. Open on your device or simulator:

• Android: Expo Go app or emulator
• iOS: Expo Go app or simulator

---

⚙️ How It Works

• Game Flow:

  1. Player selects a number
  2. Device guesses numbers until correct
  3. Each guess is logged and displayed
  4. Game Over screen shows the number of rounds

• Components:

  • StartGameScreen – Select the number to start
  • GameScreen – Device guesses and logs rounds
  • GameOverScreen – Displays results and restart button
  • GuessLogItem – Styled log entries for each guess

• State Management:

  • useState → Track current guess, rounds, user number
  • useEffect → Reset min/max boundaries when a new game starts
  • Data flows from child → parent via callback props

---

💡 Learnings / Concepts

• Building custom components from core React Native components
• Conditional rendering for screen navigation
• Using FlatList for optimized list rendering
• Styling with Flexbox, shadows, and theme colors
• Managing state and side effects with React Hooks
• Passing data between components (parent ↔ child)

---

📂 Project Structure

/TargetApp
├─ /components      # Reusable UI and game-specific components
├─ /constants       # Colors, styles, constants
├─ App.js           # Main app entry
├─ package.json
├─ README.md

---

✨ Possible Improvements

• Add animations for guesses
• Make app fully responsive for landscape mode
• Extract more reusable components and style merging
• Add sound effects or haptics for interaction
• Save high scores locally or with AsyncStorage

---

📝 Author

Khalil – GitHub Profile

Do you want me to do that next?