react-native-cards-slider v0.1.2

A simple cards slider like airbnb has

Autoplay (new)

<CardSilder autoplay interval={4000}>
  {YOUR_AWESOME_CHILDREN}
</CardSilder>

Usage

npm i react-native-cards-slider --save

example:

import CardSilder from 'react-native-cards-slider';

class example extends Component{
  render(){
    return(
      <CardSilder>
        <Image style={{height: 170}} source={{url : 'YOU_IMAGE_URL'}} />
        <Image style={{height: 170}} source={{url : 'YOU_IMAGE_URL'}} />
        <Image style={{height: 170}} source={{url : 'YOU_IMAGE_URL'}} />
        <Image style={{height: 170}} source={{url : 'YOU_IMAGE_URL'}} />
      </CardSilder>
    )
  }
}

complete example in preview gif:

import React, { Component } from 'react';
import { Image, AppRegistry, Text, View } from 'react-native';
import CardSilder from 'react-native-cards-slider';

class App extends Component{
  render(){
    return(
      <View>
        <Text style={{fontSize: 30, color: '#000', marginTop:50, marginLeft:20, fontWeight:'bold'}}>
          Images
        </Text>
        <CardSilder style={{marginTop: 30}}>
          <Image style={{height: 170}} source={{url : 'YOUR_IMAGE'}} />
          <Image style={{height: 170}} source={{url : 'YOUR_IMAGE'}} />
          <Image style={{height: 170}} source={{url : 'YOUR_IMAGE'}} />
          <Image style={{height: 170}} source={{url : 'YOUR_IMAGE'}} />
        </CardSilder>
        <Text style={{fontSize: 30, color: '#000', marginTop:40, marginLeft:20, fontWeight:'bold'}}>
          Block with Text
        </Text>
        <CardSilder style={{marginTop: 30}}>
          <View style={{height: 170, justifyContent:'center', alignItems:'center', backgroundColor: 'skyblue'}}>
            <Text style={{color: 'white', fontSize: 24, fontWeight: 'bold'}}>
              悉尼
            </Text>
          </View>
          <View style={{height: 170, justifyContent:'center', alignItems:'center', backgroundColor: 'lightsalmon'}}>
            <Text style={{color: 'white', fontSize: 24, fontWeight: 'bold'}}>
              纽约
            </Text>
          </View>
          <View style={{height: 170, justifyContent:'center', alignItems:'center', backgroundColor: 'teal'}}>
            <Text style={{color: 'white', fontSize: 24, fontWeight: 'bold'}}>
              东京
            </Text>
          </View>
          <View style={{height: 170, justifyContent:'center', alignItems:'center', backgroundColor: 'lightpink'}}>
            <Text style={{color: 'white', fontSize: 24, fontWeight: 'bold'}}>
              上海
            </Text>
          </View>
        </CardSilder>
      </View>
    )
  }
}

AppRegistry.registerComponent('YOUR_APP_NAME', () => App);

CardSilder itself will set it's width to the device width.

So make sure you have enough space for it, and DO set a height for the children components.

Pull request welcome.