Skip to content

Commit e9191f9

Browse files
dohooodohooo
committed
feat: add defaultIndex props
fix #31
1 parent 7d73a53 commit e9191f9

File tree

12 files changed

+136
-91
lines changed

12 files changed

+136
-91
lines changed

‎README.md‎

Lines changed: 39 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,14 @@ English | [简体中文](./README.zh-CN.md)
1717
<br/>
1818

1919
## Here comes the official edition！
20+
2021
`v1` has been born, now the carousel will be more natural, and fixed various bugs in the 0.x version, this library will continue to maintain, rest assured to use! [come and experience](https://snack.expo.dev/@zhaodonghao586/simple-carousel) 🎉🎉🎉
2122

2223
Updates：
23-
- Reconstructed some logic, sliding animation more smooth, natural
24-
- timingConfig -> springConfig （The configuration of the 'duration' property is no longer supported by this configuration）
25-
- [...](https://github.com/dohooo/react-native-reanimated-carousel/releases/tag/v1.0.0)
2624

25+
- Reconstructed some logic, sliding animation more smooth, natural
26+
- timingConfig -> springConfig （The configuration of the 'duration' property is no longer supported by this configuration）
27+
- [...](https://github.com/dohooo/react-native-reanimated-carousel/releases/tag/v1.0.0)
2728

2829
## Reason
2930

@@ -72,52 +73,50 @@ If use EXPO managed workflow please ensure that the version is greater than 41.B
7273
## Usage
7374

7475
```typescript
75-
import Carousel from "react-native-reanimated-carousel";
76+
import Carousel from 'react-native-reanimated-carousel';
7677

7778
// ...
7879

7980
<Carousel<{ color: string }>
80-
width={width}
81-
data={[{ color: "red" }, { color: "purple" }, { color: "yellow" }]}
82-
renderItem={({ color }) => {
83-
return (
84-
<View
85-
style={{
86-
backgroundColor: color,
87-
justifyContent: "center",
88-
flex: 1,
89-
}}
90-
/>
91-
);
92-
}}
81+
width={width}
82+
data={[{ color: 'red' }, { color: 'purple' }, { color: 'yellow' }]}
83+
renderItem={({ color }) => {
84+
return (
85+
<View
86+
style={{
87+
backgroundColor: color,
88+
justifyContent: 'center',
89+
flex: 1,
90+
}}
91+
/>
92+
);
93+
}}
9394
/>;
9495
```
9596

9697
## Props
9798

98-
| name | required | default | types | description |
99-
| ----------------------- | -------- | --------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------- |
100-
| data | ✅ | | T[] | Carousel items data set |
101-
| width | ✅ | | number | Specified carousel container width |
102-
| renderItem | ✅ | | (data: T, index: number) => React.ReactNode | Render carousel item |
103-
| autoPlay | ❌ | false | boolean | Auto play |
104-
| autoPlayReverse | ❌ | false | boolean | Auto play reverse playback |
105-
| autoPlayInterval | ❌ | 1000 | autoPlayInterval | Auto play playback interval |
106-
| mode | ❌ | defalut | 'default'\|'parallax' | Carousel Animated transitions |
107-
| loop | ❌ | true | boolean | Carousel loop playback |
108-
| parallaxScrollingOffset | ❌ | 100 | number | When use 'parallax' Layout props,this prop can be control prev/next item offset |
109-
| parallaxScrollingScale | ❌ | 0.8 | number | When use 'parallax' Layout props,this prop can be control prev/next item scale |
110-
| style | ❌ | {} | ViewStyle | Carousel container style |
111-
| height | ❌ | '100%' | undefined \| string \| number | Specified carousel container height |
112-
| springConfig | ❌ | {damping: 100} | Animated.WithSpringConfig | Spring config of translation animated |
113-
| onSnapToItem | ❌ | | (index: number) => void | Callback fired when navigating to an item |
114-
| onScrollBegin | ❌ | | () => void | Callback fired when scroll begin |
115-
| onScrollEnd | ❌ | | (previous: number, current: number) => void | Callback fired when scroll end |
116-
| panGestureHandlerProps | ❌ | {} | Omit<Partial\<PanGestureHandlerProps\>,'onHandlerStateChange'> | PanGestureHandler props |
117-
| 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 ...) |
118-
119-
120-
99+
| name | required | default | types | description |
100+
| ----------------------- | -------- | -------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
101+
| data | ✅ | | T[] | Carousel items data set |
102+
| width | ✅ | | number | Specified carousel container width |
103+
| renderItem | ✅ | | (data: T, index: number) => React.ReactNode | Render carousel item |
104+
| defaultIndex | ❌ | 0 | number | Default index |
105+
| autoPlay | ❌ | false | boolean | Auto play |
106+
| autoPlayReverse | ❌ | false | boolean | Auto play reverse playback |
107+
| autoPlayInterval | ❌ | 1000 | autoPlayInterval | Auto play playback interval |
108+
| mode | ❌ | defalut | 'default'\|'parallax' | Carousel Animated transitions |
109+
| loop | ❌ | true | boolean | Carousel loop playback |
110+
| parallaxScrollingOffset | ❌ | 100 | number | When use 'parallax' Layout props,this prop can be control prev/next item offset |
111+
| parallaxScrollingScale | ❌ | 0.8 | number | When use 'parallax' Layout props,this prop can be control prev/next item scale |
112+
| style | ❌ | {} | ViewStyle | Carousel container style |
113+
| height | ❌ | '100%' | undefined \| string \| number | Specified carousel container height |
114+
| springConfig | ❌ | {damping: 100} | Animated.WithSpringConfig | Spring config of translation animated |
115+
| onSnapToItem | ❌ | | (index: number) => void | Callback fired when navigating to an item |
116+
| onScrollBegin | ❌ | | () => void | Callback fired when scroll begin |
117+
| onScrollEnd | ❌ | | (previous: number, current: number) => void | Callback fired when scroll end |
118+
| panGestureHandlerProps | ❌ | {} | Omit<Partial\<PanGestureHandlerProps\>,'onHandlerStateChange'> | PanGestureHandler props |
119+
| 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 ...) |
121120

122121
## Ref
123122

0 commit comments

Comments
 (0)