import React, {PureComponent} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {Card, Button} from 'react-native-elements';
import CardSwiper from 'react-native-card-swipe';
 
class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      serverData: [],
    };
    fetch(
      'https://newsapi.org/v2/top-headlines?country=in&apiKey=e9ed76ff6496462b8096d1e4b3178434',
      {
        method: 'GET',
      },
    )
      .then(response => response.json())
      .then(responseJson => this.setState({serverData: responseJson.articles}))
      .catch(err => {
        alert(err, 'Sorry for error');
      });
  }
 
  renderCard(item) {
    return (
      <View style={{alignSelf: 'center'}}>
        <Card key={item.title} image={{uri: item.urlToImage}}>
          <Text style={{marginBottom: 10, height: 50, width: null}}>
            {item.description}
          </Text>
        </Card>
      </View>
    );
  }
 
  renderNoMoreCards() {
    return (
      <Card title="All done">
        <Text>There is no more content</Text>
        <Button title="Get More" />
      </Card>
    );
  }
 
  render() {
    return (
      <View style={styles.container}>
        <CardSwiper
          data={this.state.serverData}
          renderCard={this.renderCard}
          onSwipeLeft={item => console.log(item, 'onSwipeLeft')}
          onSwipeRight={item => console.log(item, 'onSwipeRight')}
          renderNoMoreCards={this.renderNoMoreCards}
        />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
export default App;
 

 
<CardSwiper
          data={this.state.serverData}
          renderCard={this.renderCard}
          onSwipeLeft={item => console.log(item, 'onSwipeLeft')}
          onSwipeRight={item => console.log(item, 'onSwipeRight')}
          renderNoMoreCards={this.renderNoMoreCards}
/>
 
 
## License
 
MIT © [Kush Kumar](https://github.com/kush11/react-native-card-swipe)