meliorence / meliorence/react-native-snap-carousel
RTL jumps to left-most item when data gets longer
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 or a feature request?
Bug
Have you read the guidelines regarding bug report?
yes
Have you read the documentation in its entirety?
yes
Have you made sure that your issue hasn't already been reported/solved?
yes
Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?
It exists in Android. I'm not able to test for iOS at the moment.
Is the bug reproductible in a production environment (not a debug one)?
Yes
Have you made sure that it wasn't a React Native bug?
Yes
Have you been able to reproduce the bug in the provided example?
Yes
Environment
Environment:
"react": "16.2.0",
"react-native": "0.52.x",
"react-native-snap-carousel": "3.7.0",
Target Platform:
Android (6.0)
iOS (10)
Steps to Reproduce
(Write your steps here:)
- Run example 1
- Turn on force RTL
I18nManager.forceRTL(true); - Add more data to ENTRIES1, so you have more than 10 entries
- reload
- Snap to the right end of the slide
Expected Behavior
At 4, the slider should have started from the beginning (right most slide)
At 5, Should be able to navigate normally to the last slide on the righ
Actual Behavior
At 4, the slider jumps to the left-most slide (end of the data)
At 5, as soon as you navigate to the right-end of the slider, it jumps back to left-end of the slider
Reproducible Demo
(Paste the link to an example project or paste the entirety of the relevant source code. Then provide instructions to reproduce the issue.)
Can see this happen in the current master example 1.

Entires that I used
export const ENTRIES1 = [
{
title: '1 Beautiful and dramatic Antelope Canyon',
subtitle: '1 Lorem ipsum dolor sit amet et nuncat mergitur',
illustration: 'https://i.imgur.com/UYiroysl.jpg'
},
{
title: '2 Earlier this morning, NYC',
subtitle: '2 Lorem ipsum dolor sit amet',
illustration: 'https://i.imgur.com/UPrs1EWl.jpg'
},
{
title: '3 White Pocket Sunset',
subtitle: '3 Lorem ipsum dolor sit amet et nuncat ',
illustration: 'https://i.imgur.com/MABUbpDl.jpg'
},
{
title: '4 Acrocorinth, Greece',
subtitle: '4 Lorem ipsum dolor sit amet et nuncat mergitur',
illustration: 'https://i.imgur.com/KZsmUi2l.jpg'
},
{
title: '5 The lone tree, majestic landscape of New Zealand',
subtitle: '5 Lorem ipsum dolor sit amet',
illustration: 'https://i.imgur.com/2nCt3Sbl.jpg'
},
{
title: '6 Middle Earth, Germany',
subtitle: '6 Lorem ipsum dolor sit amet',
illustration: 'https://i.imgur.com/lceHsT6l.jpg'
},
{
title: '7 Middle Earth, Germany',
subtitle: '7 Lorem ipsum dolor sit amet',
illustration: 'https://i.imgur.com/lceHsT6l.jpg'
},
{
title: '8 Middle Earth, Germany',
subtitle: '8 Lorem ipsum dolor sit amet',
illustration: 'https://i.imgur.com/lceHsT6l.jpg'
},
{
title: '9 Middle Earth, Germany',
subtitle: '9 Lorem ipsum dolor sit amet',
illustration: 'https://i.imgur.com/lceHsT6l.jpg'
},
{
title: '10 Middle Earth, Germany',
subtitle: '10 Lorem ipsum dolor sit amet',
illustration: 'https://i.imgur.com/lceHsT6l.jpg'
}
];
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with example 1 in the current master example and reproduce the issue with force RTL enabled and more than 10 ENTRIES1 items. Check the behavior after reload and when navigating to the right end of the slider. Done means RTL starts on the right-most slide and can reach the last slide without jumping to the left-most slide.
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