leecade / leecade/react-native-swiper

OnLayout in IOS may return a frame which width = 0 and height = 0 cases Swiper can't scroll to the correct page

Open
#1,300 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
10.5k
Forks
2.3k
PR merge metrics
No merged PRs in 30d

Description

Which OS ?

IOS

Version

Which versions are you using:

  • react-native-swiper v1.6.0
  • react-native v0.63.4
Expected behaviour

I have a prop named "redirectToTabIdx" to give Swiper an initial index, when redirectToTabIdx > 0,it will scrollTo the corresponding page.

Actual behaviour

SomeTimes on IOS, it can not scrollTo the correct page,it will stay in first page,looks good on Android.

How to reproduce it>

To help us, please fork this component, modify one example in examples folder to reproduce your issue and include link here.

Steps to reproduce
  1. Set index over 1 on IOS
    2.kill the app and reopen it.
    3.It maybe reproduce.
How to fix it.

I deep in the code and found the onLayout method:
image
This method trust event.nativeEvent.layout will return the real height and width, but actually Ios maybe return an empty frame.

And I debug in RCTUIManage and found that sometimes it will callback an empty frame to RN.

image

In most time initial index is equal to 0 so it's not a problem.

I temporary add some code to the onLayout method to avoid this situation, it looks good and working.
image

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the Swiper component's onLayout method and inspect the related example in the examples folder. Reproduce an initial index above 1 on iOS and investigate the empty layout frame described in the issue; done means Swiper scrolls to the requested page reliably.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.