Skip to content

Commit e7df886

Browse files
dohooodohooo
authored
Merge pull request #55 from dohooo/1.0.10
WIP: 1.0.10
2 parents 1edc9c3 + d4673d0 commit e7df886

34 files changed

+1806
-610
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@ module.exports = {
1212
useTabs: false,
1313
},
1414
],
15+
'react-native/no-inline-styles': 0,
1516
},
1617
};

‎README.md‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@ English | [简体中文](./README.zh-CN.md)
1111
[![github closed issues](https://img.shields.io/github/issues-closed/dohooo/react-native-reanimated-carousel.svg?style=flat-square&colorB=44cc11)](https://github.com/dohooo/react-native-reanimated-carousel/issues?q=is%3Aissue+is%3Aclosed)
1212

1313
<p align="center">
14-
<img src="assets/normal.gif" width="300"/>
14+
<img src="assets/normal-horizontal.gif" width="300"/>
15+
<img src="assets/normal-vertical.gif" width="300"/>
16+
<img src="assets/parallax-horizontal.gif" width="300"/>
17+
<img src="assets/parallax-vertical.gif" width="300"/>
1518
</p>
1619

1720
<br/>
@@ -32,10 +35,10 @@ English | [简体中文](./README.zh-CN.md)
3235
</p>
3336

3437
<p align="center">
35-
Compared with react-native-reanimated-carousel,The actual test was ten slides per second, but it didn't show up very well in gif.（gif 83mb）
38+
Compared with react-native-reanimated-carousel,The actual test was ten slides per second, but it didn't show up very well in gif.
3639
</p>
3740
<p align="center">
38-
<img src="assets/fast.gif" width="50%"/>
41+
<img src="assets/normal-fast.gif" width="50%"/>
3942
</p>
4043
</details>
4144

@@ -67,41 +70,42 @@ If use EXPO managed workflow please ensure that the version is greater than 41.B
6770
import Carousel from 'react-native-reanimated-carousel';
6871

6972
<Carousel<{ color: string }>
70-
width={ width }
73+
width={width}
7174
data={[{ color: 'red' }, { color: 'purple' }, { color: 'yellow' }]}
7275
renderItem={({ color }) => {
73-
return <View style={{ backgroundColor: color, flex: 1}}/>
76+
return <View style={{ backgroundColor: color, flex: 1 }} />;
7477
}}
7578
/>;
7679
```
7780

7881
## Optimizing
79-
- 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)
82+
83+
- 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)
8084

8185
## Props
8286

83-
| name | required | default | types | description |
84-
| ----------------------- | -------- | -------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
85-
| data | ✅ | | T[] | Carousel items data set |
86-
| width | ✅ | | number | Specified carousel container width |
87-
| renderItem | ✅ | | (data: T, index: number) => React.ReactNode | Render carousel item |
88-
| defaultIndex | ❌ | 0 | number | Default index |
89-
| autoPlay | ❌ | false | boolean | Auto play |
90-
| autoPlayReverse | ❌ | false | boolean | Auto play reverse playback |
91-
| autoPlayInterval | ❌ | 1000 | autoPlayInterval | Auto play playback interval |
92-
| mode | ❌ | defalut | 'default'\|'parallax' | Carousel Animated transitions |
93-
| loop | ❌ | true | boolean | Carousel loop playback |
94-
| parallaxScrollingOffset | ❌ | 100 | number | When use 'parallax' Layout props,this prop can be control prev/next item offset |
95-
| parallaxScrollingScale | ❌ | 0.8 | number | When use 'parallax' Layout props,this prop can be control prev/next item scale |
96-
| style | ❌ | {} | ViewStyle | Carousel container style |
97-
| height | ❌ | '100%' | undefined \| string \| number | Specified carousel container height |
98-
| springConfig | ❌ | {damping: 100} | Animated.WithSpringConfig | Spring config of translation animated |
99-
| onSnapToItem | ❌ | | (index: number) => void | Callback fired when navigating to an item |
100-
| onScrollBegin | ❌ | | () => void | Callback fired when scroll begin |
101-
| onScrollEnd | ❌ | | (previous: number, current: number) => void | Callback fired when scroll end |
102-
| panGestureHandlerProps | ❌ | {} | Omit<Partial\<PanGestureHandlerProps\>,'onHandlerStateChange'> | PanGestureHandler props |
103-
| windowSize | ❌ | 0 | number | The maximum number of items that can respond to pan gesture events, `0` means all items will respond to pan gesture events
104-
| onProgressChange | ❌ | | onProgressChange?: (offsetProgress: number,absoluteProgress: number) => void | On progress change. `offsetProgress`:Total of offset distance (0 390 780 ...); `absoluteProgress`:Convert to index (0 1 2 ...) |
87+
| name | required | default | types | description |
88+
| ----------------------- | -------- | ------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
89+
| data | ✅ | | T[] | Carousel items data set |
90+
| width | ✅ | | number | Specified carousel container width |
91+
| renderItem | ✅ | | (data: T, index: number) => React.ReactNode | Render carousel item |
92+
| defaultIndex | ❌ | 0 | number | Default index |
93+
| autoPlay | ❌ | false | boolean | Auto play |
94+
| autoPlayReverse | ❌ | false | boolean | Auto play reverse playback |
95+
| autoPlayInterval | ❌ | 1000 | autoPlayInterval | Auto play playback interval |
96+
| mode | ❌ | defalut | 'default'\|'parallax' | Carousel Animated transitions |
97+
| loop | ❌ | true | boolean | Carousel loop playback |
98+
| parallaxScrollingOffset | ❌ | 100 | number | When use 'parallax' Layout props,this prop can be control prev/next item offset |
99+
| parallaxScrollingScale | ❌ | 0.8 | number | When use 'parallax' Layout props,this prop can be control prev/next item scale |
100+
| style | ❌ | {} | ViewStyle | Carousel container style |
101+
| height | ❌ | '100%' | undefined \| string \| number | Specified carousel container height |
102+
| onSnapToItem | ❌ | | (index: number) => void | Callback fired when navigating to an item |
103+
| onScrollBegin | ❌ | | () => void | Callback fired when scroll begin |
104+
| onScrollEnd | ❌ | | (previous: number, current: number) => void | Callback fired when scroll end |
105+
| panGestureHandlerProps | ❌ | {} | Omit<Partial\<PanGestureHandlerProps\>,'onHandlerStateChange'> | PanGestureHandler props |
106+
| windowSize | ❌ | 0 | number | The maximum number of items that can respond to pan gesture events, `0` means all items will respond to pan gesture events |
107+
| onProgressChange | ❌ | | onProgressChange?: (offsetProgress: number,absoluteProgress: number) => void | On progress change. `offsetProgress`:Total of offset distance (0 390 780 ...); `absoluteProgress`:Convert to index (0 1 2 ...) |
108+
| vertical | ❌ | false | boolean | Layout items vertically instead of horizontally |
105109

106110
## Ref
107111

0 commit comments

Comments
 (0)