Skip to content

Instantly share code, notes, and snippets.

@kkemple
Last active February 18, 2018 09:10
Show Gist options
  • Save kkemple/e4566a7cafc08767713609221f04aa1c to your computer and use it in GitHub Desktop.
Save kkemple/e4566a7cafc08767713609221f04aa1c to your computer and use it in GitHub Desktop.
...
handleGestureTerminationRequest = (e: GestureEvent, s: GestureState) =>
this.props.shouldRelease(s);
handleGestureCapture = (e: GestureEvent, s: GestureState) =>
this.props.shouldCapture(s);
handleGestureMove = (e: GestureEvent, { dx }: GestureState) => {
const currentOffset: number =
this.state.currentIndex * this.props.itemWidth;
const resolvedOffset: number = currentOffset - dx;
this.list.scrollToOffset({
offset: resolvedOffset,
animated: false,
});
};
handleGestureRelease = (e: GestureEvent, { dx, vx }: GestureState) => {
const currentOffset: number =
this.state.currentIndex * this.props.itemWidth;
const resolvedOffset: number = currentOffset - dx;
const resolvedIndex: number = Math.round(
(resolvedOffset +
(dx > 0 ? -this.props.threshold : this.props.threshold)) /
this.props.itemWidth
);
const absoluteVelocity: number = Math.round(Math.abs(vx));
const velocityDifference: number =
absoluteVelocity < 1 ? 0 : absoluteVelocity - 1;
const newIndex: number =
dx > 0
? Math.max(resolvedIndex - velocityDifference, 0)
: Math.min(
resolvedIndex + velocityDifference,
this.props.data.length - 1
);
this.list.scrollToIndex({
index: newIndex,
animated: true,
viewOffset: this.props.contentOffset,
});
this.setState(
() => ({ currentIndex: newIndex }),
() => this.props.onIndexChange(newIndex)
);
};
...
<View
style={[{ width: screenWidth }, style]}
{...this.panResponder.panHandlers}
>
<FlatList
horizontal
contentContainerStyle={[
{ paddingHorizontal: contentOffset },
contentContainerStyle,
]}
data={data}
getItemLayout={this.getItemLayout}
keyExtractor={extractKey}
ref={this.getRef}
scrollEnabled={false}
showsHorizontalScrollIndicator={false}
style={[styles.flatList, flatListStyle]}
renderItem={({ item, index }) =>
renderItem({
item,
currentIndex,
itemIndex: index,
itemCount: dataLength,
})
}
/>
</View>
...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment