Swipable Views with pagination for react-native
This component is wrapper from react-swipable-views component. It adds pagination dots.
Installation
npm install swipable-views-with-pagination
Props
Name | Type | Default | Description |
---|---|---|---|
children | node | Use this property to provide your slides. | |
containerStyle | object | {} | Whether or not the auto complete is animated as it is toggled. |
disabled | bool | false | If true, it will disable touch events. This is useful when you want to prohibit the user from changing slides. |
index | integer | 0 | This is the index of the slide to show. This is useful when you want to change the default slide shown. Or when you have tabs linked to each slide. |
onChangeIndex | Function(index, fromIndex) | This is callback prop. It's call by the component when the shown slide change after a swipe made by the user. This is useful when you have tabs linked to each slide. | |
onSwitching | Function(index) | This is callback prop. It's called by the component when the slide switching. This is useful when you want to implement something corresponding to the current slide position. | |
resistance | bool | false | If true, it will add bounds effect on the edges. |
style | object | {} | This is the inlined style that will be applied on the root component. |
slideStyle | object | {} | This is the inlined style that will be applied on the slide component. |
threshold | integer | 5 | This is the threshold used for detectinga quick swipe. If the computed speed is above this value, the index change. |
SwipableViewsWithPagination specific props | |||
------------------------------------------- | |||
paginationStyle | object | default css styles | Style pagination wrapper |
dotsStyle | object | default css styles | Styles for paginations dots |
getPaginationDimensions | func | return { x,y,width,height } | Get pagination wrapper size |
Native
; ; ; const MyComponent = <SwipeableViewsWithPagination style=slideContainer> <View style=stylesslide stylesslide1> <Text style=stylestext> slide n°1 </Text> </View> <View style=stylesslide stylesslide2> <Text style=stylestext> slide n°2 </Text> </View> <View style=stylesslide stylesslide3> <Text style=stylestext> slide n°3 </Text> </View> </SwipeableViewsWithPagination>; onst styles = StyleSheet; ;