react-native-animated-swiper

A swiper component for React Native.

Usage no npm install needed!

<script type="module">
  import reactNativeAnimatedSwiper from 'https://cdn.skypack.dev/react-native-animated-swiper';
</script>

README

react-native-animated-swiper

npm version

Install

yarn add react-native-animated-swiper

Definition

Prop Type Required Default
children any No null
dots bool No false
dotsBottom number No 100
dotsColor string No rgba(0, 0, 0, 0.25)
dotsColorActive string No #000
dotsStyle object No dotsStyleDefault
driver Animated.Value No new Animated.Value(0)
onSwipe func No (event, index) => undefined

Example

import React from 'react';

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

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

const Example = () => (
  <Swiper
    dots
    dotsColor="rgba(97, 218, 251, 0.25)"
    dotsColorActive="rgba(97, 218, 251, 1)"
    style={styles.slides}>
    <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 = {
  slides: { backgroundColor: '#F5FCFF' },
  slide: { alignItems: 'center', flex: 1, justifyContent: 'center' },
  title: { color: 'rgba(97, 218, 251, 1)', fontSize: 36 }
};

export default Example;