A Match-3 Candy Game component for React Native (Candy Crush-style)
npm install react-native-candy-gameA simple match-3 style game (Candy Crush-style) built using React Native + TypeScript.
- 🎮 8x8 candy grid
- 🧠 Match-3 logic (horizontal + vertical)
- 🧾 Scoring system
- 🕐 Time limit per level
- 📈 Multiple levels with increasing difficulty
- 🗨 Multilingual text support via props
- 💾 Score & level saving with AsyncStorage
- ⏳ Mini splash screen with optional text translation
- 🍬 Bonus candies (row and column destroyers)
``bash`
npm install react-native-candy-game
`tsx
import { CandyGameScreen } from 'react-native-candy-game';
translations={{
scoreLabel: 'Рахунок',
timeLeftLabel: 'Час',
finalScoreLabel: 'Підсумковий рахунок',
gameOverText: 'Гра завершена!',
loadingLevelText: 'Завантаження рівня...',
}}
onScoreSaved={(score) => console.log('Score:', score)}
/>
`
All UI texts can be translated via the translations prop:
| Prop Key | Default (English) |
|-----------------------|-----------------------------|
| scoreLabel | Score |timeLeftLabel
| | Time Left |finalScoreLabel
| | Final Score |gameOverText
| | Game Over! |levelCompleteText
| | Level Complete! |nextLevelText
| | Next Level |retryText
| | Retry |loadingLevelText
| | Loading your level… |
- The game remembers your last level using AsyncStorage.
- Automatically resumes from the saved level on app launch.
`tsx
import { CandyGameScreen, LevelSelectScreen } from 'react-native-candy-game';
import { createStackNavigator } from '@react-navigation/native-stack';
const Stack = createStackNavigator();
`
Special candies randomly appear during the game:
- 🍬 Row Destroyer Candy – clears entire row
- 🍬 Column Destroyer Candy – clears entire column
Customize their images in assets/bonus_row.png and assets/bonus_col.png.
Include a .gif` file showing gameplay if desired.
Pull requests, issues, and feedback are always welcome. Let's make this game better together!