From 747c67766c218162d661438e903732455955eda2 Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Thu, 16 Jul 2026 20:09:59 +0200
Subject: [PATCH] =?UTF-8?q?feat(app):=20Workspace-Umbau=20Schritt=201=20?=
 =?UTF-8?q?=E2=80=94=20gesture-handler/reanimated/webview=20+=20Root-Wrapp?=
 =?UTF-8?q?er?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fundament fuer den zoombaren Desktop-Workspace:
- react-native-gesture-handler@2.14.1, react-native-reanimated@3.6.2,
  react-native-webview@13.6.4 (kompatibel mit RN 0.73.4 / Hermes / old-arch)
- babel.config.js: reanimated/plugin als letztes Plugin
- index.js: gesture-handler als allererster Import
- App.tsx: GestureHandlerRootView um den gesamten Baum

Hinweis: nach npm install einmalig `npm start --reset-cache` + nativer Rebuild
(gradlew clean), sonst brechen die reanimated-Worklets still.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 android/App.tsx         | 8 ++++++--
 android/babel.config.js | 3 +++
 android/index.js        | 3 +++
 android/package.json    | 5 ++++-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/android/App.tsx b/android/App.tsx
index 4bdc927..cd71fbb 100644
--- a/android/App.tsx
+++ b/android/App.tsx
@@ -8,6 +8,7 @@
 import React, { useEffect } from 'react';
 import { AppState, AppStateStatus, PermissionsAndroid, Platform, StatusBar, StyleSheet } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
@@ -132,7 +133,7 @@ const App: React.FC = () => {
   }, []);
 
   return (
-    <>
+    <GestureHandlerRootView style={styles.root}>
       <StatusBar barStyle="light-content" backgroundColor="#0D0D1A" />
       <NavigationContainer theme={DarkTheme}>
         <Tab.Navigator
@@ -180,13 +181,16 @@ const App: React.FC = () => {
           />
         </Tab.Navigator>
       </NavigationContainer>
-    </>
+    </GestureHandlerRootView>
   );
 };
 
 // --- Styles ---
 
 const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
   header: {
     backgroundColor: '#12122A',
     elevation: 0,
diff --git a/android/babel.config.js b/android/babel.config.js
index f842b77..e72f9b5 100644
--- a/android/babel.config.js
+++ b/android/babel.config.js
@@ -1,3 +1,6 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  // react-native-reanimated/plugin MUSS das LETZTE Plugin sein (Worklet-Transform).
+  // Nach dem Hinzufuegen einmalig Metro-Cache leeren: `npm start --reset-cache`.
+  plugins: ['react-native-reanimated/plugin'],
 };
diff --git a/android/index.js b/android/index.js
index ab0ecbf..0fa099e 100644
--- a/android/index.js
+++ b/android/index.js
@@ -1,3 +1,6 @@
+// react-native-gesture-handler MUSS als allererstes importiert werden
+// (vor allem anderen), sonst crasht die Gesten-Erkennung auf Android.
+import 'react-native-gesture-handler';
 import { AppRegistry } from 'react-native';
 import App from './App';
 import { name as appName } from './app.json';
diff --git a/android/package.json b/android/package.json
index 327b763..4cc6028 100644
--- a/android/package.json
+++ b/android/package.json
@@ -20,12 +20,15 @@
     "react-native-camera-kit": "^13.0.0",
     "react-native-document-picker": "^9.1.1",
     "react-native-fs": "^2.20.0",
+    "react-native-gesture-handler": "2.14.1",
     "react-native-image-picker": "^7.1.0",
     "react-native-permissions": "^4.1.4",
+    "react-native-reanimated": "3.6.2",
     "react-native-safe-area-context": "^4.8.2",
     "react-native-screens": "3.27.0",
     "react-native-sound": "^0.11.2",
-    "react-native-svg": "^14.1.0"
+    "react-native-svg": "^14.1.0",
+    "react-native-webview": "13.6.4"
   },
   "devDependencies": {
     "@react-native/eslint-config": "^0.73.2",