Move all spacer logic outside of renderItem

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>
     )
   }