fix: re-calculate when window size changed in browser

fix #490

.changeset/hungry-actors-grab.md

@@ -0,0 +1,5 @@
+---
+'react-native-reanimated-carousel': patch
+---
+
+re-calculate when window size changed in browser.

example/app/package.json

@@ -22,7 +22,6 @@
     "react-native-gesture-handler": "~2.12.0",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
-    "react-native-screens": "~3.22.0",
-    "react-native-snap-carousel": "^3.9.1"
+    "react-native-screens": "~3.22.0"
   }
 }

example/app/src/Home.tsx

@@ -35,7 +35,6 @@ import ScaleFadeInOutComponent from "./pages/scale-fade-in-out";
 import StackComponent from "./pages/stack";
 import StackCards from "./pages/stack-cards";
 import Tear from "./pages/tear";
-import { isAndroid, isIos } from "./utils";
 import { useWebContext } from "./store/WebProvider";
 import { convertName } from "./utils/helpers";
 import { useColor } from "./hooks/useColor";
@@ -146,29 +145,6 @@ export const ExperimentPage = [
   },
 ];
 
-if (isIos || isAndroid) {
-  // Not support to WEB (react-native-snap-carousel)
-  const SnapCarouselComplexComponent = React.lazy(
-    () => import("./pages/snap-carousel-complex"),
-  );
-  const SnapCarouselLoopComponent = React.lazy(
-    () => import("./pages/snap-carousel-loop"),
-  );
-
-  ExperimentPage.push(
-    {
-      name: "snap-carousel-complex",
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      page: SnapCarouselComplexComponent,
-    },
-    {
-      name: "snap-carousel-loop",
-      page: SnapCarouselLoopComponent,
-    },
-  );
-}
-
 const ListItem = ({ name, onPress, color }: { name: string; onPress: () => void; color: string }) => (
   <TouchableOpacity onPress={onPress}>
     <View style={styles.listItem}>

example/app/src/pages/normal/index.tsx

@@ -7,10 +7,13 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { SBItem } from "../../components/SBItem";
 import SButton from "../../components/SButton";
 import { ElementsText, window } from "../../constants";
+import { useWindowDimensions } from "react-native";
 
 const PAGE_WIDTH = window.width;
 
 function Index() {
+  const windowWidth = useWindowDimensions().width;
+
   const [data, setData] = React.useState([...new Array(4).keys()]);
   const [isVertical, setIsVertical] = React.useState(false);
   const [isFast, setIsFast] = React.useState(false);
@@ -21,12 +24,12 @@ function Index() {
   const baseOptions = isVertical
     ? ({
       vertical: true,
-      width: PAGE_WIDTH,
+      width: windowWidth,
       height: PAGE_WIDTH / 2,
     } as const)
     : ({
       vertical: false,
-      width: PAGE_WIDTH,
+      width: windowWidth,
       height: PAGE_WIDTH / 2,
     } as const);
 

example/expo/package.json

@@ -39,8 +39,7 @@
     "react-native-gesture-handler": "~2.12.0",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
-    "react-native-screens": "~3.22.0",
-    "react-native-snap-carousel": "^3.9.1"
+    "react-native-screens": "~3.22.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -50,7 +49,6 @@
     "@testing-library/jest-native": "^5.4.1",
     "@testing-library/react-native": "^11.5.0",
     "@types/react": "~18.2.14",
-    "@types/react-native-snap-carousel": "^3.8.5",
     "babel-plugin-import-glob": "^2.0.0",
     "babel-plugin-module-resolver": "^4.1.0",
     "gh-pages": "^3.2.3",