Open 1fabiopereira opened 4 years ago
same issue
This bug is related to nested Horizontal ScrollView in React Native, since React Native Swiper is using ScrollView and you are nesting another ScrollView, there is no fix until now, even if you use the new prop nestedScrollEnabled
it will not work, there is an easy workaround, just useimport { ScrollView } from 'react-native-gesture-handler'
instead of import { ScrollView } from 'react-native'
@myhamdaoui Swipe is working but after 2-3 attempts it scrolls to next slide, any luck to resolve this
@Prashantrao331 did you tried my solution ? because it should work perfectly
@myhamdaoui Yes its working but have to swipe twice to move to next slide
I fixed this using a workaround, I disabled the scroll scrollEnabled={false}
and added a wrapper on slide, I created a function that detect gestures over wrapper and I change programmatically the slide index to left or right.
const [index, setIndex] = useState(() => 0);
function Slides(data): Node {
return data.map(slide => {
return (
<GestureRecognizer onSwipe={(e) => OnSwipe(e, length)}>
<Slide data={slide}/>
</GestureRecognizer>
)
})
}
function OnSwipe(gestureName, size): void {
const {SWIPE_LEFT, SWIPE_RIGHT} = swipeDirections;
switch (gestureName) {
case SWIPE_LEFT: {
if (index < size && swiper) {
swiper.current.scrollBy(1, true);
const position = index + 1;
setIndex(position);
}
break;
}
case SWIPE_RIGHT: {
if (index > 0 && swiper) {
swiper.current.scrollBy(-1, true);
const position = index - 1;
setIndex(position);
}
break;
}
}
}
<Swiper
ref={swiper}
index={index}
scrollEnabled={false}
loop={false}
dotStyle={Styles.Dot}
activeDotStyle={Styles.ActiveDot}
dotColor={Colors.Mercury}
activeDotColor={Colors.Mercury}>
{Slides(items)}
</Swiper>
@myhamdaoui it is good
@myhamdaoui unfortunately this solution did not work, did you try anything else?
GestureRecognizer
Fabio, what is this GestureRecognizer component?
@RicardoBrito1938 is this react-native-swipe-gestures
I tried to use scrollview vertically inside swiper but it didn't work.
Property nestedScrollEnabled
of ScrollView solved my issue.
<Swiper showsButtons={false}>
<ScrollView nestedScrollEnabled={true}>
<Text>Meat</Text>
</ScrollView>
</Swiper>
Yup nestedScrollEnabled enabled worked for me thanks :)
@myhamdaoui thanks! It worked :)
Which OS ?
Android
Version
Which versions are you using:
Expected behaviour
Have horizontal scroll on ScrollView inside slide on Android and IOS
Actual behaviour
Horizontal scroll on ScrollView inside slide works only on IOS
I need put a chart inside of the slide and this chart have a horizontal scroll, this work perfectly on IOS, but on Android isn't works. The chart are inside a ScrollView, but Scrollview not work 'cause swipe event is consume by Swiper, any ideia how can fix that?