A drag-and-drop-enabled FlatList for React Native
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit c8226f0 Jul 15, 2018
Permalink
Failed to load latest commit information.
README.md Updated README.md to consistently name component Jul 3, 2018
index.js [Android] Compensate for hidden StatusBar Jul 15, 2018
package.json 1.1.2 Jul 15, 2018

README.md

React Native Draggable FlatList

Draggable FlatList demo

Install

  1. npm install react-native-draggable-flatlist or yarn add react-native-draggable-flatlist
  2. import DraggableFlatList from 'react-native-draggable-flatlist'

Api

Props:

  • data (Array) Items to be rendered.
  • horizontal (boolean) Orientation of list.
  • renderItem (Function) ({ item, index, move, moveEnd, isActive }) => <Component />. Call move when the row should become active (in an onPress, onLongPress, etc). Call moveEnd when the gesture is complete (in onPressOut).
  • keyExtractor (Function) (item, index) => string
  • contentContainerStyle (Object)
  • scrollPercent (Number) Sets where scrolling begins. A value of 5 will scroll up if the finger is in the top 5% of the FlatList container and scroll down in the bottom 5%.
  • onMoveEnd (Function) ({ data, to, from, row }) => void Returns updated ordering of data
  • onMoveBegin (Function) (index) => void Called when row becomes active.
  • All props are spread onto underlying FlatList

Example

import React, { Component } from 'react'
import { View, TouchableOpacity, Text } from 'react-native'
import DraggableFlatList from 'react-native-draggable-flatlist'

class Example extends Component {

  state = {
    data:  [0, 1, 2, 3, 4, 5]
  }

  renderItem = ({ item, index, move, moveEnd, isActive }) => {
    return (
      <TouchableOpacity
        style={{ height: 100, backgroundColor: isActive ? 'red' : 'blue' }}
        onLongPress={move}
        onPressOut={moveEnd}
      >
        <Text>{item}</Text>
      </TouchableOpacity>
    )
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <DraggableFlatList
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={(item, index) => `draggable-item-${item}`}
          contentContainerStyle={{ padding: 10 }}
          scrollPercent={5}
          onMoveEnd={({ data }) => this.setState({ data })}
        />
      </View>
    )
  }
}

export default Example