Installation

npm install @nayan-ui/games

yarn add @nayan-ui/games

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

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

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

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

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 '@nayan-ui/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>
  );
}

// Import any game you want
import {
  Arrows,
  BalloonBlaster,
  BikeRacing,
  BlockBlast,
  BlockBreaker,
  BubbleShooter,
  CandyCrush,
  CarRacing,
  ColorSwitch,
  ColorsSort,
  ConnectEmAll,
  DinoJump,
  DotsAndBoxes,
  FindDifferentNumber,
  FlappyBird,
  FruitMerger,
  FruitNinja,
  Game2048,
  KnifeHit,
  LudoKing,
  MazeRunner,
  MineSweeper,
  NumberSearch,
  NutsAndBolts,
  PacMan,
  PerfectCircle,
  PipeConnect,
  PopitFidget,
  SlidingNumbers,
  Snake3D,
  SnakesAndLadders,
  SpaceFighter,
  SpiderSolitaire,
  StackTower,
  Sudoku,
  Tank1990,
  TicTacToe,
  TileHome,
  WhackAMole,
  WordSearch
} from '@nayan-ui/games';

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

interface GameSettings {
  isVisible: boolean;        // Settings modal visibility
  enableSounds: boolean;     // Audio feedback
  enableHaptics: boolean;    // Haptic feedback
  enableMusic: boolean;      // Background music
  offset?: number;           // Top offset for notch/status bar
}

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