react-native-stuff-swiper
A lightweight React Native component for swipe stuff out!
Besides horizontal swipe motion, it has support for side buttons, static header and footer.
Usage
; ; ... const YourAwesomeComponent = { const screensData setScreensData = ; const swiperRef = ; const onPaginationChange = { // Do your stuff here ... } return <StuffSwiper ref=swiperRef HeaderComponent=<YourHeaderComponent /> screensData=screensData enableSideButtons loop onPaginationChange=onPaginationChange DefaultScreenComponent=MyScreenComponent /> ;};
NOTE: ref it's required in order to use public methods (e.g. swiperRef.current.goToIndex(0) in the above example)
screensData example
screenData prop must be an array of objects with the following format:
id: 2 screen: <ReactComponent /> // OR props: //your props
Example of full screensData array:
Without Default screen component:
id: '1' screen: <View> <Text>My first screen </Text> </View> id: '2' screen: <View> <FlatList data=myListInfos keyExtractor= item + index renderItem= <Text style= fontSize: 16 >item</Text> /> </View> id: '3' screen: <Image style=width: 100 height: 100 source=uri: 'https://facebook.github.io/react-native/img/tiny_logo.png' />
With Default screen component:
id: '1' props: title: 'first screen' id: '2' props: title: 'second screen' id: '3' props: title: 'third screen' // any other props that you want to be injected into our DefaultScreenComponent
API Reference
Props
Prop name | Info | Type |
---|---|---|
onPaginationChange | Callback that returns pagination (aka formatted current/total), currentIndex and total | Function |
loop | Specify if the loop behaviour it's enabled (default: false) | Bool |
animated | Specify if the animations are enabled (default: true) | Bool |
screensData | Data that will be rendered on screens | Array of Objects |
HeaderComponent | Component that will be rendered as header | React Component |
FooterComponent | Component that will be rendered as footer | React Component |
DefaultScreenComponent | Component that will be rendered as screen | React Component |
DefaultScreenProps | Global Props that will be injected in DefaultScreenComponent | Object |
enableSideButtons | Specify if side buttons are enabled (default: false) | Bool |
nextButtonComponent | Component that will be rendered as next side button | React Component |
previousButtonComponent | Component that will be rendered as previous side button | React Component |
styleHeaderContainer | Specify the header container styles | Style Object |
styleFooterContainer | Specify the footer container styles | Style Object |
styleContentContainer | Specify the content container styles | Style Object |
styleSideButtonsContainer | Specify the side buttons container styles | Style Object |
styleButton | Specify the default side button container styles | Style Object |
buttonSize | Specify the side buttons size (default: 30) | Number |
Public methods
Method name | Info | Parameters | Return |
---|---|---|---|
getPagination | Get current pagination status | - | { currentIndex, pagination, total } |
next | Go to the next screen | - | - |
prev | Go to the previous screen | - | - |
goToIndex | Go to the specified index | index | - |