Schnappix/README.md

Schnappix

Schnappix is a tablet-optimized Photobooth application built with React Native and Expo. It provides a full-featured, interactive photo capturing experience, complete with external hardware support, image editing, and an administrative interface.

Features

• Photobooth Experience: Intuitive flow from start screen to countdown, photo capture, and final preview.
• Multiple Photos & Collages: Capture single or multiple photos and review them in a generated collage.
• Sticker / Emoji Editor: Add emojis, date/time stamps, and event text as draggable, resizable, rotatable stickers on your photos — just like on social media.
• Photo Frames: Overlay transparent PNG frames on photos. Admin can set frames to off, always-on, or user-selectable.
• Continuous Shooting (Burst Mode): Automatically capture multiple photos in sequence (1–5 shots, configurable interval) for collage printing.
• Date/Time Overlay: Optionally stamp the date and/or time on every photo, with configurable position.
• Camera Flash Effect: Full-screen white flash animation on every capture for an authentic photo booth feel.
• Direct Printing: Built-in support for IPP (Internet Printing Protocol) network printers to instantly print captured moments.
• Kiosk Mode: Custom native Android implementation to lock the tablet down to the Schnappix app, preventing users from exiting the photobooth.
• USB & Front Camera Support: Extends standard camera capabilities to support external USB cameras or standard device front/rear cameras, toggleable in settings.
• Admin Dashboard: Secure administrative screen (protected by an admin password) to configure all settings on the fly.
• Offline Storage (MediaStore API): Saves captured photos directly to the device's local gallery (Schnappix - <EventName> - Collagen and Schnappix - <EventName> - Originale).

Tech Stack

• Framework: React Native (v0.81.5) & Expo (SDK 54)
• Language: TypeScript
• Key Libraries:
  • expo-camera: Camera interface
  • expo-media-library & expo-file-system: Photo storage
  • ipp-encoder: Network printing integration
  • react-native-view-shot: Capturing collages as images
  • react-native-gesture-handler: Sticker drag, pinch, and rotate gestures
  • @fortawesome/react-native-fontawesome: All in-app icons via Font Awesome
  • react-native-svg: SVG rendering for icon support
  • Custom native Expo plugins (withKioskAdmin, withUsbCamera, withLocalAars) for extended Android capabilities.

Getting Started

Prerequisites

• Node.js (v18+)
• npm or yarn
• Expo CLI
• Android Studio / Android SDK (for building the native Android app, as it uses custom native modules)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd Schnappix
   

2. Install dependencies:

   npm install
   

3. Prebuild the native Android project (required due to custom native plugins):

   npx expo prebuild --clean --platform android
   

4. Run the app on an Android device or emulator:

   npm run android
   

Development & Build Rules

Schnappix follows strict architecture and workflow rules:

1. Versioning: Versioning format is 23.01.X, where X matches the versionCode in app.json.
2. Build Outputs: Apps must always be built as BOTH .apk and .aab. Naming syntax is Schnappix_v23.01.X.apk and Schnappix_v23.01.X.aab.
3. Package Name: Must strictly remain de.orfel.schnappix.
4. Git Workflow: Always commit and push at the end of interactions (git add ., git commit, git push). Retry git push if it fails due to authentication errors.

Configuration

When the app is first launched, you can access the Admin Dashboard by tapping the settings icon (⚙️) on the Home screen and entering the admin password (default: 1234).

Admin Settings Overview

Setting	Description	Default
Drucker IP-Adresse	Local IP of the IPP printer (e.g., Canon CP1300)	192.168.1.100
Countdown-Dauer	Seconds before photo capture	3
Admin-Passwort	PIN to access admin panel	1234
Begrüßungstext	Welcome text on the home screen	Zeit für ein Erinnerungsfoto!
Footer-Text	Footer text on the home screen	Display tippen! • Lächeln! • Foto schnappen!
Event-Name	Event text for the date sticker & generated folder names	(empty)
Serienbild-Anzahl	Number of photos per burst (1 = single shot, 2-5 = burst)	1
Serienbild-Abstand	Seconds between burst shots	5
Fotorahmen-Modus	Aus / Immer an / Verfügbar	Verfügbar
Datum-Einblendung	Aus / Nur Datum / Datum + Uhrzeit	Aus
Kiosk-Modus	Lock the tablet to the Schnappix app	Aus
Frontkamera nutzen	Toggles between front and rear/USB camera	Aus
Logs aktivieren	Enables detailed app logging	An

---

Kiosk Mode (Device Owner) Setup

To use the true Kiosk Mode (Lock Task Mode) without system confirmation prompts, the Schnappix app must be set as the Android "Device Owner". It does NOT use external MDM software.

Prerequisites:

1. The Android tablet must have no other accounts (like a Google Account) configured. It is highly recommended to start with a factory-reset device.
2. Developer Options and USB Debugging must be enabled on the tablet.
3. The Schnappix APK must be installed on the tablet.

Setup Command: Run the following command in your terminal/command prompt while the tablet is connected:

adb shell dpm set-device-owner de.orfel.schnappix/expo.modules.kioskmode.AdminReceiver

If successful, the terminal will output Success: Device owner set to package de.orfel.schnappix. You can now safely disconnect the tablet and toggle the Kiosk Mode in the app's Admin Dashboard.

Note: Once set as Device Owner, the app cannot be uninstalled normally. You must either factory reset the device or implement a programmatic way to remove the active admin status.

---

Photo Saving (MediaStore API)

Schnappix uses modern Android MediaStore API (writeOnly = true via expo-media-library) to save photos directly to the gallery, avoiding legacy file permission prompts. Photos are neatly organized into two directories based on your configured Event-Name:

• Schnappix - <EventName> - Collagen
• Schnappix - <EventName> - Originale

Note: Do NOT attempt to force legacy WRITE_EXTERNAL_STORAGE or READ_EXTERNAL_STORAGE on Android 13+, as it will fail.

---

Photo Frames — Setup Guide

Schnappix supports custom photo frame overlays. Frames are transparent PNG images that are layered on top of photos before saving or printing.

Frame Requirements

Property	Requirement
Format	PNG with alpha channel (transparency)
Resolution	1500 × 1000 px (3:2 landscape ratio, matches tablet display and print output)
Transparency	The photo area must be fully transparent (alpha = 0)
File size	Keep each file under 500 KB for fast rendering
Naming	frame_<name>.png (e.g. frame_balloons.png)

How to Add Frames

1. Place the file in the assets/frames/ directory.
2. Register the frame in src/data/frames.ts:

   export const FRAMES: FrameDefinition[] = [
     { id: 'balloons', name: 'Luftballons', asset: require('../../assets/frames/frame_balloons.png') },
   ];
   

3. Rebuild the app (npx expo prebuild --clean --platform android & npm run android).
4. Select the frame mode in the Admin Dashboard.

---

Sticker Editing

The preview screen includes a social-media-style sticker editor. Guests can:

• Add emojis: Tap the "Sticker" button to open the emoji tray with curated party emojis.
• Transform: Drag stickers anywhere, pinch to resize, and two-finger rotate.
• Delete: Tap to select, then press × to delete.
• Dynamic Stickers: Date, Time, and Event text automatically generate based on your Admin settings.

All stickers are rendered inside the capture area, so they appear in the saved and printed output.

---

Design Theme

The app uses a neon synthwave aesthetic matching the app icon:

• Primary: Electric magenta #ff2bd6
• Accent: Cyan blue #28dfff
• Background: Deep navy/black #050510
• Effects: Neon glow shadows, glassmorphism overlays
• Icons: Font Awesome (solid) with neon coloring

License

See the LICENSE file for more information.