Please note iOS is having performance issues with this plugin. We are working on a solution and waiting for support to use custom SDKs, hopefully available in a few weeks from now (6th of August 2025).
Read the docs at https://docs.nocodeventure.com/react-native-plugins/swipe-like-tiktok-bubble-mobile

Install the plugin

Go to the Plugins tab in your Bubble app and install the TikTok Swipe Feed plugin.

Add the element

Drag the TikTok Swipe Feed element onto your page or reusable element.

Set the element height

Make sure the element covers the full screen height. You can set the min height to 100% or use responsive settings to match the mobile viewport.

Prepare your data

You don’t need to use a repeating group. Instead, prepare your content using a Bubble search or API call. Each item should include at least:

id

type

url

username

caption

Generate JSON

Use :format as text in Bubble to build the JSON string from your data. (We will provide a separate guide for this.)

Set the plugin's JSON field

Paste your dynamic JSON expression into the plugin’s JSON field.

Use plugin events

The plugin exposes several events you can use in workflows:

When a video is played

When a video is paused

When a video ends

When an item becomes visible

When the end of the list is reached

Customize the UI

You can customize icons, colors, and text using the plugin's optional fields or inside your JSON config.

Editor link: https://bubble.io/page?id=ncv-react-swipe&tab=Design&name=app&type=page&elements=bTLFf

Demo link: https://ncv-react-swipe.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=app

Example Bubble :format as text

Expression:

{ "data": [ Search for Videos:format as text ] }


Inside :format as text, put this as the template:

{
 "id": "[This Video's unique id]",
 "type": "video",
 "url": "[This Video's file URL]",
 "username": "[This Video's uploader's username]",
 "caption": "[This Video's caption]",
 "likes": "[This Video's like count]",
 "comments": "[This Video's comment count]"
}


For delimiter, use

,