V2

[computerjazz]

• Major perf improvements by using reanimated + rngh
  • NOTE: Requires reanimated proc to see the full perf improvement, which has not been released as of this writing Add support for nodes as functions software-mansion/react-native-reanimated#354.
• Typescript
• Rename "move" functions to "drag"

[lafiosca]

Ok because I'm too curious and couldn't leave well enough alone, I simplified the test more to just be color blocks of text, and I'm still having the issues:

The list code looks like:

						<DraggableFlatList<string>
							data={['foo', 'bar', 'baz']}
							renderItem={renderDraggableCard}
							keyExtractor={(item) => item}
							refreshControl={refreshControl}
							ListEmptyComponent={emptyView}
							onDragBegin={(index) => {
								console.log(`Begin dragging index ${index}`);
							}}
							onDragEnd={({ from, to }) => {
								console.log(`End dragging from index ${from} to index ${to}`);
							}}
						/>

The render function:

		const renderDraggableCard = ({
			item,
			index,
			drag,
			isActive,
		}: {
			item: string,
			index: number,
			drag: () => void,
			isActive: boolean,
		}) => (
			<TouchableOpacity onLongPress={drag}>
				<Text style={[
					{
						width: '100%',
						height: 150,
						margin: 8,
						padding: 12,
						fontSize: 36,
						backgroundColor: index === 0 ? 'blue' : index === 1 ? 'green' : 'red',
					},
					isActive ? { borderWidth: 8, borderColor: 'magenta' } : {},
				]}>
					{item}
				</Text>
			</TouchableOpacity>
		);

And then piece by piece I ripped everything out of the app and brought this up to the top level, surrounded only by a container view of flex: 1 and no context providers. Still behaved like this.

I'm going to have to cut off the investigation here, but for reference, here are the relevant library versions I am using:

react-native 0.61.4
react-native-gesture-handler 1.5.0
react-native-reanimated 1.4.0
react-native-draggable-flatlist 2.0.1

[computerjazz]

@lafiosca thanks so much for the example! I can repro on my end now, but only when I do not set state on drag end. This wasn't a use case I was planning for, since usually you want to update your list data in response to the drag, but agree it's definitely a bug. I will look into it — I'm hoping it's as easy as forcing a rerender on drag end, whether data prop changes or not.

Can you verify that it works when you set new data in onDragEnd?
Example here:
https://gist.github.com/computerjazz/436f513ef40d37dd7da0c4fbfd93c732

[computerjazz]

@lafiosca should be fixed in 2.0.2. Thanks!

[computerjazz]

Oh and I should probably make the docs more clear, but if you are not setting updated data as your data source after a drag, your list will jump back to its original position. In other words -- the component tells you what happened as a result of the drag, but you are responsible for updating the data source. Usually it's as simple as onDragEnd={({ data }) => this.setState({ data })} (or whatever state container you use)

[lafiosca]

Glad that helped. I was definitely assuming the latter and intended on wiring up the data update later, just didn’t expect the lack of updating during my trial to cause a bug.

There was also the separate problem with something in the full-blown version of my app conflicting with the smooth item animations and positioning, but I’m probably not going to have time to dig in on that.