question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

List Item jumps 44 points down on long press when animation starts

See original GitHub issue

Issue Description

First off, nice job. This is the first drag drop component I found that was adaptable to my project. I am having an issue with this component. It works fine until I attempt to dynamically add another component which adds additional height to the container. My markup is as follows in the render function:

<View style={Styles.container}>
	{this._renderListAddSection()}
	<View style={{ flex: 1 }}>
		<DraggableFlatList
			isModerator={sessionModerator}
			// contentContainerStyle={Styles.contentContainer}
			data={this.state.data}
			renderItem={this._renderItem}
			scrollPercent={5}
			onMoveEnd={this._onMoveEnd}
		/>
	</View>
	<ButtonAction
		onClickHandler={this.onActionPress}
		active={listPending}
	/>
	<ListItemAdd
		visible={this.state.addModalVisible}
		closeModal={this.closeAddListModal}
		userId={this.props.user.id}
	/>
</View>

When the component initially loads it works as expected. The app allows a person to take administrative privileges by selecting a button in the header. That re renders the component and runs the _renderListAddSection method with basically adds another component to the view that has additional buttons

<ListAdd
	onPressHandler={this.openAddListModal}
	title="Tap to add a name"
/>

After the additional component is added with a height of 44 your component basically starts behaving unexpectedly. When long pressing the active row jumps 44 points down when activated. I have tried for a day to figure out why and am hoping you might be able to understand the issue.

It’s weird because the layout seems to adjust accordingly. Before the additional component is added the layout log you added reports a height of 812 and after it update following the component being added it reports 768 as the height, which is 812 - 768 = 44 which is the additional height of the added component.

So the problem is after adding the new component, when I press on the row to drag, instead of it becoming active in hover mode and simply changing opacity in the position it was in, it jumps down the amount of points of the added component.

Thanks.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
aaronbalthasercommented, Nov 1, 2018

This is an update. I tried the following branch found in your pull requests and it fixed my issue.

https://github.com/computerjazz/react-native-draggable-flatlist/blob/9f810f4b8c7bf70d1a3ea41867175d7062b95b75/index.js

0reactions
computerjazzcommented, Jan 15, 2020

please try v2 and reopen if there’s still an issue

Read more comments on GitHub >

github_iconTop Results From Across the Web

SwiftUI Long Press Gesture and Tap Progress Animation
Create a progress animation depending on how long it's pressed. Full course: http://designcode.io/swiftui?promo=learnswiftui.
Read more >
Slider Revolution 6 - Animation Basics - YouTube
Learn the basics of how to create animations using Slider Revolution.TIMESTAMPS:00:18 Switching to Animation View00:52 Panels for ...
Read more >
.animate() | jQuery API Documentation
A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7,...
Read more >
android - Animated menu item "jumps" when animation starts
It works fine, except that the style doesn't seem to be right. When I click the item, it starts rotating, but only after...
Read more >
A Guide to SVG Animations (SMIL) - CSS-Tricks
SVG graphics can be animated using animation elements. ... like click + 1s to start an animation one second after the element is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found