Skip to content

Commit 1c0da9a

Browse files
evrimfeyyazevrimfeyyaz
authored
Add simultaneous handlers support to make the component usable within a ScrollView (#273)
* Set react-native-gesture-handler dependency to ^1.10.0 * Ignore JetBrains IDE settings * Add simultaneousHandlers and onGestureHandlerRef props * Remove onGestureHandlerRef as it turned out it is not necessary * Add simultaneousHandler prop to README
1 parent 0567117 commit 1c0da9a

File tree

5 files changed

+76
-41
lines changed

5 files changed

+76
-41
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
node_modules/**/*
22
/lib
33
coverage/
4+
.idea

‎README.md‎

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -31,39 +31,41 @@ yarn add react-native-draggable-flatlist
3131

3232
All props are spread onto underlying [FlatList](https://facebook.github.io/react-native/docs/flatlist)
3333

34-
| Name | Type | Description |
35-
| :------------------------- | :---------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
36-
| `data` | `T[]` | Items to be rendered. |
37-
| `horizontal` | `boolean` | Orientation of list. |
38-
| `renderItem` | `(params: { item: T, index: number, drag: () => void, isActive: boolean}) => JSX.Element` | Call `drag` when the row should become active (i.e. in an `onLongPress` or `onPressIn`). |
39-
| `renderPlaceholder` | `(params: { item: T, index: number }) => React.ReactNode` | Component to be rendered underneath the hovering component |
40-
| `keyExtractor` | `(item: T, index: number) => string` | Unique key for each item |
41-
| `onDragBegin` | `(index: number) => void` | Called when row becomes active. |
42-
| `onRelease` | `(index: number) => void` | Called when active row touch ends. |
43-
| `onDragEnd` | `(params: { data: T[], from: number, to: number }) => void` | Called after animation has completed. Returns updated ordering of `data` |
44-
| `autoscrollThreshold` | `number` | Distance from edge of container where list begins to autoscroll when dragging. |
45-
| `autoscrollSpeed` | `number` | Determines how fast the list autoscrolls. |
46-
| `onRef` | `(ref: React.RefObject<DraggableFlatList<T>>) => void` | Returns underlying Animated FlatList ref. |
47-
| `animationConfig` | `Partial<Animated.SpringConfig>` | Configure list animations. See [reanimated spring config](https://github.com/software-mansion/react-native-reanimated/blob/master/react-native-reanimated.d.ts#L112-L120) |
48-
| `activationDistance` | `number` | Distance a finger must travel before the gesture handler activates. Useful when using a draggable list within a TabNavigator so that the list does not capture navigator gestures. |
49-
| `layoutInvalidationKey` | `string` | Changing this value forces a remeasure of all item layouts. Useful if item size/ordering updates after initial mount. |
50-
| `onScrollOffsetChange` | `(offset: number) => void` | Called with scroll offset. Stand-in for `onScroll`. |
51-
| `onPlaceholderIndexChange` | `(index: number) => void` | Called when the index of the placeholder changes |
52-
| `dragItemOverflow` | `boolean` | If true, dragged item follows finger beyond list boundary. |
53-
| `dragHitSlop` | `object: {top: number, left: number, bottom: number, right: number}` | Enables control over what part of the connected view area can be used to begin recognizing the gesture. Numbers need to be non-positive (only possible to reduce responsive area). |
54-
| `debug` | `boolean` | Enables debug logging and animation debugger. |
55-
| `containerStyle` | `StyleProp<ViewStyle>` | Style of the main component. |
34+
| Name | Type | Description |
35+
| :------------------------- | :---------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
36+
| `data` | `T[]` | Items to be rendered. |
37+
| `horizontal` | `boolean` | Orientation of list. |
38+
| `renderItem` | `(params: { item: T, index: number, drag: () => void, isActive: boolean}) => JSX.Element` | Call `drag` when the row should become active (i.e. in an `onLongPress` or `onPressIn`). |
39+
| `renderPlaceholder` | `(params: { item: T, index: number }) => React.ReactNode` | Component to be rendered underneath the hovering component |
40+
| `keyExtractor` | `(item: T, index: number) => string` | Unique key for each item |
41+
| `onDragBegin` | `(index: number) => void` | Called when row becomes active. |
42+
| `onRelease` | `(index: number) => void` | Called when active row touch ends. |
43+
| `onDragEnd` | `(params: { data: T[], from: number, to: number }) => void` | Called after animation has completed. Returns updated ordering of `data` |
44+
| `autoscrollThreshold` | `number` | Distance from edge of container where list begins to autoscroll when dragging. |
45+
| `autoscrollSpeed` | `number` | Determines how fast the list autoscrolls. |
46+
| `onRef` | `(ref: React.RefObject<DraggableFlatList<T>>) => void` | Returns underlying Animated FlatList ref. |
47+
| `animationConfig` | `Partial<Animated.SpringConfig>` | Configure list animations. See [reanimated spring config](https://github.com/software-mansion/react-native-reanimated/blob/master/react-native-reanimated.d.ts#L112-L120) |
48+
| `activationDistance` | `number` | Distance a finger must travel before the gesture handler activates. Useful when using a draggable list within a TabNavigator so that the list does not capture navigator gestures. |
49+
| `layoutInvalidationKey` | `string` | Changing this value forces a remeasure of all item layouts. Useful if item size/ordering updates after initial mount. |
50+
| `onScrollOffsetChange` | `(offset: number) => void` | Called with scroll offset. Stand-in for `onScroll`. |
51+
| `onPlaceholderIndexChange` | `(index: number) => void` | Called when the index of the placeholder changes |
52+
| `dragItemOverflow` | `boolean` | If true, dragged item follows finger beyond list boundary. |
53+
| `dragHitSlop` | `object: {top: number, left: number, bottom: number, right: number}` | Enables control over what part of the connected view area can be used to begin recognizing the gesture. Numbers need to be non-positive (only possible to reduce responsive area). |
54+
| `debug` | `boolean` | Enables debug logging and animation debugger. |
55+
| `containerStyle` | `StyleProp<ViewStyle>` | Style of the main component. |
56+
| `simultaneousHandlers` | `React.Ref<any>` or `React.Ref<any>[]` | References to other gesture handlers, mainly useful when using this component within a `ScrollView`. See [Cross handler interactions](https://docs.swmansion.com/react-native-gesture-handler/docs/interactions/). |
5657

5758
## Example
59+
5860
Example snack: https://snack.expo.io/@computerjazz/rndfl-example <br />
5961
Example snack with scale effect on hover: https://snack.expo.io/@computerjazz/rndfl-dragwithhovereffect
6062

6163
```typescript
62-
import React, { useState, useCallback } from 'react';
63-
import { View, TouchableOpacity, Text } from 'react-native';
64+
import React, { useState, useCallback } from "react";
65+
import { View, TouchableOpacity, Text } from "react-native";
6466
import DraggableFlatList, {
65-
RenderItemParams,
66-
} from 'react-native-draggable-flatlist';
67+
RenderItemParams
68+
} from "react-native-draggable-flatlist";
6769

6870
const NUM_ITEMS = 10;
6971

@@ -78,7 +80,7 @@ const exampleData: Item[] = [...Array(20)].map((d, index) => {
7880
return {
7981
key: `item-${backgroundColor}`,
8082
label: String(index),
81-
backgroundColor,
83+
backgroundColor
8284
};
8385
});
8486

@@ -97,17 +99,19 @@ function Example() {
9799
<TouchableOpacity
98100
style={{
99101
height: 100,
100-
backgroundColor: isActive ? 'red' : item.backgroundColor,
101-
alignItems: 'center',
102-
justifyContent: 'center',
102+
backgroundColor: isActive ? "red" : item.backgroundColor,
103+
alignItems: "center",
104+
justifyContent: "center"
103105
}}
104-
onLongPress={drag}>
106+
onLongPress={drag}
107+
>
105108
<Text
106109
style={{
107-
fontWeight: 'bold',
108-
color: 'white',
109-
fontSize: 32,
110-
}}>
110+
fontWeight: "bold",
111+
color: "white",
112+
fontSize: 32
113+
}}
114+
>
111115
{item.label}
112116
</Text>
113117
</TouchableOpacity>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
"pretty-quick": "^2.0.1",
5959
"react": "^16.13.1",
6060
"react-native": "^0.61.5",
61-
"react-native-gesture-handler": "^1.5.3",
61+
"react-native-gesture-handler": "^1.10.0",
6262
"react-native-reanimated": "^1.13.0",
6363
"react-test-renderer": "~16.11.0",
6464
"typescript": "^3.7.3"

‎src/index.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ export type DraggableFlatListProps<T> = Modify<
113113
onPlaceholderIndexChange?: (placeholderIndex: number) => void;
114114
containerStyle?: StyleProp<ViewStyle>;
115115
dragItemOverflow?: boolean;
116+
simultaneousHandlers?: React.Ref<any> | React.Ref<any>[];
116117
} & Partial<DefaultProps>
117118
>;
118119

@@ -1002,7 +1003,8 @@ class DraggableFlatList<T> extends React.Component<
10021003
onScrollOffsetChange,
10031004
renderPlaceholder,
10041005
onPlaceholderIndexChange,
1005-
containerStyle
1006+
containerStyle,
1007+
simultaneousHandlers
10061008
} = this.props;
10071009

10081010
const { hoverComponent } = this.state;
@@ -1019,6 +1021,7 @@ class DraggableFlatList<T> extends React.Component<
10191021
hitSlop={dragHitSlop}
10201022
onGestureEvent={this.onPanGestureEvent}
10211023
onHandlerStateChange={this.onPanStateChange}
1024+
simultaneousHandlers={simultaneousHandlers}
10221025
{...dynamicProps}
10231026
>
10241027
<Animated.View
@@ -1040,6 +1043,7 @@ class DraggableFlatList<T> extends React.Component<
10401043
keyExtractor={this.keyExtractor}
10411044
onScroll={this.onScroll}
10421045
scrollEventThrottle={1}
1046+
simultaneousHandlers={simultaneousHandlers}
10431047
/>
10441048
{!!hoverComponent && this.renderHoverComponent()}
10451049
<Animated.Code dependencies={[]}>

0 commit comments

Comments
 (0)