RTL Limitation
randomBrainstormer opened this issue · comments
Currently, when a RTL language is active the slider will detect swipes to the right as "go to next slide" when it should be "go to previous" as the RTL layout changes the swipe direction. Is an issue for the cases where the controls are hidden and depend only on user swiping for changing slides.
<Swiper
controlsProps={{
prevTitle='go to next slide',
nextTitle='go to previous',
}}
/>TY for replying @oxyii, I may have described the issue in a vague way. Indeed you can change the text using the prevTitle and nextTitle props, however, I meant when controls are hidden and you can only slide with swipes, but when sliding the direction is wrong. More specifically, this is the behaviour:
I have three slides total (slide 0, 1, and 2) and currently viewing slide #0. The RTL layout is active in the phone. If I swipe from left to right to go to the first slide, it will not work because the layout understand there should be nothing to the left, instead of going slide #1 it just centers the current slide (this happens when you're in slide # 0). If I try instead to swipe from right to left, it takes me to a blank slide, as it understands slide 1 is to the right and should shift the layout to that direction, but instead content is in the opposite site.
Basically, the issue is that when RTL layout is active and user swipes it should do the layout shifting to the opposite side.
Hmm... I understand what you want. I think this is good idea to add new bool prop. @reactrondev. Something like rtl. So if rtl then make a reverse for this.children here:
react-native-web-swiper/src/Swiper.js
Line 260 in ebe7fc5
@randomBrainstormer Do you need a temporary workaround for now? Or you can solve your issue in your current project?
@oxyii I added a patch locally for my project for now. Doing a reverse on the children's array made the last slide appear as first, but the problem when swiping remained. What solved my issue was updating _fixState so the animatedValue would shift to the opposite side when RTL is active:
this._animatedValueX = vertical ? 0 : width * activeIndex * this.slidingMotion;
this._animatedValueY = vertical ? height * activeIndex * this.slidingMotion : 0;
Then updating the checks and index in _changeIndex
const cantSlideLeft = this.slidingMotion > 0 ? activeIndex + 1 >= this.count && delta < 0 : activeIndex <= 0 && delta < 0
const cantSlideRight = this.slidingMotion > 0 ? activeIndex <= 0 && delta > 0 : activeIndex + 1 >= this.count && delta > 0
if (cantSlideLeft) {
skipChanges = !loop;
calcDelta = this.count + delta * this.slidingMotion;
} else if (cantSlideRight) {
skipChanges = !loop;
calcDelta = -1 * activeIndex + delta - 1;
}
[..... lib code.......]
let index = this.slidingMotion > 0 ? activeIndex - calcDelta : activeIndex + calcDelta;
this.setState({ activeIndex: index });
this.slidingMotion was a check on my isRTL prop.
this.slidingMotion = props.isRTL ? 1 : -1;
@oxyii Notice the snack still in LTR mode, in order to emulate RTL import I18nManager from react-native and call I18nManager.forceRTL(true); somewhere, or updating the emulator/phone language to an RTL language will also trigger the bug. When forceRTL is set, the Issue is still present also when using controls to go to next and prev slides.
@randomBrainstormer please try to use another one dep instead of npm react-native-web-swiper
npm install github:reactrondev/react-native-web-swiper#RTL-support
@randomBrainstormer Please let me know if it works... or not )))
@oxyii I wasn't able to test this fix, I'm getting an error when compiling saying The package itself specifies a main module that could not be resolved, not sure why this is happening.
@randomBrainstormer Ohh... sure. Because of build folder is not exists in repo.
Please try npm install react-native-web-swiper@next
@randomBrainstormer Great! Can we publish it as latest (stable)?