Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

❤️ Kik App, you know? 💑 Kikder™ is a dating webapp that integrates the Kik, uses the HorOrNot game and the Tinder swipe. The F.A.S.T. Game Approach! The web app uses a custom lightweight MVC framework.

Stars: ✭ 21 (-93.33%)

Mutual labels: swipe, tinder

Reswipecard

a light lib for swipe the cards implemented by RecyclerView

Stars: ✭ 230 (-26.98%)

Mutual labels: swipe, card

Placeholderview

This library provides advance views for lists and stacks. Some of the views are build on top of RecyclerView and others are written in their own. Annotations are compiled by annotation processor to generate bind classes. DOCS -->

Stars: ✭ 2,104 (+567.94%)

Mutual labels: swipe, tinder

Shuffle

🔥 A multi-directional card swiping library inspired by Tinder

Stars: ✭ 535 (+69.84%)

Mutual labels: swipe, tinder

react-tinder-card

A npm react module for making react elements swipeable like in the dating app tinder.

Stars: ✭ 184 (-41.59%)

Mutual labels: swipe, tinder

Stacklayout

Android 层叠卡片控件，仿"探探app"

Stars: ✭ 437 (+38.73%)

Mutual labels: swipe, card

React Responsive Carousel

React.js Responsive Carousel (with Swipe)

Stars: ✭ 1,962 (+522.86%)

Mutual labels: swipe, react-component

Android Swipecards View

Android library to implement cards stack view with swipe to remove feature

Stars: ✭ 162 (-48.57%)

Mutual labels: swipe, card

Flare

A full-fledged unofficial Angular-based Tinder web client

Stars: ✭ 23 (-92.7%)

Mutual labels: swipe, tinder

Tinderswipeview

Swipe view inspired by tinder

Stars: ✭ 289 (-8.25%)

Mutual labels: swipe, tinder

Readme Template

📜 Modelos readme para qualquer pessoa copiar e usar em seu GitHub.

Stars: ✭ 287 (-8.89%)

Mutual labels: card

Cardslideview

一行代码实现ViewPager卡片效果，比ViewPager2更强大，底层同样是RecyclerView

Stars: ✭ 301 (-4.44%)

Mutual labels: card

Cercle

Cercle is a CRM+Project Manager for your organization - Phoenix Framework & Vuejs

Stars: ✭ 284 (-9.84%)

Mutual labels: card

View All Similar Projects ➔

react-native-card-stack-swiper

Tinder like react-native card stack swiper

Installation

  npm install --save react-native-card-stack-swiper

Preview

import CardStack, { Card } from 'react-native-card-stack-swiper';

  <CardStack style={styles.content} ref={swiper => { this.swiper = swiper }}>
    <Card style={[styles.card, styles.card1]}><Text style={styles.label}>A</Text></Card>
    <Card style={[styles.card, styles.card2]}><Text style={styles.label}>B</Text></Card>
    <Card style={[styles.card, styles.card1]}><Text style={styles.label}>C</Text></Card>
  </CardStack>

CardStack

CardStack props

Props	type	description	default
style	object	container style	{}
cardContainerStyle	object	cardContainerStyle style	{}
secondCardZoom	number	second card zoom	0.95
duration	number	animation duration	300
initialIndex	number	initial card index	0
loop	bool	keep swiping indefinitely	false
renderNoMoreCards	func		false
disableTopSwipe	bool	disable top swipe	false
disableBottomSwipe	bool	disable bottom swipe	false
disableLeftSwipe	bool	disable left swipe	false
disableRightSwipe	bool	disable right swipe	false
verticalSwipe	bool	enable/disable vertical swiping	true
horizontalSwipe	bool	enable/disable horizont swiping	true
verticalThreshold	number	vertical swipe threshold	height/4
horizontalThreshold	number	horizontal swipe threshold	width/2
outputRotationRange	array	rotation values for the x values	['-15deg', '0deg', '15deg']

CardStack events

Props	type	description
onSwipeStart	func	function to be called when a card swipe starts
onSwipeEnd	func	function to be called when a card swipe ends (card is released)
onSwiped	func	function to be called when a card is swiped. it receives the swiped card index
onSwipedLeft	func	function to be called when a card is swiped left. it receives the swiped card index
onSwipedRight	func	function to be called when a card is swiped right. it receives the swiped card index
onSwipedTop	func	function to be called when a card is swiped top. it receives the swiped card index
onSwipedBottom	func	function to be called when a card is swiped bottom. it receives the swiped card index
onSwipedAll	async func	function to be called when the last card is swiped. Could trig action to refresh cards
onSwipe	func	function to be called when a card is swiped. It receives the current x, and y coordinates

CardStack actions

Props	type
swipeLeft	func
swipeRight	func
swipeBottom	func
swipeTop	func
goBackFromLeft	func
goBackFromRight	func
goBackFromBottom	func
goBackFromTop	func

  <CardStack style={styles.content} ref={swiper => { this.swiper = swiper }}>
    <Card style={[styles.card, styles.card1]}><Text style={styles.label}>A</Text></Card>
    <Card style={[styles.card, styles.card2]}><Text style={styles.label}>B</Text></Card>
  </CardStack>

  <TouchableOpacity onPress={ () => { this.swiper.swipeLeft() }}>
    <Text>Left</Text>
  </TouchableOpacity>

Card

Card props

Props	type	description	required	default
style	object	container style		{}

Card events

Props	type	description
onSwiped	func	function to be called when a card is swiped.
onSwipedLeft	func	function to be called when a card is swiped left.
onSwipedRight	func	function to be called when a card is swiped right.
onSwipedTop	func	function to be called when a card is swiped top.
onSwipedBottom	func	function to be called when a card is swiped bottom.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 315

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (30) 🔗