react-native-swipeup

Beautiful Card Swiper to React Native

Examples

Installation

Yarn

yarn add react-native-swipeup

Npm

npm i  react-native-swipeup

Usage

import React, {PureComponent} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import Upswipe from 'react-native-swipeup';

class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      serverData: [],
    };
    const apiKey = 'enter your api key ';
    const pageSize = 20;
    const url = `https://newsapi.org/v2/top-headlines?country=in&apiKey=${apiKey}`
    fetch(`${url}`)
      .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 (
      <View
        style={{
          height: '100%',
          width: '100%',
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'pink',
        }}>
        <Text>No More News at this Post Please come after some time</Text>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <Upswipe
          data={this.state.serverData}
          renderCard={this.renderCard}
          renderNoMoreCards={this.renderNoMoreCards}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
export default App;

Options/Props

<Upswipe
          data={this.state.serverData}
          renderCard={this.renderCard}
          renderNoMoreCards={this.renderNoMoreCards}
/>


## License

MIT © [Kush Kumar](https://github.com/kush11/react-native-swipeup.git)