Get Started

Installation

npm install react-native-games

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 {
  FruitNinja,
  CandyCrush,
  FlappyBird,
  ColorsSort,
  DinoJump,
  PopitFidget,
  WhackAMole,
  BalloonBlaster,
  SpaceFighter,
  MazeRunner,
  SlidingNumbers,
  Game2048,
  FruitMerger,
  Snake
} 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.