Skip to content

Added nope/yep buttons#6

Open
davidyaha wants to merge 8 commits intodcworldwide:masterfrom
davidyaha:master
Open

Added nope/yep buttons#6
davidyaha wants to merge 8 commits intodcworldwide:masterfrom
davidyaha:master

Conversation

@davidyaha
Copy link
Copy Markdown

This PR is based on an old PR by @kn4rfy. I haven't included the back button like he did because it is of no use for me. My implementation adds custom render props to the swipe cards component.

Example Usage:

renderYupButton() {
    console.log("Rendering");
    return (
      <View style={[styles.roundButton, {backgroundColor: ColorConstants.emerald}]}>
        <Icon name="heart" size={35} color="white"/>
      </View>
    );
  }

  renderNopeButton() {
    return (
      <View style={[styles.roundButton, {backgroundColor: ColorConstants.darkishRed}]}>
        <Icon name="times" size={45} color="white" style={{paddingBottom: 2, paddingRight: 1,}}/>
      </View>
    );
  }

render() {
        return (
      <SwipeCards
        cards={this.props.cardDataList}
        renderCard={(cardData) => <Card {...cardData} />}
        renderNoMoreCards={() => <NoMoreCards />}
        handleYup={(card)=>this.props.onSwipe(card.id, true)}
        handleNope={(card)=>this.props.onSwipe(card.id, false)}
        showNope={false} showYup={false}
        renderYupButton={this.renderYupButton}
        renderNopeButton={this.renderNopeButton}
        containerStyle={styles.container}
        buttonContainerStyle={styles.buttonsContainer}
        loop={this.props.loop}
      />
    )

screen shot 2016-07-26 at 16 12 58

…the end of the animation.

* This allows for cleaner animation and transitions to happen based on the swipe and like/don't like actions.
@davidyaha
Copy link
Copy Markdown
Author

Hey @dcworldwide,

I've opened this PR on your fork instead of the source repo because it seems that this is the most updated and has allot more customization options.
Currently I am pointing my package.js config to my own repo but I would certainly prefer directing it to your repo instead. I also think that at this time, it might be worth declaring this as the official repo and publish to npm.

Thanks for the work done here! It was very helpful!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant