react-native-walkthrough-swiper v0.1.6

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

License

MIT