1
1
# react-native-snap-carousel
2
- Simple carousel component with snapping effect on Android & iOS for React Native
2
+ Simple carousel component for React Native with ** previews** and ** snapping effect** . Compatible with Android & iOS.
3
+ Pull requests are very welcome!
3
4
4
- ![ react-native-snap-carousel] ( https://zippy.gfycat.com/BoringBasicKiskadee.gif )
5
- ![ react-native-snap-carousel] ( https://zippy.gfycat.com/IncompatibleVengefulBasenji.gif )
5
+ ## Table of contents
6
+
7
+ 1 . [ Showcase] ( #showcase )
8
+ 1 . [ Usage] ( #usage )
9
+ 1 . [ Props] ( #props )
10
+ 1 . [ Methods] ( #methods )
11
+ 1 . [ Properties] ( #properties )
12
+ 1 . [ Tips and tricks] ( #tips-and-tricks )
13
+ 1 . [ TODO] ( #todo )
14
+
15
+ ## Showcase
16
+
17
+ ![ react-native-snap-carousel] ( http://i.imgur.com/Fope3uj.gif )
18
+ ![ react-native-snap-carousel] ( https://media.giphy.com/media/3o6ZsU9gWWrvYtogow/giphy.gif )
19
+ ![ react-native-snap-carousel] ( https://media.giphy.com/media/3o7TKUAlvi1tYLFCTK/giphy.gif )
6
20
7
21
## Usage
8
22
@@ -40,6 +54,7 @@ items | Array of items to loop on | Array | Required
40
54
sliderWidth | The width in pixels of your slider | Number | Required
41
55
itemWidth | Width in pixels of your items | Number | Required
42
56
renderItem | Function returning a react element. The entry data is the 1st parameter, its index is the 2nd | Function | Required
57
+ shouldOptimizeUpdates | whether to implement a ` shouldComponentUpdate ` strategy to minimize updates | Boolean | ` true `
43
58
slideStyle | Style of each item's container | Number | Required
44
59
swipeThreshold | Delta x when swiping to trigger the snap | Number | ` 20 `
45
60
animationFunc | Animated animation to use. Provide the name of the method | String | ` Timing `
@@ -61,6 +76,12 @@ onSnapToItem(slideIndex, itemData) | Callback fired when navigating to an item |
61
76
* ` startAutoplay (instantly = false) ` Start the autoplay manually
62
77
* ` stopAutoplay () ` Stop the autoplay manually
63
78
* ` snapToItem (index, animated = true) ` Snap to an item manually
79
+ * ` snapToNext (animated = true) ` Snap to next item manually
80
+ * ` snapToPrev (animated = true) ` Snap to previous item manually
81
+
82
+ ## Properties
83
+
84
+ * ` currentIndex ` Current active item (` int ` , starts at 0)
64
85
65
86
## Tips and tricks
66
87
@@ -86,7 +107,7 @@ const styles = Stylesheet.create({
86
107
87
108
` ` `
88
109
89
- ## TODO :
110
+ ## TODO
90
111
91
112
- [ ] Improve snap on Android
92
113
- [ ] Handle changing props on-the-fly
0 commit comments