Skip to content
This repository has been archived by the owner on Jun 26, 2024. It is now read-only.

Releases: alexstyl/compose-tinder-card

0.1.0

23 Aug 13:44
Compare
Choose a tag to compare

What's new

  • Can now swipe to any direction (Up, Down, Left, Right). (#1)
  • New parameter blockedDirection added: Allows you block swiping towards specific directions. By default, only horizontal swipes are allowed.

0.0.1

21 Aug 14:55
Compare
Choose a tag to compare

Initial release

How to use

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.

How to swipe programmatically

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.

How to detect that a card has been swiped away

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!!}")
    }
}