react-native-animated-swiper

A swiper component for React Native.

react-native-animated-swiper

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