react native swiper

npm i react-native-swipe

import React, { Component } from 'react'
import { ImageBackground, StyleSheet, Text, View } from 'react-native'
import Swiper from 'react-native-swiper'

const styles = StyleSheet.create({
  wrapper: {},
  slide: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  }
})

export default class SwiperComponent extends Component {
  render() {
    return (
      <Swiper style={styles.wrapper} showsButtons={true}>
        <ImageBackground source={require('./img/1.jpg')}
          resizeMode='cover'
          style={{ ...styles.slide, width: '100%', height: '100%' }}>
          <Text style={styles.text}>Hello Swiper</Text>
        </ImageBackground>
        <ImageBackground source={require('./img/2.jpg')}
          resizeMode='cover'
          style={{ ...styles.slide, width: '100%', height: '100%' }}>
          <Text style={styles.text}>Beautiful</Text>
        </ImageBackground>
        <ImageBackground source={require('./img/3.jpg')}
          resizeMode='cover'
          style={{ ...styles.slide, width: '100%', height: '100%' }}>
          <Text style={styles.text}>And Simple</Text>
        </ImageBackground>
      </Swiper>
    )
  }
}

reference:
https://github.com/leecade/react-native-swiper
https://github.com/leecade/react-native-swiper/blob/master/examples/components/Swiper/index.js
https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting