react-native-walkthrough-swiper

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

Demo

Installation

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

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

// ...
<View style={{flex:1}}>
  <WalkthroughSwiper
      data={sliderData}
      skipText={'Skip'}
      skipTextStyle={{ color:  '#ccc' }}
      nextButton={<Text  style={{ color:  '#ccc' }}>{'Next'}</Text>}
      centerComponent={
      <Text  style={{ fontSize:  40, color:  'white' }}>{'Your App'}</Text>
      }
      titleStyle={{ color:  'white' }}
      subTitleStyle={{ color:  'white' }}
      activeSlideColor={'#fff'}
      inActiveSlideColor={'#b2b2b2'}
      onSkipBtnPress={() => {
      // Navigate to the next screen
      }}
  />
</View>

const data = [
{
    title: 'Slide 1',
    subTitle: 'Uses Reanimated API',
    age: 29,
    bgImage: 'some image URI',
  },
  ...
  ]
  

Properties

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

License

MIT