@react-navigation/stack 7.0.3 → 7.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/stack",
   "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "7.0.3",
+  "version": "7.0.4",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -51,7 +51,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^2.0.3",
+    "@react-navigation/elements": "^2.0.4",
     "color": "^4.2.3"
   },
   "devDependencies": {
@@ -102,5 +102,5 @@
       ]
     ]
   },
-  "gitHead": "596ce0641241b9f003a6ad130f6f4837206ef064"
+  "gitHead": "113cea5770fbca7cc86594d7dac1f00c2c392eec"
 }

package/src/utils/getShadowStyle.tsx

@@ -0,0 +1,37 @@
+import Color from 'color';
+import { Platform } from 'react-native';
+
+type ShadowConfig = {
+  offset: {
+    width: number;
+    height: number;
+  };
+  radius: number;
+  opacity: number;
+  color?: string;
+};
+
+export function getShadowStyle({
+  offset,
+  radius,
+  opacity,
+  color = '#000',
+}: ShadowConfig) {
+  const result = Platform.select({
+    web: {
+      boxShadow: `${offset.width}px ${offset.height}px ${radius}px ${Color(
+        color
+      )
+        .alpha(opacity)
+        .toString()}`,
+    },
+    default: {
+      shadowOffset: offset,
+      shadowRadius: radius,
+      shadowColor: color,
+      shadowOpacity: opacity,
+    },
+  });
+
+  return result;
+}

package/src/views/Stack/Card.tsx

@@ -23,6 +23,7 @@ import type {
 import { CardAnimationContext } from '../../utils/CardAnimationContext';
 import { getDistanceForDirection } from '../../utils/getDistanceForDirection';
 import { getInvertedMultiplier } from '../../utils/getInvertedMultiplier';
+import { getShadowStyle } from '../../utils/getShadowStyle';
 import { memoize } from '../../utils/memoize';
 import {
   GestureState,
@@ -610,15 +611,19 @@ const styles = StyleSheet.create({
   },
   shadow: {
     position: 'absolute',
-    shadowRadius: 5,
-    shadowColor: '#000',
-    shadowOpacity: 0.3,
   },
   shadowHorizontal: {
     top: 0,
     bottom: 0,
     width: 3,
-    shadowOffset: { width: -1, height: 1 },
+    ...getShadowStyle({
+      offset: {
+        width: -1,
+        height: 1,
+      },
+      radius: 5,
+      opacity: 0.3,
+    }),
   },
   shadowStart: {
     start: 0,
@@ -630,7 +635,14 @@ const styles = StyleSheet.create({
     start: 0,
     end: 0,
     height: 3,
-    shadowOffset: { width: 1, height: -1 },
+    ...getShadowStyle({
+      offset: {
+        width: 1,
+        height: -1,
+      },
+      radius: 5,
+      opacity: 0.3,
+    }),
   },
   shadowTop: {
     top: 0,