React-native-snap-carousel: RTL support

Created on 16 Oct 2019  路  4Comments  路  Source: meliorence/react-native-snap-carousel

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

Question

Thanks for your great library and documentation. I'm using your library but I want to have the autoPlay to slide from right to left. Is there any props to handle this or is it possible for you to make it happen.
I managed to do it by editing snapToNext method, but I prefer to use your library using npm so I need it to be added as a prop.

Thanks in advance

Most helpful comment

Use useScrollView and firstItem like this:

          <Carousel
            data={this.state.data}
            useScrollView={I18nManager.isRTL? true: false}
            firstItem={I18nManager.isRTL? this.state.data.length-1: 0}
          />

All 4 comments

Did anyone find a workaround for this issue?

After reading the following:
https://github.com/archriss/react-native-snap-carousel/blob/master/doc/KNOWN_ISSUES.md#rtl-support-experimental

I found a workaround by reversing order of data array calling .reverse() from data array that was passed to data prop of Carousel:

<Carousel ref={(c) => { this._carousel = c}} data={I18nManager.isRTL? cities.reverse() : cities} renderItem={this.renderCarouselCity} sliderWidth={Dimensions.get("window").width * 0.9} itemWidth={Dimensions.get("window").width * 0.7} onSnapToItem={this.onSnapCarousel} />

Use useScrollView and firstItem like this:

          <Carousel
            data={this.state.data}
            useScrollView={I18nManager.isRTL? true: false}
            firstItem={I18nManager.isRTL? this.state.data.length-1: 0}
          />

Before attaching list make list mutation reverse. // i found difficulties while reversion with array.reverse()

const imgList = I18nManager.isRTL ? imageList.slice().reverse() : imageList;
return (
layout={"default"}
data={imgList}
...

This works for me

Was this page helpful?
0 / 5 - 0 ratings

Related issues

marcmo picture marcmo  路  5Comments

littlehome-eugene picture littlehome-eugene  路  3Comments

krisidmisso picture krisidmisso  路  4Comments

Murena7 picture Murena7  路  3Comments

AndrePech picture AndrePech  路  4Comments