meliorence / meliorence/react-native-snap-carousel

This causes issues when switching to RTL in Android

Open
#1,007 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

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

Question

Have you followed the required steps before opening a 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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.