Tinder Swipe Cards Bubble Mobile

⚠️

This plugin is currently available only in the Bubble Mobile Bundle.

Demo to preview the settings

✅

Demo page: https://zeroqode-native-demo-05.bubbleapps.io/api/1.1/mobile/preview?debug_mode=true&preview_view=Tinder Swiper

✅

Bubble Editor: https://bubble.io/page?id=zeroqode-native-demo-05&plugin=1756907385261x714857404458598400_current&tab=Design&name=Tinder+Swiper&type=page&version=live&elements=bTJlI2

Introduction

The plugin delivers an engaging swipe-based browsing experience reminiscent of Tinder, featuring smooth card animations and intuitive gesture controls. With support for swipe left, swipe right, and send-to-back actions, users can seamlessly interact with card decks. Customization options include deck size, swipe thresholds, animation speed, and visual styling to match any app design. Dynamic states such as current index, remaining cards, and swipe direction provide developers with granular control, while event triggers like card liked, card disliked, and deck completed enhance interactivity and user engagement.

Prerequisites

No external API accounts or services are required for this plugin. The plugin works natively within your Bubble application with no additional dependencies.

This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at:

https://testflight.apple.com/join/W13vZ72p

⚠️

Please note that the testing app is currently available for iOS only.

How to setup

Plugin Element Properties - Swiping Deck

The Swiping Deck is an interactive, card-based swiping element for Bubble Native apps. It enables users to browse through a deck of cards with smooth swipe gestures, replicating the familiar "like/dislike" experience. Cards can be swiped left, right, or returned to the stack, with responsive animations and customizable behavior.

Title	Description	Type
Card IDs	List of card ids	Text, Required
Titles	List of card titles	Text, Required
Images	List of card image urls	Text, Required
Description	List of card descriptions	Text, Required
Display Like Button	Displays the Like Button	Yes/No, Required
Display Dislike Button	Displays the Dislike Button	Yes/No, Required
Display Reload Button	Displays the Reload Button	Yes/No, Required
Display Send To Back Button	Displays the Send To Back Button	Yes/No, Required
	Color Styling
Title Color	Text color for the card title	Color
Description Color	Text color for the card description	Color
Empty Text Color	Text color for the “No cards” message	Color
Card Background Color	Card Background Color	Color
Card Border Color	Border color for the card	Color
Card Border Width	Border width for the card	Number, Optional
Card Shadow Color	Shadow color for the card	Color
	Button Styling
Like BG Color	Background color for the Like button	Color
Dislike BG Color	Background color for the Dislike button	Color
Reload BG Color	Background color for the Reload button	Color
Send To Back BG Color	Background color for the Send-to-Back button	Color
Like Icon Url	Url of the like icon to use	Text, Optional
Dislike Icon Url	Url of the dislike icon to use	Text, Optional

Title	Description	Type
Total Cards	The total number of cards in the deck (total_cards).	Number
Current Index	Which card is being shown at the top (current_index).	Number
Remaining Cards	How many cards are left after the current one (remaining_cards).	Number
Deck Empty	Whether the deck has no cards at all (deck_empty).	Boolean
Deck Completed	Whether all cards have been viewed (deck_completed).	Boolean
Swipe Direction	The last swipe direction: like, dislike, or none (swipe_direction).	String
Is Liked	Flag indicating the last swipe or action was a like (is_liked).	Boolean
Is Disliked	Flag indicating the last swipe or action was a dislike (is_disliked).	Boolean

Title	Description
Deck Completed	Fired when the user reaches the end of the deck (deck_completed).
Deck Empty	Fired if no cards exist to begin with (deck_empty).
Like Button Pressed	Fired when the like button is pressed (like_button_pressed).
Card Liked	Fired after a card is marked as liked (card_liked).
Dislike Button Pressed	Fired when the dislike button is pressed (dislike_button_pressed).
Card Disliked	Fired after a card is marked as disliked (card_disliked).
Card Swiped	Fired after any card swipe action (card_swiped).
Reload Button Pressed	Fired when the reload button is pressed (reload_button_pressed).
Cards Reloaded	Fired when the deck is reset (cards_reloaded).
Send to Back Button Pressed	Fired when the send-to-back button is pressed (send_to_back_button_pressed).
Card Sent to Back	Fired when a card is actually moved to the back (card_sent_to_back).

Tinder Swipe Cards Bubble Mobile

Demo to preview the settings

Introduction

Prerequisites

How to setup

Plugin Element Properties - Swiping Deck

Fields

Exposed states

Elements events

Changelogs