drag-drop.js

import { View } from 'react-primitives'
import React, { Component } from 'react'
import Children from 'react-children-utilities'
import { DragItem, DropArea } from '../drag-drop'

export default class DragDrop extends Component {
  render() {
    const { activeDropArea, items, isDragging, position } = this.state
    const children = Children.deepMap(this.props.children, (child, index) => {
      if (child.type === DragItem) {
        return React.cloneElement(child, {
          onActivate: () => this.addItem(child),
          onDeactivate: () => this.removeItem(child),
        })
      } else if (child.type === DropArea) {
        return React.cloneElement(child, {
          isActive: activeDropArea === child.key,
          isDragging,
          onDragOver: () => this.setState({ activeDropArea: child.key }),
          onDragOut: () => this.setState({ activeDropArea: null }),
          position,
        })
      } else {
        return child
      }
    })

    return (
      <View style={{ flex: 1 }} {...this._panResponder.panHandlers}>
        {isDragging && renderIcon(items.length, position)}
        {children}
      </View>
    )
  }
}

drop-area.js

import React, { Component } from 'react'
import { View } from 'react-primitives'

export default class DropArea extends Component {
  render() {
    let { isOver } = this.props
    return (
      <View style={{ flex: 1 }}>
        {this.props.children(isOver)}
      </View>
    )
  }
}