List Item jumps 44 points down on long press when animation starts
See original GitHub issueFirst 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:
- Created 5 years ago
- Comments:11 (1 by maintainers)
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
please try v2 and reopen if there’s still an issue