Rewrite with react-native-gesture-handler

farshed · farshed · commit a79eb29dd7bd · 2020-01-19T21:51:08.000+05:00
diff --git a/README.md b/README.md
@@ -8,6 +8,13 @@ Customizable and performant React Native scroll bar component for quickly scroll
 
 ## Installation
 
+react-native-quick-scroll uses react-native-gesture-handler to handle pan gestures. Follow these guides to install react-native-gesture-handler in your project.
+
+- [Expo](https://docs.expo.io/versions/latest/sdk/gesture-handler/#installation)
+- [Vanilla React Native](https://software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html#installation)
+
+Now, install react-native-quick scroll
+
 Install with npm
 
 ```bash
@@ -43,20 +50,20 @@ Inherits all valid [FlatList props](https://facebook.github.io/react-native/docs
 |-----|-----|-----|-----|-----|
 | `itemHeight` | `number` | | Height of an item in the FlatList | Yes |
 | `viewportHeight` | `number` | | Height of the FlatList area visible on screen at a given time | Yes |
-| `thumbHeight` | `number` | `80` | Height of the scroll bar thumb | No |
-| `touchAreaWidth` | `number` | `25` | Width of the touchable area around thumb | No |
+| `thumbHeight` | `number` | `60` | Height of the scroll bar thumb | No |
+| `touchAreaWidth` | `number` | `25` | Width of the touchable area that extends from the left edge of the thumb | No |
 | `flashDuration` | `number` | `40` | The time taken by the animation to move scroll bar on-screen after the scroll has begun (in ms) | No |
-| `flashOutDuration` | `number` | `1500` | The time after which scroll bar disappears (in ms) | No |
-| `rightOffset` | `number` | `15` | The distance of the scroll bar from the right edge of screen | No |
+| `flashOutDuration` | `number` | `2000` | The time after which scroll bar disappears (in ms) | No |
+| `rightOffset` | `number` | `12` | The distance of the scroll bar from the right edge of screen | No |
 | `thumbStyle` | `object` | | Style object for the scroll bar thumb (Don't pass `height` here, use the `thumbHeight` prop instead) | No |
 | `scrollbarStyle` | `object` | | Style object for the scroll bar | No |
 | `containerStyle` | `object` | | Style object for the parent container | No |
-| `hiddenPosition` | `number` | `ScreenWidth + 15` | The off-screen position where the scroll bar thumb moves to after `flashOutDuration` | No |
+| `hiddenPosition` | `number` | `ScreenWidth + 10` | The off-screen position where the scroll bar thumb moves to after `flashOutDuration` | No |
 
 
 ## Todo (PRs welcome!)
 - [x] Native driver support
-- [ ] Reimplement with Reanimated and Gesture Handler
+- [x] Reimplement with Gesture Handler
 - [ ] Add TypeScript typings
 - [ ] Support for horizontal FlatList
-- [ ] Support for FlatList ref
+- [x] Support for FlatList ref
diff --git a/lib/QuickScrollList.js b/lib/QuickScrollList.js
@@ -1,80 +1,72 @@
 import React from 'react';
-import { View, FlatList, Animated, Dimensions, PanResponder } from 'react-native';
+import { View, FlatList, Animated, Dimensions } from 'react-native';
+import { PanGestureHandler } from 'react-native-gesture-handler';
 
 const ScreenWidth = Dimensions.get('window').width;
 
-class FastScroll extends React.Component {
+class QuickScrollList extends React.Component {
 	constructor(props) {
 		super(props);
-		this.position = new Animated.ValueXY();
+		this.position = new Animated.Value(0);
+		this.scrollBar = new Animated.Value(ScreenWidth);
 		this.flatlistRef = React.createRef();
-		this.panResponder = PanResponder.create({
-			onStartShouldSetPanResponder: () => true,
-			onMoveShouldSetPanResponder: () => true,
-			onPanResponderMove: (event, gesture) => {
-				const { thumbHeight, viewportHeight } = this.props;
-				const positionY = this.position.__getValue().y;
-				const availHeight = viewportHeight - thumbHeight;
-				if (positionY >= 0 && positionY <= availHeight) {
-					this.onThumbDrag(event, gesture);
-				} else if (gesture.moveY > 0 && gesture.moveY < availHeight) {
-					this.onThumbDrag(event, gesture);
-				}
-			}
-		});
+		this.disableOnScrollEvent = false;
 	}
 
 	static defaultProps = {
-		ref: ref => {},
-		onScroll: () => {},
-		onScrollEndDrag: () => {},
 		flashDuration: 40,
-		flashOutDuration: 1500,
-		rightOffset: 15,
-		thumbHeight: 80,
-		hiddenPosition: ScreenWidth + 15,
+		flashOutDuration: 2000,
+		rightOffset: 12,
+		thumbHeight: 60,
+		hiddenPosition: ScreenWidth + 10,
 		touchAreaWidth: 25,
 		thumbStyle: {},
 		scrollbarStyle: {},
 		containerStyle: {}
 	};
 
-	state = { scrollBar: new Animated.Value(ScreenWidth) };
-
 	createRef = ref => {
 		this.flatlistRef = ref;
-		this.props.ref(ref);
+		this.props.ref && this.props.ref(ref);
 	};
 
-	onThumbDrag(event, gesture) {
+	onThumbDrag = event => {
 		const { data, itemHeight, thumbHeight, viewportHeight } = this.props;
-		// Animated.event([null, { dy: this.position.y }], { useNativeDriver: true })(event, gesture);
-		this.position.setValue({ x: 0, y: gesture.moveY });
-		const thumbOffset = this.position.__getValue().y;
-		const lastIndex = Math.floor((data.length * itemHeight - viewportHeight) / itemHeight) + 1;
-		const thumbPos = (thumbOffset / (viewportHeight - thumbHeight)).toFixed(3);
-		let index = Math.floor(lastIndex * thumbPos);
-		if (index > lastIndex) index = lastIndex;
-		if (index < 0) index = 0;
-		this.flatlistRef.scrollToIndex({
-			index,
-			viewPosition: 0,
-			animated: true
-		});
-	}
+		const availableHeight = viewportHeight - thumbHeight;
+		const positionY = this.position.__getValue();
+		const gestureY = event.nativeEvent.absoluteY;
+		if (gestureY >= 0 && gestureY <= availableHeight) {
+			this.disableOnScrollEvent = true;
+			const thumbPos = (positionY / (viewportHeight - thumbHeight)).toFixed(3);
+			let lastIndex = data.length - Math.floor(viewportHeight / itemHeight) + 1;
+			let index = Math.floor(lastIndex * thumbPos);
+			if (index > lastIndex) index = lastIndex;
+			if (index < 0) index = 0;
+			Animated.event([{ nativeEvent: { absoluteY: this.position } }])(event);
+			this.flatlistRef.scrollToIndex({
+				index,
+				viewPosition: 0,
+				animated: true
+			});
+		}
+	};
 
-	moveThumbOnScroll(e) {
+	moveThumbOnScroll = e => {
+		if (this.disableOnScrollEvent) {
+			this.disableOnScrollEvent = false;
+			return;
+		}
 		const { itemHeight, data, thumbHeight, viewportHeight } = this.props;
 		const listHeight = data.length * itemHeight;
 		const endPosition = listHeight - viewportHeight;
 		const offsetY = e.nativeEvent.contentOffset.y;
 		const diff = (viewportHeight - thumbHeight) / endPosition;
-		this.position.setValue({ x: 0, y: offsetY * diff });
-	}
+		this.position.setValue(offsetY * diff);
+	};
 
 	flashScrollBar = () => {
 		const { flashDuration, rightOffset } = this.props;
-		Animated.timing(this.state.scrollBar, {
+		Animated.timing(this.scrollBar, {
 			toValue: ScreenWidth - rightOffset,
 			duration: flashDuration,
 			useNativeDriver: true
@@ -84,18 +76,18 @@ class FastScroll extends React.Component {
 	onScroll = (event, gesture) => {
 		this.flashScrollBar();
 		this.moveThumbOnScroll(event);
-		this.props.onScroll(event, gesture);
+		this.props.onScroll && this.props.onScroll(event, gesture);
 	};
 
 	onScrollEnd = (event, gesture) => {
 		const { flashDuration, flashOutDuration } = this.props;
-		const flashOut = Animated.timing(this.state.scrollBar, {
+		const flashOut = Animated.timing(this.scrollBar, {
 			toValue: this.props.hiddenPosition,
 			duration: flashDuration,
 			useNativeDriver: true
 		});
 		setTimeout(() => flashOut.start(), flashOutDuration);
-		this.props.onScrollEndDrag(event, gesture);
+		this.props.onScrollEndDrag && this.props.onScrollEndDrag(event, gesture);
 	};
 
 	convertStyle(prop) {
@@ -109,25 +101,11 @@ class FastScroll extends React.Component {
 		return prop;
 	}
 
-	itemLayout = () => {
-		const { itemHeight, getItemLayout } = this.props;
-		return getItemLayout
-			? getItemLayout
-			: (data, index) => {
-					return { length: itemHeight, offset: itemHeight * index, index };
-			  };
-	};
-
 	render() {
 		//prettier-ignore
 		const { thumbHeight, thumbStyle, scrollbarStyle, containerStyle, viewportHeight, touchAreaWidth } = this.props;
-		const rightOffset = {
-			transform: [
-				{
-					translateX: this.state.scrollBar
-				}
-			]
-		};
+		const rightOffset = { transform: [{ translateX: this.scrollBar }] };
+		const thumbTransform = { transform: [{ translateY: this.position }] };
 		return (
 			<View style={[styles.mainWrapper, this.convertStyle(containerStyle)]}>
 				<FlatList
@@ -137,7 +115,6 @@ class FastScroll extends React.Component {
 					onScrollEndDrag={this.onScrollEnd}
 					showsVerticalScrollIndicator={false}
 					onScrollToIndexFailed={() => {}}
-					getItemLayout={this.itemLayout()}
 				/>
 				<Animated.View
 					style={[
@@ -146,24 +123,26 @@ class FastScroll extends React.Component {
 						{ height: viewportHeight },
 						this.convertStyle(scrollbarStyle)
 					]}>
-					<Animated.View
-						style={[
-							styles.touchArea,
-							this.position.getLayout(),
-							{ height: thumbHeight, width: touchAreaWidth }
-						]}
-						{...this.panResponder.panHandlers}>
+					<PanGestureHandler
+						onGestureEvent={this.onThumbDrag}
+						hitSlop={{ left: touchAreaWidth }}
+						maxPointers={1}>
 						<Animated.View
-							style={[styles.thumb, { height: thumbHeight }, this.convertStyle(thumbStyle)]}
+							style={[
+								styles.thumb,
+								thumbTransform,
+								{ height: thumbHeight },
+								this.convertStyle(thumbStyle)
+							]}
 						/>
-					</Animated.View>
+					</PanGestureHandler>
 				</Animated.View>
 			</View>
 		);
 	}
 }
 
-export default FastScroll;
+export default QuickScrollList;
 
 const styles = {
 	mainWrapper: {
@@ -175,14 +154,10 @@ const styles = {
 		backgroundColor: 'transparent',
 		alignItems: 'center'
 	},
-	touchArea: {
-		backgroundColor: 'transparent',
-		alignItems: 'center'
-	},
 	thumb: {
-		width: 6,
+		width: 4,
 		borderRadius: 4,
 		backgroundColor: '#4C4C4C',
 		elevation: 2
 	}
-};
+};
