Native/mobile repeating group item swipe/slide capability

Idea
1

When native is pushed out, it would be great to enable each row of a single column repeating group the ability to swipe/slide which would result in either a workflow trigger and/or revealing buttons beneath

For swiping - I am trying to replicate the Google Inbox app functionality e.g. marking email as done/snooze
For sliding - I am trying to replicate the native iOS mailbox where sliding reveals a mark as read/unread button for that specific item

3 Likes
2

Have you found in workarounds for this? I’m attempting the same just on mobile page and so far all I can think of is an invisible group that triggers the next item in the list and some slide in and out animations.

3

I haven’t found a work-around for this, but haven’t really tried. Just waiting and hoping this will come out when Bubble pushes out Native.

I think your idea would work, but it would probably just be on click, and I don’t think you could make the cover move in sync with your finger when you slide unfortunately. The reason I’m not trying it now is because I think it would actually take away from the user experience because it would feel kind of glitchy. For mine right now the buttons I want to hide are just always visible on the side of the RG

4

Hello,

Have either of you found a solution for this, yet? My intention is to slide a repeating group cell left to open up a delete box for a true native experience.

Any input for how this might work would be great!

5

One idea that could work in Bubble:

Place a transparent HTML Block at the topmost z-index of a group you wish to swipe on. Inside this HTML block is a 100% height 100% width div that contains an ID or class. This ID or class is then referenced in a custom Bubble plugin that has JavaScript functions which connect a swipe on the div to a Bubble workflow.

I’ll play around and see where I get, I am needing this functionality too!

6

Maybe you could achive it with tinder plugin, let me see how it workson myapp and then ill share the results.

Nop itis not a good solution.

7

Anyone want to make a plugin? :slight_smile:

1 Like
8

Although React Native is usually written in JavaScript, wouldn’t it still have React Native dependencies?

1 Like
9

@Scott - good point, what about serving them via CDN in the page header?

<html>
  <head>
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel" src="main.js"></script>
  </body>
</html>

We really need react and react-dom:

<script src="https://fb.me/react-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>

They mention on their github page, it’s not suitable for production but will work:

Given some more time, I’ll have to see if I can’t get a react demo up and running.

1 Like
10

I can’t really comment in this area as I’m more of a native app developer.

11

Hey guys, stay away from the React Native, it will do no good here. There is also a difference between React and React Native, the latter is used to render native elements in a native packaged app. Anyways, they are both not relevant here.

I have good experience with Hammer.js it`s super lightweight and supports:

  • Swipe
  • Rotate
  • Pinch
  • Press (long hold)
  • Tap
  • Pan

http://hammerjs.github.io/touch-action/

if you`re not worried about bloat you can also use the jquery plugin:
http://hammerjs.github.io/jquery-plugin/

You would need to listen to the most top level of the element that you want to detect a swipe on.
$(PutYourElementIDHere).hammer(options).bind(“pan”, myPanHandler);

For finding out how you can set unique ID`s in repeating groups or elements see my post in this thread:

Here is a well documented demo:
http://codepen.io/jtangelder/pen/lgELw

If you really want to build a custom plugin try with one of these:


1 Like
12

What about something like this:
http://stereobit.github.io/dragend/

13

Thanks for the input @gurun, this is very helpful. Mobiscroll Listview looks very promising. If you have any examples you’d be able to share demonstrating an application of hammer.js in a Bubble app, I’m sure the community would greatly appreciate it.

I’ll take a closer look at integrating something like Mobiscroll or swiped.js, or see about getting a tutorial up depending on time.

1 Like
14

What was the outcome here

15

You can get some pretty cool results with bubbles standard elements and a few sneaky bits of script.

2 Likes
16

I built this using standard bubble elements and their free draggable plugin

2 Likes