meliorence / meliorence/react-native-snap-carousel
This causes issues when switching to RTL in Android
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?
Question
Have you followed the required steps before opening a bug report?
- I have read the guidelines regarding bug report.
- I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
- I have searched for existing issues and made sure that the problem hasn't already been reported.
- I am using the latest plugin version.
- I am following the issue template closely in order to produce a useful bug report.
Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?
Specific to android
Is the bug reproductible in a production environment (not a debug one)?
On both environment
Environment
Environment:
React: 18.2.0
React native: 0.72.6
react-native-snap-carousel: 3.9.1
Target Platform:
Android 13
Expected Behavior
It must be rendered in RTL layout without any error
Actual Behavior
It says "com.facebook.react.views.scroll.ReactScrollView cannot be cast to com.facebook.react.views.scroll.ReactHorizontalScrollView "
Reproducible Demo
I am using react-native-snap-carousel and it was working fine on both Android and iOS in LTR layout but when I switch to RTL layout it causes exception in Android as "com.facebook.react.views.scroll.ReactScrollView cannot be cast to com.facebook.react.views.scroll.ReactHorizontalScrollView "
<View>
<Carousel
ref={(c) => { this._carousel = c; }}
data={data}
sliderWidth={slideWidth}
itemWidth={itemWidth}
layout={"default"}
loop={false}
containerCustomStyle={styles.slider}
contentContainerCustomStyle={styles.sliderContentContainer}
onSnapToItem={(index) => setActiveSlide(index)}
firstItem = {I18nManager.isRTL ? data.length-1 : 0}
renderItem={({ item }) => {
return (
<TouchableOpacity key={item.id} disabled={true} onPress={() => {}}>
<View style={styles.itemContainer}>
</View>
</TouchableOpacity>
);
}
}
/>
<Pagination
dotsLength={data.length}
activeDotIndex={activeSlide}
containerStyle={styles.paginationContainer}
dotColor={AppColors.activeDot}
dotStyle={styles.paginationDot}
inactiveDotColor={AppColors.inactiveDot}
carouselRef={this._carousel}
tappableDots={!!this._carousel}
/>
</View>
// Stylesheet
itemContainer: {
padding: vh(25),
backgroundColor: AppColors.colorWhite,
borderRadius: vh(12),
},
paginationContainer: {
paddingVertical: 8,
marginStart: 25,
},
paginationDot: {
width: 10,
height: 10,
borderRadius: 8,
},
slider: {
marginTop: 15,
overflow: 'visible', // for custom animations
flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
flexGrow:1,
transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
},
sliderContentContainer: {
paddingVertical: 10, // for custom animation
marginStart: vw(-wp(18)),
flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
flexGrow:1,
transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
}
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 the provided Carousel and Pagination reproduction, using React Native 0.72.6 on Android 13 with RTL enabled, and review the linked README and doc/KNOWN_ISSUES.md for relevant platform limitations. Reproduce the ReactScrollView-to-ReactHorizontalScrollView exception, then verify that the same example renders in RTL without the cast error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 28/100