meliorence / meliorence/react-native-snap-carousel

[Android] Issue with last item in the vertical carousel related to the height occupation of Status Bar

Open
#774 3 comments 1 reaction 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

Is this a bug report, a feature request, or a question?

This is a bug report

Have you followed the required steps before opening a bug report?

(Check the step you've followed - put an x character between the square brackets ([]).)

Have you made sure that it wasn't a React Native bug?

I'm not quite sure but I know it's something related to the Status Bar

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

I'm developing an Android app only so currently I can only say that this issue belongs to Android

Is the bug reproductible in a production environment (not a debug one)?

Yes

Environment

Environment:
React: 16.13.1
React native: 0.63.2
react-native-snap-carousel: 3.9.1

Target Platform:
Android

Expected Behavior

I expect that the carousel works fine in the vertical mode

Actual Behavior

The snap function of the first and second item work fine, for the last item, if you try to scroll it up, somehow there is an extra gap (equals to the status bar height) on top and the last item is scrolled up a bit (leads to the case when content is hidden by the status bar). I added a snack below to describe it more clear.

Reproducible Demo

Snack: https://snack.expo.io/@nathan.tqn/d64873
Gif:

Steps to Reproduce
  1. Create an simple vertical carousel with 3 items (each item has a small text on it)
  2. Enable status bar (occupy an extra space on top of the screen) (Add in App.tsx file)
  3. Scroll through the carousel
  4. The snap function of the first and second item work fine, for the last item, if you try to scroll it up, somehow there is an extra gap (equals to the status bar height) on top and the last item is scrolled up a bit (leads to the case when content is hidden by the status bar)
  5. If I hide the status bar completely (Add in App.tsx file), the snap function works great for all of the items

Contributor guide

Open the contributing guide

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 with the linked Snack and the App.tsx reproduction: create a three-item vertical carousel, enable the StatusBar, and compare scrolling with the status bar hidden. Trace the vertical carousel's snapping behavior under these two conditions. Done means the last item snaps without an extra status-bar-sized gap or content hidden behind the status bar.

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
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.