React-native-swiper: ScrollView inside Swiper not works

[1fabiopereira]

Which OS ?

Android

Version

Which versions are you using:

• react-native-swiper: ^1.6.0-nightly.5
• react-native: 0.61.5

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?

[jmy10241024]

same issue

[myhamdaoui]

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'

[Prashantrao331]

@myhamdaoui Swipe is working but after 2-3 attempts it scrolls to next slide, any luck to resolve this

[myhamdaoui]

@Prashantrao331 did you tried my solution ? because it should work perfectly

[Prashantrao331]

@myhamdaoui Yes its working but have to swipe twice to move to next slide

[1fabiopereira]

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

```js
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;
  }
}

}

```jsx
<Swiper
  ref={swiper}
  index={index}
  scrollEnabled={false}
  loop={false}
  dotStyle={Styles.Dot}
  activeDotStyle={Styles.ActiveDot}
  dotColor={Colors.Mercury}
  activeDotColor={Colors.Mercury}>
  {Slides(items)}
 </Swiper>

[tudiantuan]

@myhamdaoui it is good

[RicardoBrito1938]

@myhamdaoui unfortunately this solution did not work, did you try anything else?

[RicardoBrito1938]

GestureRecognizer

Fabio, what is this GestureRecognizer component?

[1fabiopereira]

@RicardoBrito1938 is this react-native-swipe-gestures

[mrtkprc]

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>

[jamesmcn1]

Yup nestedScrollEnabled enabled worked for me thanks :)