[ React Native ] Flatlist / scrollview pagingEnabled 시, offset option

Flatlist 나 scrollview에서 pagingEnabled 를 하면, snap 하는 느낌은 들지만, scroll의 offset 이 맞지않는 경우가 많다..

 

이를 위해

 

const offset = heightScale(600) + 2 * cardVerticalMargin;

const snapToOffsets = useMemo(

() =>

Array.from(Array(DUMMY.length)).map(

(_, index) => index * offset - headerHeight,

),

[DUMMY],

);

 

이런식으로 사용하면,

 

어느 offset들에게 걸릴지가 snapToOffesets props 에 의해 flatlist / scrollview 에 전달된다.

 

pagingEnabled

decelerationRate="fast"

scrollEventThrottle={16}

snapToOffsets={snapToOffsets}

주로 같이쓰는 옵션들이다.