A Jetpack Compose Modifier
that enables Tinder-like card gestures.
Click the play button to see the Modifier.swipeableCard()
in action:
demo.mp4
Add the following code in your app/build.gradle
file:
repositories {
...
mavenCentral()
}
dependencies {
implementation 'com.alexstyl.swipeablecard:swipeablecard:0.0.1'
}
Add the Modifier.swipeableCard()
into your @Composable
function to enable Tinder-like card gestures:
val state = rememberSwipeableCardState()
Box(
modifier = Modifier
.fillMaxSize()
.swipableCard(
state = state,
onSwiped = { direction ->
println("The card was swiped to $direction")
},
onSwipeCancel = {
println("The swiping was cancelled")
}
)
) {
// contents ...
}
The SwipeableCardState
gives you access to the card's offset so that you can create advanced animations according to the amount of swiping done.
The swipedDirection gives you the direction the card has been fully swiped.
Use the SwipeableCardState
to swipe to a specific direction without a gesture:
val state = rememberSwipeableCardState()
// pass the state in your Modifier.swipeableCard(state)
val scope = rememberCoroutineScope()
Button(
onClick = {
scope.launch {
state.swipe(Direction.Right)
}
}
) {
Text("Like")
}
The swipe()
suspend function will return, as soon as the swipe animation is finished.
Use the SwipeableCardState.swipedDirection
. You may want to combine it with a LaunchedEffect()
in order to receive a callback when your card is swiped away (using a gesture or programmatically):
LaunchedEffect(state.swipedDirection){
if(state.swipedDirection!=null) {
println("The card was swiped to ${state.swipedDirection!!}")
}
}
Checkout the app's MainActivity.kt to see a fully functioning example of usage.
Apache 2.0. See the LICENSE file for details.
Made by Alex Styl. Follow me on Twitter for updates.
Inspired by Twypper and react-tinder-card