From 62371d4bf5793ee00eaa7c66830acb8ea2916c24 Mon Sep 17 00:00:00 2001
From: Nayif Noushad <nayifveliya99@gmail.com>
Date: Sun, 20 Apr 2025 12:23:15 +0530
Subject: [PATCH] Refactor AppNavigator and ShowRatingsScreen for iOS
 compatibility; update navigation presentation to modal and adjust background
 colors with BlurView for improved visual consistency on iOS devices.

---
 src/navigation/AppNavigator.tsx   |  4 ++--
 src/screens/ShowRatingsScreen.tsx | 17 ++++++++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/navigation/AppNavigator.tsx b/src/navigation/AppNavigator.tsx
index 551410e..592f2b9 100644
--- a/src/navigation/AppNavigator.tsx
+++ b/src/navigation/AppNavigator.tsx
@@ -651,12 +651,12 @@ const AppNavigator = () => {
             options={{
               animation: 'fade',
               animationDuration: 200,
-              presentation: 'card',
+              ...(Platform.OS === 'ios' && { presentation: 'modal' }),
               gestureEnabled: true,
               gestureDirection: 'horizontal',
               headerShown: false,
               contentStyle: {
-                backgroundColor: colors.darkBackground,
+                backgroundColor: 'transparent',
               },
             }}
           />
diff --git a/src/screens/ShowRatingsScreen.tsx b/src/screens/ShowRatingsScreen.tsx
index 011fae7..04e8e1b 100644
--- a/src/screens/ShowRatingsScreen.tsx
+++ b/src/screens/ShowRatingsScreen.tsx
@@ -11,6 +11,7 @@ import {
   StatusBar,
 } from 'react-native';
 import { Image } from 'expo-image';
+import { BlurView } from 'expo-blur';
 import { colors } from '../styles';
 import { TMDBService, TMDBShow as Show, TMDBSeason, TMDBEpisode } from '../services/tmdbService';
 import { RouteProp } from '@react-navigation/native';
@@ -367,7 +368,14 @@ const ShowRatingsScreen = ({ route }: Props) => {
   }
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.black }]}>
+    <View style={[styles.container, { backgroundColor: Platform.OS === 'ios' ? 'transparent' : colors.black }]}>
+      {Platform.OS === 'ios' && (
+        <BlurView
+          style={StyleSheet.absoluteFill}
+          tint="dark"
+          intensity={60}
+        />
+      )}
       <StatusBar
         translucent
         backgroundColor="transparent"
@@ -528,7 +536,6 @@ const ShowRatingsScreen = ({ route }: Props) => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: colors.black,
   },
   scrollView: {
     flex: 1,
@@ -548,7 +555,7 @@ const styles = StyleSheet.create({
   showInfo: {
     flexDirection: 'row',
     marginBottom: 12,
-    backgroundColor: colors.darkBackground,
+    backgroundColor: Platform.OS === 'ios' ? 'transparent' : colors.darkBackground,
     borderRadius: 8,
     padding: 8,
   },
@@ -641,7 +648,7 @@ const styles = StyleSheet.create({
     lineHeight: 16,
   },
   legend: {
-    backgroundColor: colors.darkBackground,
+    backgroundColor: Platform.OS === 'ios' ? 'transparent' : colors.darkBackground,
     borderRadius: 8,
     padding: 8,
     marginBottom: 12,
@@ -693,7 +700,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   ratingsGrid: {
-    backgroundColor: colors.darkBackground,
+    backgroundColor: Platform.OS === 'ios' ? 'transparent' : colors.darkBackground,
     borderRadius: 8,
     padding: 8,
   },