Merge pull request #510 from dohooo/develop

Develop

.changeset/short-avocados-sparkle.md

@@ -0,0 +1,5 @@
+---
+'react-native-reanimated-carousel': patch
+---
+
+Support to specific direction to auto play.

.changeset/thick-ties-think.md

@@ -0,0 +1,5 @@
+---
+'react-native-reanimated-carousel': patch
+---
+
+Modify the preority of windowSize settings. If you define the windowSize prop, Carousel will ignore the itemsCount. (windowSize > itemsCount)

.gitignore

@@ -65,4 +65,4 @@ lib/
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions

example/app/.gitignore

@@ -0,0 +1,68 @@
+# OSX
+#
+.DS_Store
+
+# VSCode
+.vscode/
+jsconfig.json
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+.idea
+.gradle
+local.properties
+android.iml
+
+# Cocoapods
+#
+exampleBare/ios/Pods
+
+# node.js
+#
+node_modules/
+scripts/gif-works-directory/*
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+\.env
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+android/keystores/debug.keystore
+
+# Expo
+.expo/*
+web-build
+
+# generated by bob
+lib/
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

example/app/package.json

@@ -4,6 +4,28 @@
   "main": "./src/index",
   "react-native": "./src/index",
   "private": true,
+  "dependencies": {
+    "@faker-js/faker": "^8.0.2",
+    "@react-navigation/native": "^6.1.6",
+    "@react-navigation/native-stack": "^6.9.12",
+    "@react-navigation/stack": "^6.3.16",
+    "expo": "^49.0.0",
+    "expo-blur": "~12.4.1",
+    "expo-constants": "~14.4.2",
+    "expo-haptics": "~12.4.0",
+    "expo-image": "~1.3.5",
+    "expo-status-bar": "~1.6.0",
+    "expo-updates": "~0.18.10",
+    "jest": "^29.2.1",
+    "jest-expo": "^47.0.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.72.3",
+    "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"
+  },
   "peerDependencies": {
     "@faker-js/faker": "^8.0.2",
     "@react-navigation/native": "^6.1.6",
@@ -12,6 +34,8 @@
     "expo": "^49.0.0",
     "expo-blur": "~12.4.1",
     "expo-constants": "~14.4.2",
+    "expo-haptics": "~12.4.0",
+    "expo-image": "~1.3.5",
     "expo-status-bar": "~1.6.0",
     "expo-updates": "~0.18.10",
     "jest": "^29.2.1",

example/app/src/Home.tsx

@@ -36,6 +36,7 @@ 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 QuickSwipe from "./pages/quick-swipe";
 import { useWebContext } from "./store/WebProvider";
 import { convertName } from "./utils/helpers";
 import { useColor } from "./hooks/useColor";
@@ -61,6 +62,10 @@ export const LayoutsPage = [
 ];
 
 export const CustomAnimations = [
+  {
+    name: 'quick-swipe',
+    page: QuickSwipe,
+  },
   {
     name: 'tinder',
     page: Tinder,
@@ -153,7 +158,7 @@ export const ExperimentPage = [
 const ListItem = ({ name, onPress, color }: { name: string; onPress: () => void; color: string }) => (
   <TouchableOpacity onPress={onPress}>
     <View style={styles.listItem}>
-      <Text style={[styles.text, { color: color }]}>{convertName(name)}</Text>
+      <Text style={[styles.text, { color: color }]}>{name.split('-').join(' ')}</Text>
     </View>
   </TouchableOpacity>
 );

example/app/src/components/SBImageItem.tsx

@@ -3,49 +3,54 @@ import type {
   StyleProp,
   ViewStyle,
   ImageURISource,
+  ImageSourcePropType,
 } from "react-native";
 import {
   StyleSheet,
   View,
   ActivityIndicator,
-  Image,
   Text,
 } from "react-native";
+import { Image } from 'expo-image';
 
 interface Props {
   style?: StyleProp<ViewStyle>
   index?: number
   showIndex?: boolean
+  img?: ImageSourcePropType
 }
 
 export const SBImageItem: React.FC<Props> = ({
   style,
   index: _index,
   showIndex = true,
+  img
 }) => {
-  const index = (_index || 0) + 1;
+  const index = _index ?? 0;
   const source = React.useRef<ImageURISource>({
     uri: `https://picsum.photos/id/${index}/400/300`,
   }).current;
 
   return (
     <View style={[styles.container, style]}>
       <ActivityIndicator size="small" />
-      <Image key={index} style={styles.image} source={source} />
-      <Text
-        style={{
-          position: "absolute",
-          color: "white",
-          fontSize: 40,
-          backgroundColor: "#333333",
-          borderRadius: 5,
-          overflow: "hidden",
-          paddingHorizontal: 10,
-          paddingTop: 2,
-        }}
-      >
-        {showIndex ? index : ""}
-      </Text>
+      <Image cachePolicy={'memory-disk'} key={index} style={styles.image} source={img ?? source} />
+      {
+        showIndex && <Text
+          style={{
+            position: "absolute",
+            color: "#6E6E6E",
+            fontSize: 40,
+            backgroundColor: "#EAEAEA",
+            borderRadius: 5,
+            overflow: "hidden",
+            paddingHorizontal: 10,
+            paddingTop: 2,
+          }}
+        >
+          {index}
+        </Text>
+      }
     </View>
   );
 };
@@ -55,15 +60,13 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "#fff",
+    backgroundColor: "transparent",
     borderRadius: 8,
     overflow: "hidden",
   },
   image: {
+    width: "100%",
+    height: "100%",
     position: "absolute",
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
   },
 });

example/app/src/components/SBItem.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import type { StyleProp, ViewStyle, ViewProps } from "react-native";
+import type { StyleProp, ViewStyle, ViewProps, ImageSourcePropType } from "react-native";
 import { LongPressGestureHandler } from "react-native-gesture-handler";
 import type { AnimateProps } from "react-native-reanimated";
 import Animated from "react-native-reanimated";
@@ -13,10 +13,12 @@ interface Props extends AnimateProps<ViewProps> {
   style?: StyleProp<ViewStyle>
   index?: number
   pretty?: boolean
+  showIndex?: boolean
+  img?: ImageSourcePropType
 }
 
 export const SBItem: React.FC<Props> = (props) => {
-  const { style, index, pretty, testID, ...animatedViewProps } = props;
+  const { style, showIndex = true, index, pretty, img, testID, ...animatedViewProps } = props;
   const enablePretty = Constants?.expoConfig?.extra?.enablePretty || false;
   const [isPretty, setIsPretty] = React.useState(pretty || enablePretty);
   return (
@@ -26,9 +28,9 @@ export const SBItem: React.FC<Props> = (props) => {
       }}
     >
       <Animated.View testID={testID} style={{ flex: 1 }} {...animatedViewProps}>
-        {isPretty
+        {isPretty || img
           ? (
-            <SBImageItem style={style} index={index} showIndex={typeof index === "number"} />
+            <SBImageItem style={style} index={index} showIndex={typeof index === "number" && showIndex} img={img} />
           )
           : (
             <SBTextItem style={style} index={index} />

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

@@ -38,29 +38,6 @@ function Index() {
         alignItems: "center",
       }}
     >
-      <View
-        style={{
-          position: "absolute",
-          width: 50,
-          height: 51,
-          backgroundColor: "white",
-          borderRadius: 35,
-          transform: [{ scaleX: 10 }, { scaleY: 2 }],
-          zIndex: 2,
-        }}
-      />
-      <View
-        style={{
-          position: "absolute",
-          width: 50,
-          height: 51,
-          backgroundColor: "white",
-          borderRadius: 35,
-          transform: [{ scaleX: 10 }, { scaleY: 2 }],
-          zIndex: 2,
-          top: 145,
-        }}
-      />
       <Carousel
         {...baseOptions}
         loop

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

@@ -14,7 +14,7 @@ const PAGE_WIDTH = window.width;
 
 function Index() {
   const windowWidth = useWindowDimensions().width;
-
+  const scrollOffsetValue = useSharedValue<number>(0);
   const [data, setData] = React.useState([...new Array(4).keys()]);
   const [isVertical, setIsVertical] = React.useState(false);
   const [isFast, setIsFast] = React.useState(false);
@@ -34,16 +34,14 @@ function Index() {
       height: PAGE_WIDTH / 2,
     } as const);
 
-  const a = useSharedValue<number>(0);
-
   return (
     <SafeAreaView edges={["bottom"]} style={{ flex: 1 }}>
       <Carousel
         {...baseOptions}
         loop
         enabled // Default is true, just for demo
         ref={ref}
-        defaultScrollOffsetValue={a}
+        defaultScrollOffsetValue={scrollOffsetValue}
         testID={"xxx"}
         style={{ width: "100%" }}
         autoPlay={isAutoPlay}