Adding renderHeader prop to component

[luisfuertes]

I am trying to add renderHeader prop in component like a ListView and have the posibility of drag items over the header.

I download the component code and in index.js and in render have added:

• { this.props.renderHeader && this.props.renderHeader() }
• And important add style={{flex: 1}} to SortableGrid props.

class SortableGrid extends Component {

    render = () =>
      <Animated.View
        style={ this._getGridStyle() }
        onLayout={ this.assessGridSize }
      >

        { this.props.renderHeader && this.props.renderHeader() }

        { this.state.gridLayout &&
          this.items.map( (item, key) =>
            <Block
              key = { key }
              style = { this._getBlockStyle(key) }
              onLayout = { this.saveBlockPositions(key) }
              panHandlers = { this._panResponder.panHandlers }
              delayLongPress = { this.dragActivationTreshold }
              onLongPress = { this.activateDrag(key) }
              onPress = { this.handleTap(item.props) }
              itemWrapperStyle = { this._getItemWrapperStyle(key) }
              deletionView = { this._getDeletionView(key) }
            >
              {item}
            </Block>
        )}
      </Animated.View>

      ....
}

With that all works fine. But the problem is when i wrap SortableGrid in a ScrollView, because the first render all works fine but after scroll, component re-render and break the ScrollView cutting end elements.

MyScreen code:

     return (
      <ScrollView scrollEnabled={this.state.scrollEnabled}>

        <SortableGrid
          style={{flex: 1}}
          dragActivationTreshold={50}
          onDragStart={ () => this.onDragStart() }
          onDragRelease={ () => this.onDragRelease() }
          renderHeader={ () => this.renderHeader() }
        >
          {
            _.map(data, (item, index) => {
              return this.renderItem(item, index)
            })
          }
        </SortableGrid>

      </ScrollView>
    )

@ollija can you help me with this? If all works fine i could do PR

[luisfuertes]

Ok i fix it adding on component index.js:

this.state = {
   ...
  headerHeight: 0,
}

_animateGridHeight = () => {
    this.gridHeightTarget = this.props.renderHeader ? (this.rows * this.state.blockWidth) + 
    this.state.headerHeight + this.state.blockWidth : this.rows * this.state.blockWidth
    ....
}

    render = () =>
        <Animated.View
          style={ this._getGridStyle() }
          onLayout={ this.assessGridSize }
        >

          <View onLayout={ (e) => this.setState({ headerHeight: e.nativeEvent.layout.height }) }>
            { this.props.renderHeader && this.props.renderHeader() }
          </View>

         ....

        </Animated.View>

But on first render it do extrain effect, im working on it. And now i need add ScrollView only to grid elements, and fix header on top