This causes issues when switching to RTL in Android

[bhupenjoshi]

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

Question

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

• [x] I have read the guidelines regarding bug report.
• [x] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
• [x] I have searched for existing issues and made sure that the problem hasn't already been reported.
• [x] I am using the latest plugin version.
• [x] 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 }],
    }