A swiper component for React Native

react-native-animated-swiper

A swiper component for React Native.

Install

yarn add react-native-animated-swiper

Definition

Prop	Type	Required	Default
backgroundColor	string[]	No	transparent
children	any	No	null
dots	boolean	No	false
dotsBottom	number	No	30
dotsColor	string	No	rgba(0, 0, 0, 0.25)
dotsColorActive	string	No	rgba(0, 0, 0, 0.75)
dotStyle	object	No	dotStyleDefault
dotStyleActive	object	No	{}
driver	Animated.Value	No	new Animated.Value(0)
shadow	boolean	No	false
shadowStyle	object	No	shadowStyleDefault

Example

import React from 'react';

import { Text, View } from 'react-native';

import Swiper from 'react-native-animated-swiper';

const Example = () => (
  <Swiper
    backgroundColor={['#4285f4', '#0f9d58', '#f4b400', '#db4437']}
    dots
    dotsColor="rgba(255, 255, 255, 0.25)"
    dotsColorActive="rgba(255, 255, 255, 0.75)">
    <Slide title="Lorem" />
    <Slide title="ipsum" />
    <Slide title="dolor" />
    <Slide title="sit" />
  </Swiper>
);

const Slide = ({ title }) => (
  <View style={styles.slide}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const styles = {
  slide: { alignItems: 'center', flex: 1, justifyContent: 'center' },
  title: { color: '#fff', fontSize: 48 }
};

export default Example;

GitHub