React Native SDK (https://www.npmjs.com/package/@simula/ads-react-native) for integrating contextual advertising and mini-game components into AI character apps.

Quick Start

1. Provider Setup

Wrap your application with SimulaProvider to initialize the SDK:

function App() {
  return (
    <SimulaProvider 
      apiKey="SIMULA_xxx"
      primaryUserID="xxxxx" // Optional: Hashed publisher provided user ID, highly recommended for better ad targeting
      hasPrivacyConsent={true} // Optional: Privacy consent flag. When false, suppresses collection of PII
      devMode={false} // Optional: Determines whether session is in dev mode or not
    >
      {/* Your application components */}
    </SimulaProvider>
  );
}

2. Component Integration

Add components where you want ads or games to appear.

MiniGameMenu

Modal component for displaying and launching sponsored mini-games. Clicking on a sponsored mini game opens an iframe that allows for a playable game.

Basic Usage

function ChatInterface() {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <>
      <button onClick={() => setMenuOpen(true)}>
        Play Games
      </button>

      <MiniGameMenu
        isOpen={menuOpen}
        onClose={() => setMenuOpen(false)}
        charName="Luna"
        charID="luna-123"
        charImage="<https://cdn.example.com/avatars/luna.png>"
      />
    </>
  );
}

Props

Note: Minigames require privacy consent. If hasPrivacyConsent is false in SimulaProvider, the menu displays a consent required message instead of games.

Theme Configuration

interface MiniGameTheme {
  backgroundColor?: string;
  headerColor?: string;
  borderColor?: string;
  titleFont?: string;
  secondaryFont?: string;
  titleFontColor?: string;
  secondaryFontColor?: string;
  iconCornerRadius?: number;
  accentColor?: string;
  playableHeight?: number | string;
  playableBorderColor?: string;
}