react-native-walkthrough-swiper

A Intro Swiper component for React-Native. Uses Reanimated API to create smooth animations.

Demo

!Demo

Installation

``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




Usage

`js

import { WalkthroughSwiper } from 'react-native-walkthrough-swiper';

// ...

data={sliderData}
skipText={'Skip'}
skipTextStyle={{ color: '#ccc' }}
nextButton={{'Next'}}
centerComponent={
{'Your App'}
}
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` |

$3

MIT
---