React Native Numbers Game 🎮

A fun and interactive number guessing game built with React Native and Expo. Challenge your phone to guess the number you're thinking of!

📱 About The Game

This is a reverse number guessing game where the phone attempts to guess a number that YOU are thinking of. You provide hints (higher or lower) to guide the phone toward the correct answer. The game tracks how many rounds it takes for the phone to guess your number.

📸 Screenshots

From left to right: Start Screen, Guessing Screen, Game Over Screen

✨ Features

• 🎯 Interactive number guessing gameplay
• 📊 Round tracking and game statistics
• 🎨 Beautiful gradient UI with custom styling
• 🖼️ Background image with opacity effects
• 📱 Responsive design for different screen sizes
• 🔤 Custom fonts (Open Sans)
• ⚡ Optimized splash screen loading
• 🎭 Platform-specific components (iOS/Android)
• 📝 Guess history log
• 🔄 Restart game functionality

🛠️ Tech Stack

• React Native - Mobile app framework
• Expo SDK 49 - Development platform
• React 18.2 - UI library
• Expo Linear Gradient - Gradient backgrounds
• Expo Font - Custom font loading
• Expo Splash Screen - App loading screen
• Expo Status Bar - Status bar styling
• Ionicons - Icon library

📂 Project Structure

react-native-numbers-game/
├── App.js                          # Main app component with navigation logic
├── screens/
│   ├── StartGameScreen.js          # Initial screen for number input
│   ├── GameScreen.js               # Main game screen with guessing logic
│   └── GameOverScreen.js           # Victory screen with statistics
├── components/
│   ├── game/
│   │   ├── GuessLogItem.js         # Individual guess history item
│   │   └── NumberContainer.js      # Display container for numbers
│   └── ui/
│       ├── Card.js                 # Reusable card container
│       ├── InstructionText.js      # Styled instruction text
│       ├── PrimaryButton.js        # Custom button component
│       ├── Title.android.js        # Android-specific title
│       └── Title.ios.js            # iOS-specific title
├── constants/
│   ├── colors.android.js           # Android color theme
│   └── colors.ios.js               # iOS color theme
├── assets/
│   ├── fonts/
│   │   ├── OpenSans-Regular.ttf
│   │   └── OpenSans-Bold.ttf
│   └── images/
│       ├── background.png          # Background image
│       └── success.png             # Victory image
└── package.json

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Expo CLI
• iOS Simulator (for macOS) or Android Emulator

Installation

1. Clone the repository:

git clone <repository-url>
cd react-native-numbers-game

2. Install dependencies:

npm install
# or
yarn install

3. Start the development server:

npm start
# or
yarn start

4. Run on your preferred platform:

# iOS
npm run ios

# Android
npm run android

# Web (limited functionality)
npm run web

🎮 How to Play

1. Start Screen: Enter a number between 1 and 99 that you're thinking of
2. Game Screen: The phone will make its first guess
   • Tap the ➖ (Lower) button if your number is lower than the guess
   • Tap the ➕ (Higher) button if your number is higher than the guess
3. Game Over Screen: Once the phone guesses correctly, see how many rounds it took!
4. Restart: Tap "Start New Game" to play again

Game Rules

• Choose a number between 1 and 99
• You must be honest with your hints!
• The game detects if you provide contradictory hints
• Each guess is logged in the guess history

🏗️ Key Components

Screens

• StartGameScreen: Number input with validation and keyboard handling
• GameScreen: Core game logic with binary search algorithm
• GameOverScreen: Victory celebration with round statistics

UI Components

• Card: Elevated container with shadow and rounded corners
• PrimaryButton: Styled pressable button with ripple effect
• Title: Platform-specific title component
• InstructionText: Consistent text styling
• NumberContainer: Highlighted number display

Game Components

• NumberContainer: Displays the current guess prominently
• GuessLogItem: Shows individual guesses in the history

🎨 Styling Features

• Linear gradient background (primary to accent colors)
• Semi-transparent background image
• Platform-specific color schemes
• Responsive layouts using useWindowDimensions
• Custom fonts with fallback support
• Shadow effects and elevation

📱 Platform-Specific Features

The app includes platform-specific implementations:

• Colors: Different color schemes for iOS and Android
• Title Component: Platform-optimized text styling
• Status Bar: Light content style

🔧 Configuration

Custom Fonts

Fonts are loaded using expo-font:

• Open Sans Regular
• Open Sans Bold

Splash Screen

The app uses expo-splash-screen for optimized loading:

• Prevents auto-hide during font loading
• Smoothly transitions to the app when ready

🐛 Troubleshooting

Common Issues

1. Fonts not loading: Clear cache with expo start --clear
2. Module errors: Delete node_modules and reinstall
3. Metro bundler issues: Reset with watchman watch-del-all

Clear Cache

# Clear Expo cache
npx expo start --clear

# Clear watchman
watchman watch-del-all

# Reinstall dependencies
rm -rf node_modules && npm install

📦 Dependencies

{
  "expo": "~49.0.8",
  "expo-font": "~11.4.0",
  "expo-linear-gradient": "~12.3.0",
  "expo-splash-screen": "^0.20.5",
  "expo-status-bar": "~1.6.0",
  "react": "18.2.0",
  "react-native": "0.72.4"
}

🤝 Contributing

Contributions are welcome! Feel free to:

1. Fork the project
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is open source and available for educational purposes.

🙏 Acknowledgments

• Built with Expo and React Native
• Uses OpenSans font family
• Inspired by classic number guessing games

---

Made with ❤️ using React Native & Expo