meliorence / meliorence/react-native-snap-carousel

Maintain the current index on rerendering items

Open
#813 2 comments 2 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

Bug/feature/question

Expo snack - https://snack.expo.io/@setjetters/mature-cashew

I have a map with markers and the carousel displays cards of the marker details (think AirBnB), so as you move the map additional markers as well as carousel cards get loaded in.

Is there any way when the carousel is rerendered from those new cards getting loaded in to maintain the currently active carousel item and not need to find the new index of the currently active item and snap to it? It'd be a much smoother user experience.

Notice in the snack if you load cards, slide over one or two, then load more it needs to rescroll to what should be the same currently active card. It'd be nice if it could maintain that card and render the others around it.

(As well as I'm having a bug that I'm not able to repro in this snack that must be from the complexity of my screen, but it's all around maintaining the currently active card when new data is loaded)

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 by reproducing the behavior in the linked Expo Snack: load additional cards, move to another card, then load more items. Read the carousel's item and index handling around rerenders, and determine whether the active card can remain selected without manually finding its new index or snapping again. Done means the active card stays visible when new cards are loaded.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.