react-native-reanimated-carousel 3.3.0 → 3.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +12 -12
  2. package/README.zh-CN.md +12 -12
  3. package/package.json +2 -12
package/README.md CHANGED
@@ -26,30 +26,30 @@ English | [简体中文](./README.zh-CN.md)
26
26
 
27
27
  | <img src="assets/normal-horizontal.gif"/> | <img src="assets/normal-vertical.gif"/> | <img src="assets/parallax-horizontal.gif"/> |
28
28
  | :------------------------------------------------------------------: | :-------------------------------------------------------------------: | :--------------------------------------------------------------------: |
29
- | <a href="./exampleExpo/src/normal/index.tsx">normal-horizontal</a> | <a href="./exampleExpo/src/normal/index.tsx">normal-vertical</a> | <a href="./exampleExpo/src/parallax/index.tsx">parallax-horizontal</a> |
29
+ | <a href="./exampleExpo/src/pages/normal/index.tsx">normal-horizontal</a> | <a href="./exampleExpo/src/pages/normal/index.tsx">normal-vertical</a> | <a href="./exampleExpo/src/pages/parallax/index.tsx">parallax-horizontal</a> |
30
30
  | <img src="assets/parallax-vertical.gif"/> | <img src="assets/stack-horizontal-left.gif"/> | <img src="assets/stack-horizontal-right.gif"/> |
31
- | <a href="./exampleExpo/src/parallax/index.tsx">parallax-vertical</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-horizontal-left</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-horizontal-right</a> |
31
+ | <a href="./exampleExpo/src/pages/parallax/index.tsx">parallax-vertical</a> | <a href="./exampleExpo/src/pages/stack/index.tsx">stack-horizontal-left</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-horizontal-right</a> |
32
32
  | <img src="assets/stack-vertical-left.gif"/> | <img src="assets/stack-vertical-right.gif"/> | <img src="assets/stack-horizontal-right.gif"/> |
33
- | <a href="./exampleExpo/src/stack/index.tsx">stack-vertical-left</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-vertical-right</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-horizontal-right</a> |
33
+ | <a href="./exampleExpo/src/pages/stack/index.tsx">stack-vertical-left</a> | <a href="./exampleExpo/src/pages/stack/index.tsx">stack-vertical-right</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-horizontal-right</a> |
34
34
  | <img src="assets/left-align.gif"/> |
35
- | <a href="./exampleExpo/src/left-align/index.tsx">left-align</a> |
35
+ | <a href="./exampleExpo/src/pages/left-align/index.tsx">left-align</a> |
36
36
 
37
37
 
38
38
  > Now you can make cool animations with us! Very easy! [[Details]](./docs/custom-animation.md)
39
39
 
40
40
  | <img src="assets/advanced-parallax.gif"/> | <img src="assets/pause-advanced-parallax.gif"/> | <img src="assets/scale-fade-in-out.gif"/> |
41
41
  | :-----------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------: |
42
- | <a href="./exampleExpo/src/advanced-parallax/index.tsx">advanced-parallax</a> | <a href="./exampleExpo/src/pause-advanced-parallax/index.tsx">pause-advanced-parallax</a> | <a href="./exampleExpo/src/scale-fade-in-out/index.tsx">scale-fade-in-out</a> |
42
+ | <a href="./exampleExpo/src/pages/advanced-parallax/index.tsx">advanced-parallax</a> | <a href="./exampleExpo/src/pages/pause-advanced-parallax/index.tsx">pause-advanced-parallax</a> | <a href="./exampleExpo/src/pages/scale-fade-in-out/index.tsx">scale-fade-in-out</a> |
43
43
  | <img src="assets/rotate-scale-fade-in-out.gif"/> | <img src="assets/rotate-in-out.gif"/> | <img src="assets/anim-tab-bar.gif"/> |
44
- | <a href="./exampleExpo/src/rotate-scale-fade-in-out/index.tsx">rotate-scale-fade-in-out</a> | <a href="./exampleExpo/src/rotate-in-out/index.tsx">rotate-in-out</a> | <a href="./exampleExpo/src/anim-tab-bar/index.tsx">anim-tab-bar</a> |
44
+ | <a href="./exampleExpo/src/pages/rotate-scale-fade-in-out/index.tsx">rotate-scale-fade-in-out</a> | <a href="./exampleExpo/src/rotate-in-out/index.tsx">rotate-in-out</a> | <a href="./exampleExpo/src/pages/anim-tab-bar/index.tsx">anim-tab-bar</a> |
45
45
  | <img src="assets/marquee.gif"/> | <img src="assets/multiple.gif"/> | <img src="assets/circular.gif"/> |
46
- | <a href="./exampleExpo/src/marquee/index.tsx">marquee</a> | <a href="./exampleExpo/src/multiple/index.tsx">multiple</a> | <a href="./exampleExpo/src/circular/index.tsx">circular</a> |
46
+ | <a href="./exampleExpo/src/pages/marquee/index.tsx">marquee</a> | <a href="./exampleExpo/src/pages/multiple/index.tsx">multiple</a> | <a href="./exampleExpo/src/pages/circular/index.tsx">circular</a> |
47
47
  | <img src="assets/fold.gif"/> | <img src="assets/tear.gif"/> | <img src="assets/press-swipe.gif"/> |
48
- | <a href="./exampleExpo/src/fold/index.tsx">fold</a> | <a href="./exampleExpo/src/tear/index.tsx">tear</a> | <a href="./exampleExpo/src/press-swipe/index.tsx">press-swipe</a> |
48
+ | <a href="./exampleExpo/src/pages/fold/index.tsx">fold</a> | <a href="./exampleExpo/src/tear/index.tsx">tear</a> | <a href="./exampleExpo/src/pages/press-swipe/index.tsx">press-swipe</a> |
49
49
  | <img src="assets/cube-3d.gif"/> | <img src="assets/blur-parallax.gif"/> | <img src="assets/curve.gif"/> |
50
- | <a href="./exampleExpo/src/cube-3d/index.tsx">cube-3d</a> | <a href="./exampleExpo/src/blur-parallax/index.tsx">blur-parallax</a> | <a href="./exampleExpo/src/curve/index.tsx">curve</a> |
50
+ | <a href="./exampleExpo/src/pages/cube-3d/index.tsx">cube-3d</a> | <a href="./exampleExpo/src/pages/blur-parallax/index.tsx">blur-parallax</a> | <a href="./exampleExpo/src/pages/curve/index.tsx">curve</a> |
51
51
  | <img src="assets/parallax-layers.gif"/> | <img src="assets/stack-cards.gif"/> | <img src="assets/flow.gif"/> |
52
- | <a href="./exampleExpo/src/parallax-layers/index.tsx">parallax-layers</a> | <a href="./exampleExpo/src/stack-cards/index.tsx">stack-cards</a> | <a href="./exampleExpo/src/flow/index.tsx">flow</a> |
52
+ | <a href="./exampleExpo/src/pages/parallax-layers/index.tsx">parallax-layers</a> | <a href="./exampleExpo/src/stack-cards/index.tsx">stack-cards</a> | <a href="./exampleExpo/src/pages/flow/index.tsx">flow</a> |
53
53
 
54
54
  ## Table of contents
55
55
 
@@ -128,9 +128,9 @@ export default Index;
128
128
 
129
129
  - When rendering a large number of elements, you can use the 'windowSize' property to control how many items of the current element are rendered. The default is full rendering. After testing without this property, frames will drop when rendering 200 empty views. After setting this property, rendering 1000 empty views is still smooth. (The specific number depends on the phone model tested)
130
130
 
131
- - Used in `ScrollView/FlastList`
131
+ - Used in `ScrollView/FlatList`
132
132
 
133
- - **[#143](https://github.com/dohooo/react-native-reanimated-carousel/issues/143) - Carousel suppresses ScrollView/FlastList scroll gesture handler:** When using a carousel with a layout oriented to only one direction (vertical/horizontal) and inside a ScrollView/FlatList, it is important for the user experience that the unused axis does not impede the scroll of the list. So that, for example, the x-axis is free we can change the [activeOffsetX](https://docs.swmansion.com/react-native-gesture-handler/docs/1.10.3/api/gesture-handlers/pan-gh/#activeoffsetx) of the gesture handler:
133
+ - **[#143](https://github.com/dohooo/react-native-reanimated-carousel/issues/143) - Carousel suppresses ScrollView/FlatList scroll gesture handler:** When using a carousel with a layout oriented to only one direction (vertical/horizontal) and inside a ScrollView/FlatList, it is important for the user experience that the unused axis does not impede the scroll of the list. So that, for example, the x-axis is free we can change the [activeOffsetX](https://docs.swmansion.com/react-native-gesture-handler/docs/1.10.3/api/gesture-handlers/pan-gh/#activeoffsetx) of the gesture handler:
134
134
 
135
135
  ```tsx
136
136
  <Carousel
package/README.zh-CN.md CHANGED
@@ -26,29 +26,29 @@
26
26
 
27
27
  | <img src="assets/normal-horizontal.gif"/> | <img src="assets/normal-vertical.gif"/> | <img src="assets/parallax-horizontal.gif"/> |
28
28
  | :------------------------------------------------------------------: | :-------------------------------------------------------------------: | :--------------------------------------------------------------------: |
29
- | <a href="./exampleExpo/src/normal/index.tsx">normal-horizontal</a> | <a href="./exampleExpo/src/normal/index.tsx">normal-vertical</a> | <a href="./exampleExpo/src/parallax/index.tsx">parallax-horizontal</a> |
29
+ | <a href="./exampleExpo/src/pages/normal/index.tsx">normal-horizontal</a> | <a href="./exampleExpo/src/pages/normal/index.tsx">normal-vertical</a> | <a href="./exampleExpo/src/pages/parallax/index.tsx">parallax-horizontal</a> |
30
30
  | <img src="assets/parallax-vertical.gif"/> | <img src="assets/stack-horizontal-left.gif"/> | <img src="assets/stack-horizontal-right.gif"/> |
31
- | <a href="./exampleExpo/src/parallax/index.tsx">parallax-vertical</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-horizontal-left</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-horizontal-right</a> |
31
+ | <a href="./exampleExpo/src/pages/parallax/index.tsx">parallax-vertical</a> | <a href="./exampleExpo/src/pages/stack/index.tsx">stack-horizontal-left</a> | <a href="./exampleExpo/src/pages/stack/index.tsx">stack-horizontal-right</a> |
32
32
  | <img src="assets/stack-vertical-left.gif"/> | <img src="assets/stack-vertical-right.gif"/> | <img src="assets/stack-horizontal-right.gif"/> |
33
- | <a href="./exampleExpo/src/stack/index.tsx">stack-vertical-left</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-vertical-right</a> | <a href="./exampleExpo/src/stack/index.tsx">stack-horizontal-right</a> |
33
+ | <a href="./exampleExpo/src/pages/stack/index.tsx">stack-vertical-left</a> | <a href="./exampleExpo/src/pages/stack/index.tsx">stack-vertical-right</a> | <a href="./exampleExpo/src/pages/stack/index.tsx">stack-horizontal-right</a> |
34
34
  | <img src="assets/left-align.gif"/> |
35
- | <a href="./exampleExpo/src/left-align/index.tsx">left-align</a> |
35
+ | <a href="./exampleExpo/src/pages/left-align/index.tsx">left-align</a> |
36
36
 
37
37
  > 现在你可以和我们一起来制作酷炫的动画了！ 非常简单! [[详情]](./docs/custom-animation.zh-CN.md)
38
38
 
39
39
  | <img src="assets/advanced-parallax.gif"/> | <img src="assets/pause-advanced-parallax.gif"/> | <img src="assets/scale-fade-in-out.gif"/> |
40
40
  | :-----------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------: |
41
- | <a href="./exampleExpo/src/advanced-parallax/index.tsx">advanced-parallax</a> | <a href="./exampleExpo/src/pause-advanced-parallax/index.tsx">pause-advanced-parallax</a> | <a href="./exampleExpo/src/scale-fade-in-out/index.tsx">scale-fade-in-out</a> |
41
+ | <a href="./exampleExpo/src/pages/advanced-parallax/index.tsx">advanced-parallax</a> | <a href="./exampleExpo/src/pause-advanced-parallax/index.tsx">pause-advanced-parallax</a> | <a href="./exampleExpo/src/pages/scale-fade-in-out/index.tsx">scale-fade-in-out</a> |
42
42
  | <img src="assets/rotate-scale-fade-in-out.gif"/> | <img src="assets/rotate-in-out.gif"/> | <img src="assets/anim-tab-bar.gif"/> |
43
- | <a href="./exampleExpo/src/rotate-scale-fade-in-out/index.tsx">rotate-scale-fade-in-out</a> | <a href="./exampleExpo/src/rotate-in-out/index.tsx">rotate-in-out</a> | <a href="./exampleExpo/src/anim-tab-bar/index.tsx">anim-tab-bar</a> |
43
+ | <a href="./exampleExpo/src/pages/rotate-scale-fade-in-out/index.tsx">rotate-scale-fade-in-out</a> | <a href="./exampleExpo/src/pages/rotate-in-out/index.tsx">rotate-in-out</a> | <a href="./exampleExpo/src/pages/anim-tab-bar/index.tsx">anim-tab-bar</a> |
44
44
  | <img src="assets/marquee.gif"/> | <img src="assets/multiple.gif"/> | <img src="assets/circular.gif"/> |
45
- | <a href="./exampleExpo/src/marquee/index.tsx">marquee</a> | <a href="./exampleExpo/src/multiple/index.tsx">multiple</a> | <a href="./exampleExpo/src/circular/index.tsx">circular</a> |
45
+ | <a href="./exampleExpo/src/pages/marquee/index.tsx">marquee</a> | <a href="./exampleExpo/src/pages/multiple/index.tsx">multiple</a> | <a href="./exampleExpo/src/pages/circular/index.tsx">circular</a> |
46
46
  | <img src="assets/fold.gif"/> | <img src="assets/tear.gif"/> | <img src="assets/press-swipe.gif"/> |
47
- | <a href="./exampleExpo/src/fold/index.tsx">fold</a> | <a href="./exampleExpo/src/tear/index.tsx">tear</a> | <a href="./exampleExpo/src/press-swipe/index.tsx">press-swipe</a> |
47
+ | <a href="./exampleExpo/src/pages/fold/index.tsx">fold</a> | <a href="./exampleExpo/src/tear/index.tsx">tear</a> | <a href="./exampleExpo/src/pages/press-swipe/index.tsx">press-swipe</a> |
48
48
  | <img src="assets/cube-3d.gif"/> | <img src="assets/blur-parallax.gif"/> | <img src="assets/curve.gif"/> |
49
- | <a href="./exampleExpo/src/cube-3d/index.tsx">cube-3d</a> | <a href="./exampleExpo/src/blur-parallax/index.tsx">blur-parallax</a> | <a href="./exampleExpo/src/curve/index.tsx">curve</a> |
49
+ | <a href="./exampleExpo/src/pages/cube-3d/index.tsx">cube-3d</a> | <a href="./exampleExpo/src/pages/blur-parallax/index.tsx">blur-parallax</a> | <a href="./exampleExpo/src/pages/curve/index.tsx">curve</a> |
50
50
  | <img src="assets/parallax-layers.gif"/> | <img src="assets/stack-cards.gif"/> | <img src="assets/flow.gif"/> |
51
- | <a href="./exampleExpo/src/parallax-layers/index.tsx">parallax-layers</a> | <a href="./exampleExpo/src/stack-cards/index.tsx">stack-cards</a> | <a href="./exampleExpo/src/flow/index.tsx">flow</a> |
51
+ | <a href="./exampleExpo/src/pages/parallax-layers/index.tsx">parallax-layers</a> | <a href="./exampleExpo/src/pages/stack-cards/index.tsx">stack-cards</a> | <a href="./exampleExpo/src/pages/flow/index.tsx">flow</a> |
52
52
 
53
53
  ## 目录
54
54
 
@@ -125,9 +125,9 @@ export default Index;
125
125
 
126
126
  - 优化
127
127
  - 当渲染大量元素时，可使用`windowSize`属性，来控制当前元素的两侧渲染数量，默认为全量渲染。经测试不加此属性，渲染 200 个空 view 时会出现掉帧情况，设置此属性后渲染 1000 个空 view 依旧流畅。（具体数量与测试的手机型号相关）
128
- - 在`ScrollView/FlastList`中使用
128
+ - 在`ScrollView/FlatList`中使用
129
129
 
130
- - **[#143](https://github.com/dohooo/react-native-reanimated-carousel/issues/143) - Carousel suppresses ScrollView/FlastList scroll gesture handler:** 当轮播图被放置在 ScrollView/FlatList 中时，轮播图的部分将无法控制列表滚动，解决办法是我们只允许手势系统识别某一方向，而不是所有方向，在下方例子中我们为了让列表可以向下滑动，所以我们使用[activeOffsetX](https://docs.swmansion.com/react-native-gesture-handler/docs/1.10.3/api/gesture-handlers/pan-gh/#activeoffsetx)属性来控制轮播图只识别横向手势:
130
+ - **[#143](https://github.com/dohooo/react-native-reanimated-carousel/issues/143) - Carousel suppresses ScrollView/FlatList scroll gesture handler:** 当轮播图被放置在 ScrollView/FlatList 中时，轮播图的部分将无法控制列表滚动，解决办法是我们只允许手势系统识别某一方向，而不是所有方向，在下方例子中我们为了让列表可以向下滑动，所以我们使用[activeOffsetX](https://docs.swmansion.com/react-native-gesture-handler/docs/1.10.3/api/gesture-handlers/pan-gh/#activeoffsetx)属性来控制轮播图只识别横向手势:
131
131
 
132
132
  ```tsx
133
133
  <Carousel
package/package.json CHANGED
@@ -1,24 +1,14 @@
1
1
  {
2
2
  "name": "react-native-reanimated-carousel",
3
- "version": "3.3.0",
3
+ "version": "3.3.2",
4
4
  "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
5
5
  "main": "lib/commonjs/index",
6
6
  "react-native": "src/index.tsx",
7
7
  "types": "lib/typescript/index.d.ts",
8
8
  "source": "src/index",
9
9
  "files": [
10
- "src",
11
10
  "lib",
12
- "android",
13
- "ios",
14
- "cpp",
15
- "react-native-reanimated-carousel.podspec",
16
- "!lib/typescript/example",
17
- "!android/build",
18
- "!ios/build",
19
- "!**/__tests__",
20
- "!**/__fixtures__",
21
- "!**/__mocks__"
11
+ "src"
22
12
  ],
23
13
  "scripts": {
24
14
  "gif": "node scripts/makegif.js ./scripts/gif-works-directory",