113 lines
4.0 KiB
Markdown
113 lines
4.0 KiB
Markdown
# Rebreak Native (React Native + Expo)
|
|
|
|
> Mobile App für iOS + Android. Migration von Nuxt+Capacitor → React Native+Expo.
|
|
> Migration-Plan: [`apps/rebreak/docs/react-native-migration.md`](../rebreak/docs/react-native-migration.md)
|
|
|
|
## Status
|
|
|
|
**Phase 1 — Foundation Skeleton** (2026-05-02)
|
|
|
|
- [x] Verzeichnisstruktur
|
|
- [x] `package.json` mit Expo SDK 53 + RN 0.76 (New Architecture)
|
|
- [x] `app.config.ts` (Expo, Bundle-ID `org.rebreak.app`)
|
|
- [x] Expo Router Skeleton
|
|
- [x] NativeWind Setup (Tailwind für RN)
|
|
- [x] Metro Config (pnpm Monorepo aware)
|
|
- [x] Supabase Client + API Wrapper
|
|
- [ ] `pnpm install` — vom User auszuführen
|
|
- [ ] `expo prebuild` — generiert `ios/` + `android/` Bare-Projekte
|
|
- [ ] Native Module Imports (NEFilter, VpnService, A11y) — Phase 5+
|
|
|
|
## Setup
|
|
|
|
```bash
|
|
# vom Monorepo-Root:
|
|
pnpm install
|
|
|
|
# Native-Projekte generieren (lokal, nicht committed)
|
|
cd apps/rebreak-native
|
|
pnpm prebuild
|
|
|
|
# Run
|
|
pnpm ios # iOS Simulator
|
|
pnpm android # Android Emulator
|
|
```
|
|
|
|
## Stack
|
|
|
|
| Bereich | Lib |
|
|
|---|---|
|
|
| Framework | React Native 0.76 (New Architecture) + Expo SDK 53 |
|
|
| Routing | Expo Router (file-based) |
|
|
| State | Zustand |
|
|
| Server State | TanStack Query (React Query) |
|
|
| Styling | NativeWind 4 (Tailwind) |
|
|
| Forms | React Hook Form + Valibot |
|
|
| i18n | react-i18next |
|
|
| Auth | @supabase/supabase-js + AsyncStorage |
|
|
| Animation | react-native-reanimated, lottie-react-native |
|
|
| Storage | react-native-mmkv (fast key-value) |
|
|
|
|
## Verzeichnisstruktur
|
|
|
|
```
|
|
apps/rebreak-native/
|
|
├── app/ # Expo Router (file-based routes)
|
|
│ ├── _layout.tsx # Root Stack
|
|
│ ├── index.tsx # Landing (auth oder app entscheiden)
|
|
│ ├── (auth)/ # Auth-Flow (signin, signup, forgot-password)
|
|
│ └── (app)/ # Authenticated App (tabs)
|
|
├── components/ # Reusable UI Components
|
|
├── hooks/ # Custom React Hooks
|
|
├── stores/ # Zustand Stores
|
|
├── lib/ # Supabase Client, API Wrapper, Utils
|
|
│ ├── supabase.ts
|
|
│ └── api.ts
|
|
├── locales/ # de.json, en.json
|
|
├── modules/ # Custom Expo Native Modules
|
|
│ ├── rebreak-ios-filter/ # NEFilter + Tunnel (Phase 5)
|
|
│ ├── rebreak-android-blocker/ # VpnService + DnsFilter (Phase 6)
|
|
│ └── rebreak-android-a11y/ # AccessibilityService (Phase 6)
|
|
├── plugins/ # Expo Config Plugins
|
|
└── assets/ # Icons, Splashscreens, Fonts
|
|
```
|
|
|
|
## Wichtige Konfiguration
|
|
|
|
| Datei | Zweck |
|
|
|---|---|
|
|
| `app.config.ts` | Expo App-Config (Bundle-ID, Permissions, Plugins) |
|
|
| `metro.config.js` | Monorepo-aware Metro (Symlinks, Workspace-Folders) |
|
|
| `babel.config.js` | NativeWind Preset + Reanimated Plugin |
|
|
| `tailwind.config.js` | Tailwind Config — Brand-Colors aus apps/rebreak/ syncen |
|
|
| `global.css` | NativeWind Tailwind-Imports |
|
|
|
|
## Native Module Strategie
|
|
|
|
Bestehender Native-Code aus `apps/rebreak/ios/` + `apps/rebreak/android/` wird in Expo Native Modules gewrappt — **ohne neu zu schreiben**.
|
|
|
|
### iOS — `modules/rebreak-ios-filter/`
|
|
Wrapped:
|
|
- `RebreakURLFilter` (NEFilterDataProvider) → blockt bet365 etc.
|
|
- `RebreakTunnel` (NEPacketTunnelProvider) → DNS-Filter
|
|
|
|
### Android — `modules/rebreak-android-blocker/`
|
|
Wrapped:
|
|
- `RebreakVpnService` (Kotlin) → VpnService DNS-Filter
|
|
- `DnsFilter` + `HashList` + `DomainHasher`
|
|
|
|
### Android — `modules/rebreak-android-a11y/`
|
|
Wrapped:
|
|
- `RebreakAccessibilityService` → Detection von Gambling-Apps
|
|
|
|
## ⚠️ Wichtige Hinweise
|
|
|
|
- **Schutz-Stack bleibt 1:1 erhalten** — Swift- und Kotlin-Code wandert unverändert in `modules/`.
|
|
- **Backend bleibt** in `apps/rebreak/server/` — RN ruft die gleichen Endpoints.
|
|
- **Alte Capacitor-App** bleibt deployed bis RN-App im Store ist.
|
|
- **Kein Auto-Commit** — User entscheidet wann committet wird.
|
|
|
|
## Phasen-Tracker
|
|
|
|
Siehe Migration-Plan für Details: [`apps/rebreak/docs/react-native-migration.md`](../rebreak/docs/react-native-migration.md)
|