From b39a499758d0f7a2ba2e2724cda90c6cbb704b75 Mon Sep 17 00:00:00 2001
From: Daniel Merrill <daniel.r.merrill@gmail.com>
Date: Fri, 1 Feb 2019 10:38:09 -0800
Subject: [PATCH] Move all spacer logic outside of `renderItem`

---
 index.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/index.js b/index.js
index f5f21c71..afc1e679 100644
--- a/index.js
+++ b/index.js
@@ -301,27 +301,29 @@ class SortableFlatList extends Component {
   renderItem = ({ item, index }) => {
     const { renderItem, data, horizontal } = this.props
     const { activeRow, spacerIndex } = this.state
-    const isSpacerRow = spacerIndex === index
-    const spacerSize = (isSpacerRow && this._measurements[activeRow]) ? this._measurements[activeRow][horizontal ? 'width' : 'height'] : 0
-    const endPadding = index === data.length - 1 && spacerIndex === data.length && this._measurements[activeRow][horizontal ? 'width' : 'height']
     const isActiveRow = activeRow === index
+    const isSpacerRow = spacerIndex === index
+    const isLastItem = index === data.length - 1
+    const spacerAfterLastItem = spacerIndex >= data.length
+    const activeRowSize = this._measurements[activeRow] ? this._measurements[activeRow][horizontal ? 'width' : 'height'] : 0
+    const endPadding = (isLastItem && spacerAfterLastItem)
+    const spacerStyle = { [horizontal ? 'width' : 'height']: activeRowSize }
 
     return (
       <View style={[styles.fullOpacity, { flexDirection: horizontal ? 'row' : 'column' }]} >
-        {!!spacerSize && <View style={{ [horizontal ? 'width' : 'height']: spacerSize }} />}
+        {isSpacerRow && <View style={spacerStyle} />}
         <RowItem
           horizontal={horizontal}
           index={index}
           isActiveRow={isActiveRow}
-          spacerSize={spacerSize}
           renderItem={renderItem}
           item={item}
           setRef={this.setRef}
           move={this.move}
           moveEnd={this.moveEnd}
-          endPadding={endPadding}
           extraData={this.state.extraData}
         />
+        {endPadding && <View style={spacerStyle} />}
       </View>
     )
   }
@@ -397,15 +399,14 @@ SortableFlatList.defaultProps = {
 
 class RowItem extends React.PureComponent {
 
-  renderSpacer = (size) => <View style={this.props.horizontal ? { width: size } : { height: size }} />
-
   move = () => {
     const { move, moveEnd, renderItem, item, index } = this.props
     const hoverComponent = renderItem({ isActive: true, item, index, move: () => null, moveEnd })
     move(hoverComponent, index)
   }
+
   render() {
-    const { moveEnd, isActiveRow, horizontal, endPadding, renderItem, item, index, setRef } = this.props
+    const { moveEnd, isActiveRow, horizontal, renderItem, item, index, setRef } = this.props
     const component = renderItem({
       isActive: false,
       item,
@@ -423,7 +424,6 @@ class RowItem extends React.PureComponent {
         <View style={wrapperStyle}>
           {component}
         </View>
-        {!!endPadding && this.renderSpacer(endPadding)}
       </View>
     )
   }