react-native-pager icon indicating copy to clipboard operation
react-native-pager copied to clipboard

Issues on low-end devices

Open hirbod opened this issue 4 years ago • 7 comments

Hi,

testing on low-end devices (iPhone 5, old Android and "not so old" android), I can see some heavy drops in FPS, which is fine so far. The real problem is that when I swipe fast, it happens to jump back again.

Lets say I am on slide 10 and swipe really fast to 17, it jumps back to 16 and back to 17. It looks like the activeIndex value gets the update "to late" while it was already transitioned to another screen and therefore, it jumps back and forth. If I keep swiping at a normal pace, it doesn't happen.

You have any idea how to optimize this or to prevent this? Changing SpringConfig? Somehow blocking swipe until some condition?

hirbod avatar Dec 05 '19 21:12 hirbod

i've experienced this as well, especially on debug mode with android. i tend to run it in production mode on android to test out fast swiping, although even then its not perfect. i suspect this issue is a bug in my implementation, i've wondered about a way around using setValue to trigger spring updates:

  useEffect(() => {
    if (activeIndex >= minIndex && activeIndex <= maxIndex) {
      nextIndex.setValue(activeIndex);
    }
  }, [activeIndex, minIndex, maxIndex]);

but haven't come up with anything just yet

ajsmth avatar Dec 08 '19 15:12 ajsmth

Yes, I also tried in prod mode (only Emulator so far) and its happening on pretty decent devices. iPhone 5 also, but I decided to release for 5s+ and that’s working Ok.

The android issues giving me some headaches currently since I switched my whole implementation to your library and Android just performs (generally compared to iOS) very bad :/

Is your code snippet actually implemented or a suggestion?

hirbod avatar Dec 08 '19 15:12 hirbod

sorry to hear that - i haven't worked much with android.

the snippet is the current implementation that i would like to fix one day

ajsmth avatar Dec 08 '19 15:12 ajsmth

if you push a repro of your code i can take a look at the performance issues for android, no promises though

ajsmth avatar Dec 08 '19 15:12 ajsmth

I can't unfortunately. But it's actually just like I said: pretty heavy FPS drops on "low" phones (which are ok for me), but this jumping around is pretty annoying though. A solution for this would be nice. I'm still tinkering what kind of workaround I'm going to implement. Maybe - at least for android - I should some kind of throttle / block the swipe for 500ms between every swipe or so. It even happens when I set the adjacentChildOffset to 10 or 15.

hirbod avatar Dec 08 '19 22:12 hirbod

i haven't tested this, but the panhandler accepts a prop to be disabled so updating that with a timer might help in your case.

i've noticed this issue occasionally as well on android after spending some time playing around with it, thanks for pointing it out

ajsmth avatar Dec 11 '19 14:12 ajsmth

Disabling is a pretty ugly workaround though. I tried it with the panProps enabled and was able to block it for a second but it just felt wrong while iOS feels awesome.

I reduced the amount of issues since I’ve heavily optimized my underlaying component (which reacted on swipes and cause re-renderings). But it still happens as soon as Android drops under 30 fps. On iPhone 5 it was unfixable. The most weird part for me is, that the transition is actually over and it still jumps back and forth..

hirbod avatar Dec 11 '19 15:12 hirbod