Unexpected dragged item position

[AlekseiIvshin]

Hi, I faced following problem: when I start dragging item, it is presented about 100 px lower (only in my case).

I found out that problem is in 'layout' param provided by Row component in method 'handleLongPress', precisely speaking field 'pageY'. When I set layout.pageY = frameY, it start working as I expect.

I hope that information will be useful for you.

[nihgwu]

Can you post a workable demo?

[eduardojunio]

I'm having the same issue :(

[cinder92]

same issue here

[nihgwu]

For those who are facing this issue, can anyone provide a simple demo so I can start to fix it

[kylanhurt]

@nihgwu How would you like the demo? I've never done a demo for RN before. Do you want a GIF, or expo or react-native-web-player?

I'm having this issue and the top of the row being cut off by about 14px or so.

[kylanhurt]

@nihgwu For me the offset issue (topic of this thread / issue) appears to start when upgrading from 0.2.2 to 0.2.3. For reference I am testing on an iPhone 5s (A1533) on iOS v10.3.2, if that helps at all.

[chetstone]

@kylanhurt By demo I believe he would like an example app. If possible, by modifying the Sortable example app included in this repo to show the problem.

Thanks for the info on your version/platform Also, a few issues were addressed in 0.2.4, perhaps you could try upgrading to the latest (0.2.5) if you haven't already

[kylanhurt]

@chetstone Thank you for the quick response. Unfortunately both 0.2.4 and 0.2.5 have both the offset and the cropped top of the row issues, so by using 0.2.2 I reduce the bugs down to only the latter which is hardly noticeable.

I think I am going to try to reproduce the error with your guys' example. I'm not an expert iOS or Android developer but maybe I can still be of some help.

[kylanhurt]

Literally replaced my entrance point index.js with your example code and there dragged item is offset (south / below of where it should be) by approximately one item's height.

For example, in the photo below my finger is actually pressed down on the 'a' item and had barely moved at all (if at all):

On a sidenote by using your example I was able to fix the top / header cropping issue which means that is likely being caused by something in my own code. Hope this helps.

[kylanhurt]

For the record, if anyone else here was having issues with the top part of the item getting cut off (0.2.2), it appears that having a justifyContent: 'space-between' or a set height may cause the issue (at least in my experience). Sorry if this is off-topic.

[chetstone]

If I understand correctly, you copied Sortable/example.js into your own code (not the older example.js at the top level of this repo).

Did you try actually building and running the Sortable example app? It's easy to do. I just tried this on my iPhone 6+ (10.3.3) and it works fine. When I press the 'a' item it dims and doesn't move till you drag it at least 1/3 of the way across the item above or below. From your photo it looks like though you're pressing the 'a', the 'is' is being dimmed. That's not right. Somebody's confused about which item is being activated.

[kylanhurt]

@chetstone Apologies, I definitely did the basic (top-level) example. Not sortable. If I get around to testing that out I will let you know but for the time being I have fixed any issues I've been having with 0.2.2 and work demands that I focus on other tasks. Again, thank you for being very responsive.

[chetstone]

@kylanhurt Thanks for following up

I definitely did the basic (top-level) example. Not sortable.

Actually that shouldn't matter -- there is very little difference between them. The point being that there is something in your app that is not there in the simple Sortable example app that is affecting how this works.

[nihgwu]

I mean providing a minimal demo to reproduce the issue with the latest version(v0.2.5), then I can investigate what's wrong as I don't have this issue in my apps

[dgurns]

Looks like if any non-sortable-listview elements on the screen don't have an explicit height, the sortable-listview has trouble calculating where to measure from.

I ended up modifying the component like this, thanks to @AlekseiIvshin suggestion. It's hacky, but it works in my particular scenario.

In index.js...

handleLongPress = e => {
    this.refs.view.measure(
      (frameX, frameY, frameWidth, frameHeight, pageX, pageY) => {
        const layout = { frameHeight, pageY };

        // Added custom offset
        if (Platform.OS === 'ios') {
          layout.pageY = frameY + 58;
        } else if (Platform.OS === 'android') {
          layout.pageY -= 58;
        }

        this.props.onRowActive({
          layout,
          touch: e.nativeEvent,
          rowData: this.props.rowData,
        })
      }
    )
  }

And for anyone having the issue where the active "draggable" row gets height cut off, I fixed that by specifying a set height for the row component as well as a set height in the listview's sortRowStyle prop.

[computerjazz]

I can also confirm rolling back to 0.2.2 fixed this issue for me. I do get a warning about isMounted being deprecated though.

Looks like if any non-sortable-listview elements on the screen don't have an explicit height, the sortable-listview has trouble calculating where to measure from.

I'm using a react-navigation stack navigator and tab navigator -- possible the header/tab bar is not an explicit height.

0.2.5

0.2.2

[yudapc]

@computerjazz Yeah, I Agree with you. After downgrade to version 0.2.2 it's works.

[computerjazz]

@yudapc are you also using react-navigation by any chance? (or do you have any headers/footers that might be causing issues?)

[dgurns]

I was getting this error and was using react-navigation, yes.

[eduardojunio]

Confirmed, only happens when using React Navigation headers.

[nihgwu]

Thanks for reporting, I can confirm this, will figure out how it fix it

[eduardojunio]

@nihgwu on iOS it's a charm, but doesn't work on Android :'(

[nihgwu]

@eduardojunio right, I'm a bit busy right now, will fix it by the weekend, stay tuned

[eduardojunio]

@nihgwu thank you! <3

[nihgwu]

@eduardojunio @computerjazz I just landed the fix for Android, can you test it, I'd love to hear your feedbacks

[eduardojunio]

@nihgwu now everything is working as expected on both Android and iOS! Thank you very much for such quick solution!

[nihgwu]

@eduardojunio thanks, actually it's me who broke it 😂

[thangho]

It still error when i move item over screen. Only apear on Ios (not android) when use with TabNavigator in react-navigation. I move item 9 to top of screen. Suspended app.(not crash app)

"react": "16.0.0-alpha.12", "react-native": "0.48.4", "react-native-sortable-listview": "^0.2.6",