🎮 react-native-games

react-native-games is a collection of 30 high-performance games for your React Native projects. Built with modern React Native technologies including Skia, Reanimated, Gesture Handler and TypeScript for smooth 60fps gameplay across iOS and Android platforms.

🎯 Available Games

| Screenshot | Game Details | | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | 🧩 Block BlastPlace blocks on grid to clear lines - strategic puzzle challenge!• Tetris-style block placement puzzle• Clear lines horizontally or vertically• Strategic planning required for high scores• Difficulty affects available block shapes | | | 🎯 Bubble ShooterMatch 3+ bubbles of the same color - classic puzzle fun!• Aim and shoot bubbles to match colors• Clear clusters of 3 or more bubbles• Physics-based bubble bouncing• Difficulty affects bubble speed and patterns | | | 🏎️ Car RacingDodge traffic and race through lanes - test your reflexes!• Lane-based racing with traffic dodging• Swipe to change lanes quickly• Collect coins and power-ups• Difficulty affects traffic density and speed | | | 🍎 Fruit NinjaSlice flying fruits with finger swipes - avoid the bombs!• Swipe-based fruit slicing mechanics• Physics-based particle effects and combos• Avoid bombs for survival• Difficulty affects fruit spawn rate and bomb frequency | | | 🫧 Popit FidgetPop satisfying bubbles in this relaxing fidget toy simulation!• Relaxing bubble popping experience• Satisfying sound effects and haptics• Rainbow gradient background• Different bubble patterns and colors | | | 🐦 Flappy BirdTap to flap and navigate through pipes - classic arcade challenge!• Classic tap-to-flap mechanics• Gravity physics and collision detection• Navigate through pipe gaps• Difficulty affects pipe gap size and speed | | | 🎨 Colors SortSort colored liquids into matching tubes - challenging logic puzzle!• Pour liquids between tubes• Match all colors in separate tubes• Satisfying pour animations• Difficulty affects number of tubes and colors | | | 🦖 Dino JumpJump over obstacles and collect stars for lives - endless runner!• Chrome dino-inspired endless runner• Tap to jump over obstacles• Collect stars for extra lives (max 3)• Difficulty affects obstacle spawn rate and speed | | | 🍬 Candy CrushMatch colorful candies in rows to score points - sweet puzzle fun!• Match-3 puzzle mechanics• Create special candies with 4+ matches• Cascading combos and animations• Difficulty affects level objectives | | | 🐱 Whack A MoleWhack cute cats popping from holes - test your lightning reflexes!• Fast-paced whacking action• Grid sizes: easy/medium 3x3, hard 4x4• Cat spawn intervals vary by difficulty• Difficulty affects speed and grid size | | | 🎈 Balloon BlasterPop rising balloons before they escape - quick taps and swipes win!• Swipe or tap to pop balloons• Balloons rise from bottom to top• Particle effects on pop• Difficulty affects balloon speed and spawn rate | | | 🚀 Space FighterPilot your spaceship through asteroid fields - endless space survival!• Drag controls for spacecraft movement• Dodge asteroids in endless space• 1-second collision immunity• Difficulty affects asteroid speed and frequency | | | 🏍️ Bike RacingRace on bikes through traffic - faster and more challenging!• High-speed bike racing• Lane-based traffic dodging• Faster than car racing• Difficulty affects traffic and speed | | | 🧩 Maze RunnerNavigate ball through procedural mazes - tilt and physics controls!• Procedurally generated mazes• Tilt-based physics controls• Grid sizes: easy 8x8, medium 10x10, hard 12x12• Difficulty affects maze complexity | | | 🔢 Sliding NumbersSlide numbered tiles to solve puzzles - classic sliding puzzle game!• Classic 15-puzzle mechanics• Grid sizes: easy 3x3, medium 4x4, hard 5x5• Timer challenge mode• Smooth tile sliding animations | | | 🎮 2048Merge matching tiles to reach 2048 and beyond - addictive puzzle!• Swipe to merge matching tiles• Reach 2048 tile to win• Continue for higher scores• Difficulty affects starting values | | | 🍉 Fruit MergerDrop and merge fruits to create bigger ones - reach the watermelon!• Physics-based fruit dropping• Merge fruits to evolve them• Reach watermelon for victory• Combo system for multiple merges | | | 🐍 Snake & EggsEat eggs to grow longer and avoid walls - classic snake gameplay!• Classic snake mechanics• Swipe or tap to change direction• Grow by eating eggs• Difficulty affects snake speed | | | ⭕ Perfect CircleDraw the most perfect circle you can - test your precision!• Draw circles with your finger• Precision scoring system• Challenge your drawing skills• Difficulty affects scoring strictness | | | 🪖 Tank 1990Classic tank battle - destroy enemies and defend your base!• Retro-style tank combat• Destructible terrain and barriers• Defend your base from enemy waves• Difficulty affects enemy count and speed | | | 🎲 Ludo KingClassic board game - roll dice and race your tokens home!• Classic Ludo board game• Play against AI opponents• Roll dice and move tokens strategically• Difficulty affects AI intelligence | | | 🔲 Dots and BoxesConnect dots to complete boxes - classic strategy game vs AI!• Classic pen-and-paper strategy game• Play against smart AI opponent• Complete boxes by connecting dots• Difficulty affects AI strategy | | | 🔢 Number SearchFind hidden numbers in the grid - swipe to select digits!• Number-based word search variant• Swipe to find hidden number sequences• Timed challenge mode• Difficulty affects grid size and number count | | | 🔩 Nuts and BoltsUnscrew bolts and remove planks to solve puzzles!• Physics-based bolt unscrewing puzzles• Remove planks in the correct order• Satisfying unscrewing mechanics• Difficulty affects puzzle complexity | | | 🔗 Connect Em AllConnect matching colored dots to score points!• Connect dots of the same color• Draw paths without crossing lines• Fill the entire board for bonus points• Difficulty affects grid size and color count | | | 📝 Word SearchFind hidden words in the grid - swipe to select letters!• Classic word search puzzle• Swipe to find hidden words• Multiple word categories• Difficulty affects grid size and word count | | | 🀄 Tile HomeMatch 3 tiles of the same type - classic mahjong-style puzzle!• Mahjong-style tile matching• Match 3 identical tiles to clear them• Strategic tile selection• Difficulty affects tile variety and layout | | | 👾 Pac-ManClassic arcade game - eat dots, avoid ghosts, and clear the maze!• Classic Pac-Man maze gameplay• Eat dots and avoid ghost enemies• Power pellets to chase ghosts• Difficulty affects ghost speed and AI | | | 🕷️ Spider SolitaireClassic Spider Solitaire - build sequences and clear the tableau!• Classic Spider Solitaire card game• Build descending card sequences• Multiple suit difficulty levels• Undo and hint system | | | ❌ Tic Tac ToeClassic X and O game - play against a smart robot!• Classic tic-tac-toe gameplay• Play against AI with varying intelligence• Clean grid-based interface• Difficulty affects AI strategy |

📦 Installation

npm install react-native-games
# or
yarn add react-native-games

🔧 Peer Dependencies

This library requires the following peer dependencies to be installed in your project:

npm install @shopify/react-native-skia react-native-reanimated react-native-gesture-handler react-native-worklets expo-speech expo-haptics

Platform Setup

Follow the installation guides for each peer dependency:

• @shopify/react-native-skia - Graphics
• react-native-reanimated - Animations
• react-native-gesture-handler - Gestures
• expo-speech - Sounds
• expo-haptics - Haptics

🚀 Usage

Simple Implementation

For basic usage without settings persistence:

import React, { useState } from 'react';
import { View } from 'react-native';
import { DEFAULT_GAME_SETTINGS, FruitNinja } from 'react-native-games';

export default function GameScreen() {
  const [settings, setSettings] = useState(DEFAULT_GAME_SETTINGS);

  return (
    <View style={{ flex: 1 }}>
      <FruitNinja settings={settings} onSettingsChange={setSettings} />
    </View>
  );
}

Advanced Implementation Example

All games use the same props pattern for consistency. Here's a complete example with settings persistence and navigation integration:

import { View, TouchableOpacity } from 'react-native';
import { useState, useLayoutEffect } from 'react';
import { useNavigation, useTheme } from '@react-navigation/native';
import { Ionicons } from '@expo/vector-icons';
import { DEFAULT_GAME_SETTINGS, GAME_IDS, type GameSettings, FruitNinja } from 'react-native-games';
import { StorageService } from '../services/StorageService';

export default function FruitNinjaScreen() {
  const { colors } = useTheme();
  const storedSettings = StorageService.get(GAME_IDS.FRUIT_NINJA);
  const [settings, setSettings] = useState(storedSettings || DEFAULT_GAME_SETTINGS);
  const navigation = useNavigation();

  const handleSettingsChange = (newSettings: GameSettings) => {
    setSettings(newSettings);
    StorageService.set(GAME_IDS.FRUIT_NINJA, newSettings);
  };

  const handleToggleSettingsModal = () => {
    setSettings({ ...settings, isVisible: !settings.isVisible });
  };

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity className="p-2" onPress={handleToggleSettingsModal}>
          <Ionicons name="settings-outline" size={24} color={colors.text} />
        </TouchableOpacity>
      )
    });
  }, [navigation, handleToggleSettingsModal]);

  return (
    <View className="flex-1 bg-background">
      <FruitNinja settings={settings} onSettingsChange={handleSettingsChange} />
    </View>
  );
}

Available Games

All games use the same props interface:

// Import any game you want
import {
  BlockBlast,
  BubbleShooter,
  CarRacing,
  FruitNinja,
  PopitFidget,
  FlappyBird,
  ColorsSort,
  DinoJump,
  CandyCrush,
  WhackAMole,
  BalloonBlaster,
  SpaceFighter,
  BikeRacing,
  MazeRunner,
  SlidingNumbers,
  Game2048,
  FruitMerger,
  Snake3D,
  PerfectCircle,
  Tank1990,
  LudoKing,
  DotsAndBoxes,
  NumberSearch,
  NutsAndBolts,
  ConnectEmAll,
  WordSearch,
  TileHome,
  PacMan,
  SpiderSolitaire,
  TicTacToe
} from 'react-native-games';

// All games accept the same props:
<GameComponent settings={settings} onSettingsChange={handleSettingsChange} />;

Game Settings & Configuration

All games use the unified GameSettings interface:

interface GameSettings {
  isVisible: boolean; // Settings modal visibility
  difficulty: 'easy' | 'medium' | 'hard';
  enableSounds: boolean; // Audio feedback
  enableHaptics: boolean; // Haptic feedback
}

// Default settings for all games
const DEFAULT_GAME_SETTINGS = {
  isVisible: false,
  difficulty: 'medium',
  enableSounds: true,
  enableHaptics: true,
  offset: 0
};

Game Settings

Each game includes built-in settings screens with a unified, simplified interface:

• Difficulty Levels: Easy, Medium, Hard - each game has custom difficulty descriptions and behaviors
• Sound Effects: Toggle audio feedback on/off
• Haptic Feedback: Toggle vibration feedback on/off

All games use a centralized settings system for consistency and ease of maintenance. Game durations and difficulty behaviors are customized per game for optimal gameplay experience.

📚 API Reference

Exported Constants & Types

import {
  // Game IDs Enum
  GAME_IDS,

  // Default Settings
  DEFAULT_GAME_SETTINGS,

  // Games List & Mapping
  GAMES_LIST,
  GAMES_MAPPING,

  // TypeScript Types
  type GameSettings,
  type GameProps,
  type GameDefinition,
  type GameComponent,

  // All Game Components (30 total)
  BlockBlast,
  BubbleShooter,
  CarRacing,
  FruitNinja,
  PopitFidget,
  FlappyBird,
  ColorsSort,
  DinoJump,
  CandyCrush,
  WhackAMole,
  BalloonBlaster,
  SpaceFighter,
  BikeRacing,
  MazeRunner,
  SlidingNumbers,
  Game2048,
  FruitMerger,
  Snake3D,
  PerfectCircle,
  Tank1990,
  LudoKing,
  DotsAndBoxes,
  NumberSearch,
  NutsAndBolts,
  ConnectEmAll,
  WordSearch,
  TileHome,
  PacMan,
  SpiderSolitaire,
  TicTacToe
} from 'react-native-games';

GAME_IDS Enum

All available game identifiers:

GAME_IDS.BLOCK_BLAST; // 'block-blast'
GAME_IDS.BUBBLE_SHOOTER; // 'bubble-shooter'
GAME_IDS.CAR_RACING; // 'car-racing'
GAME_IDS.FRUIT_NINJA; // 'fruit-ninja'
GAME_IDS.POPIT_FIDGET; // 'popit-fidget'
GAME_IDS.FLAPPY_BIRD; // 'flappy-bird'
GAME_IDS.COLORS_SORT; // 'colors-sort'
GAME_IDS.DINO_JUMP; // 'dino-jump'
GAME_IDS.CANDY_CRUSH; // 'candy-crush'
GAME_IDS.WHACK_A_MOLE; // 'whack-a-mole'
GAME_IDS.BALLOON_BLASTER; // 'balloon-blaster'
GAME_IDS.SPACE_FIGHTER; // 'space-fighter'
GAME_IDS.BIKE_RACING; // 'bike-racing'
GAME_IDS.MAZE_RUNNER; // 'maze-runner'
GAME_IDS.SLIDING_NUMBERS; // 'sliding-numbers'
GAME_IDS.GAME_2048; // 'game-2048'
GAME_IDS.FRUIT_MERGER; // 'fruit-merger'
GAME_IDS.SNAKE_3D; // 'snake-3d'
GAME_IDS.PERFECT_CIRCLE; // 'perfect-circle'
GAME_IDS.SPIDER_SOLITAIRE; // 'spider-solitaire'
GAME_IDS.TIC_TAC_TOE; // 'tic-tac-toe'
GAME_IDS.PAC_MAN; // 'pac-man'
GAME_IDS.TILE_HOME; // 'tile-home'
GAME_IDS.WORD_SEARCH; // 'word-search'
GAME_IDS.CONNECT_EM_ALL; // 'connect-em-all'
GAME_IDS.NUTS_AND_BOLTS; // 'nuts-and-bolts'
GAME_IDS.NUMBER_SEARCH; // 'number-search'
GAME_IDS.DOTS_AND_BOXES; // 'dots-and-boxes'
GAME_IDS.LUDO_KING; // 'ludo-king'
GAME_IDS.TANK_1990; // 'tank-1990'

DEFAULT_GAME_SETTINGS

Default configuration for all games:

const DEFAULT_GAME_SETTINGS = {
  isVisible: false, // Settings modal visibility
  difficulty: 'medium', // Game difficulty level
  enableSounds: true, // Audio feedback enabled
  enableHaptics: true, // Haptic feedback enabled
  offset: 0 // Top offset for notch/status bar
};

// Example: Custom settings with offset
const customSettings = {
  ...DEFAULT_GAME_SETTINGS,
  offset: 50 // Moves game elements 50px down from top
};

GAMES_LIST

Array of all game definitions with metadata:

// GAMES_LIST is an array of GameDefinition objects
GAMES_LIST.forEach(game => {
  console.log(game.id); // GAME_IDS enum value
  console.log(game.title); // Display title
  console.log(game.description); // Game description
  console.log(game.component); // React component
});

// Example: Find a specific game
const fruitNinja = GAMES_LIST.find(g => g.id === GAME_IDS.FRUIT_NINJA);

GAMES_MAPPING

Object mapping game IDs to their components:

// Access game component by ID
const GameComponent = GAMES_MAPPING[GAME_IDS.FRUIT_NINJA];

// Render dynamically
<GameComponent settings={settings} onSettingsChange={handleChange} />;

TypeScript Types

// Game settings interface
interface GameSettings {
  isVisible: boolean; // Settings modal visibility
  difficulty: 'easy' | 'medium' | 'hard';
  enableSounds: boolean; // Audio feedback
  enableHaptics: boolean; // Haptic feedback
  offset?: number; // Optional padding from top (default: 0)
}

// Game completion metrics
interface GameCompletionMetrics {
  status: 'win' | 'lose' | 'cancel';
  score?: string;
}

// Game component props
interface GameProps {
  settings?: GameSettings;
  onSettingsChange?: (settings: GameSettings) => void;
  onEndGame?: (metrics: GameCompletionMetrics) => void;
  onReplayGame?: () => void;
  onShare?: () => void;
  onShowLeaderboard?: () => void;
}

📄 License

This library is available under a dual licensing model:

🆓 Non-Commercial License (Free)

• ✅ Personal projects and learning
• ✅ Educational use and research
• ✅ Open source projects (non-commercial)
• ✅ Portfolio and demonstration apps

💼 Commercial License (Paid)

Required for commercial use including:

• 🏢 Commercial applications and products
• 💰 Revenue-generating projects
• 🏪 App Store or Play Store apps with monetization
• 🏭 Enterprise and business applications

Commercial licensing includes:

• Full commercial usage rights
• Priority support and maintenance
• Custom feature development consideration
• Optional attribution removal

Get Commercial License: 📧 Email: [email protected]

See the complete LICENSE file for detailed terms and definitions.

🙏 Acknowledgments

• Built with React Native Skia for high-performance graphics
• Powered by React Native Reanimated for smooth animations
• Enhanced with React Native Worklets for high-performance JavaScript
• State management with Zustand and Immer
• Created with create-react-native-library

📞 Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 🌐 Website: https://www.playtura.in

Made with ❤️ by Niranjan Devasani