feat: update dependencies and enhance TableScreen for better responsiveness and user guidance

package.json

@@ -11,16 +11,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.6",
-    "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native-async-storage/async-storage": "2.2.0",
-    "@stripe/stripe-react-native": "0.38.3",
+    "@stripe/stripe-react-native": "0.50.3",
-    "expo-blur": "~13.0.2",
+    "expo": "^54.0.30",
-    "expo": "~51.0.0",
+    "expo-auth-session": "~7.0.10",
-    "expo-auth-session": "~5.0.2",
+    "expo-blur": "~15.0.8",
-    "expo-linear-gradient": "~12.7.2",
+    "expo-linear-gradient": "~15.0.8",
-    "expo-linking": "~6.3.1",
+    "expo-linking": "~8.0.11",
-    "expo-web-browser": "~13.0.3",
+    "expo-web-browser": "~15.0.10",
-    "react": "18.2.0",
+    "react": "19.1.0",
-    "react-native": "0.74.0",
+    "react-native": "0.81.5",
-    "react-native-safe-area-context": "4.10.8"
+    "react-native-safe-area-context": "5.6.2"
   }
 }

src/screens/TableScreen.js

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Animated, Pressable, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import { BlurView } from 'expo-blur';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -21,6 +21,8 @@ export default function TableScreen({ token, tableId, user, onLeave }) {
   const wsRef = useRef(null);
   const pulse = useRef(new Animated.Value(0)).current;
   const insets = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
+  const isPortrait = height >= width;
 
   useEffect(() => {
     const ws = new WebSocket(WS_URL);
@@ -128,6 +130,26 @@ export default function TableScreen({ token, tableId, user, onLeave }) {
 
   const seats = table?.seats || [];
 
+  if (isPortrait) {
+    return (
+      <LinearGradient
+        colors={[colors.backgroundTop, colors.backgroundBottom]}
+        style={[
+          styles.container,
+          {
+            paddingTop: insets.top + 12,
+            paddingBottom: insets.bottom + 12
+          }
+        ]}
+      >
+        <View style={styles.rotateWrap}>
+          <Text style={styles.rotateTitle}>Fordítsd el a telefont</Text>
+          <Text style={styles.rotateSubtitle}>A blackjack asztal fekvő nézetben működik jól.</Text>
+        </View>
+      </LinearGradient>
+    );
+  }
+
   return (
     <LinearGradient
       colors={[colors.backgroundTop, colors.backgroundBottom]}
@@ -323,6 +345,26 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     marginBottom: 6,
     fontFamily: fonts.mono
+  },
+  rotateWrap: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 24
+  },
+  rotateTitle: {
+    color: colors.goldBright,
+    fontFamily: fonts.display,
+    fontSize: 24,
+    letterSpacing: 2,
+    textAlign: 'center'
+  },
+  rotateSubtitle: {
+    color: colors.muted,
+    fontFamily: fonts.body,
+    fontSize: 14,
+    marginTop: 12,
+    textAlign: 'center'
   }
 });