A walkthrough swiper component for React-Native. Can be used in onboarding/walkthrough screens. Uses Reanimated API to create smooth animations.
npm install react-native-walkthrough-swiper
A Intro Swiper component for React-Native. Uses Reanimated API to create smooth animations.
!Demo
``sh`
npm install react-native-walkthrough-swiper
or
yarn add react-native-walkthrough-swiper
> React Native Reanimated is essential for this and must be installed. Follow the installation steps here: react-native-reanimated
`js
import { WalkthroughSwiper } from 'react-native-walkthrough-swiper';
// ...
skipText={'Skip'}
skipTextStyle={{ color: '#ccc' }}
nextButton={
centerComponent={
}
titleStyle={{ color: 'white' }}
subTitleStyle={{ color: 'white' }}
activeSlideColor={'#fff'}
inActiveSlideColor={'#b2b2b2'}
onSkipBtnPress={() => {
// Navigate to the next screen
}}
/>
const data = [
{
title: 'Slide 1',
subTitle: 'Uses Reanimated API',
age: 29,
bgImage: 'some image URI',
},
...
]
`$3
| Prop | Description | Types |
| ------------------------ | --------------------------------------------------------------- | ----------------- |
| data | Slide actual data, Should be in format. Check the format above. | Array |skipText
| | String value of the skipText. | string |skipTextStyle
| | Style for skipText. | TextStyle |nextButton
| | Next Button. Can be text/image or any component. | React.Component |centerComponent
| | The center component, can be any React component | React.Component |titleStyle
| | Styles for the title. | TextStyle |subTitleStyle
| | Styles for the sub-title. | TextStyle |activeSlideColor
| | Active Slide color (circle dot at bottom). | string |inActiveSlideColor
| | Inactive slide color. | string |onSkipBtnPress
| | Event to trigger on press of Skip Button. | GestureResponderEvent` |