Outer ScrollView

[mayshin10]

Hi :) I am trying to put the horizontal Pager in a vertical ScrollView. The problem is that the vertical scroll is not detected in the area of the pager. I want to scroll down even if I touch the area of the pager.

export default function App() {
  return (
    <ScrollView>
      <View>
        <Text style={styles.text}>
          Want to Scroll
        </Text>
      </View>
      <View style={styles.flex}>
        <InfinitePager
          PageComponent={Page}
          style={styles.flex}
          pageWrapperStyle={styles.flex}
        />
      </View>
    </ScrollView>
  );
}

Here is my code that I use to test. Please tell me if there is a solution.

[koolll]

I having issue also did u have solution?

[computerjazz]

Just added gestureRef to the infinite pager ref so you can set simultaneousHandlers on your outer scrollview. Note that the outer scrollview must be a react-native-gesture-handler ScrollView

import { Text, StyleSheet, View } from 'react-native'
import InfinitePager, { InfinitePagerImperativeApi } from 'react-native-infinite-pager'
import { GestureHandlerRootView, GestureType, ScrollView } from 'react-native-gesture-handler'
import { useRef, useState } from 'react'

function App() {
  const [simultaneousHandlers, setSimultaneousHandlers] = useState<React.MutableRefObject<GestureType>[]>([])

  const r1 = useRef<InfinitePagerImperativeApi>(null)
  const r2 = useRef<InfinitePagerImperativeApi>(null)
  const r3 = useRef<InfinitePagerImperativeApi>(null)

  const onLayout = () => {
    const handlerRefs = [r1, r2, r3]
      .map((r) => r.current?.gestureRef)
      .filter((r): r is React.MutableRefObject<GestureType> => !!r)
    setSimultaneousHandlers(handlerRefs)
  }

  return (
    <ScrollView onLayout={onLayout} simultaneousHandlers={simultaneousHandlers}>
      <View style={styles.flex}>
        <View style={{ backgroundColor: 'seashell', height: 300 }} />
        <InfinitePager ref={r1} PageComponent={Page} style={styles.flex} pageWrapperStyle={styles.flex} />
        <InfinitePager ref={r2} PageComponent={Page} style={styles.flex} pageWrapperStyle={styles.flex} />
        <InfinitePager ref={r3} PageComponent={Page} style={styles.flex} pageWrapperStyle={styles.flex} />
        <View style={{ backgroundColor: 'seashell', height: 300 }} />
      </View>
    </ScrollView>
  )
}

function Page({ index }: { index: number }) {
  return (
    <View style={{ height: 150, backgroundColor: getColor(index) }}>
      <Text>{index}</Text>
    </View>
  )
}

function getColor(i: number, numItems = 10) {
  const multiplier = 255 / (numItems - 1)
  const colorVal = Math.abs(i) * multiplier
  return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
})

export default () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <App />
    </GestureHandlerRootView>
  )
}