react-native-drag-sort-gridview

react-native-drag-sort-gridview

Getting started

Animation is accelerated by react-native-reanimated. Please install and setup react-native-reanimated

npm install react-native-drag-sort-gridview --save
npm install react-addons-update --save

or

yarn add react-native-drag-sort-gridview react-addons-update

Usage

import React, { useState } from 'react'
import { View } from 'react-native'
import DraggableGridView from 'react-native-drag-sort-gridview'

interface IItem {
  id: number
  color: string
}

const Example = () => {
  const [data, setData] = useState<Array<IItem>>([
    { id: 0, color: '#FF0000' },
    { id: 1, color: '#00FF00' },
    { id: 2, color: '#0000FF' }
  ])

  return (
    <View style={{ flex: 1, backgroundColor: 'black', paddingVertical: 80 }}>
      <DraggableGridView
        style={{
          overflow: 'visible',
          backgroundColor: 'white'
        }}
        contentContainerStyle={{
          justifyContent: 'flex-start'
        }}
        itemContainerStyle={{
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'gray',
          borderColor: 'red',
          borderWidth: 2,
          padding: 10
        }}
        isEditing={true}
        numColumns={3}
        data={data}
        keyExtractor={({ id }) => `${id}`}
        onOrderChanged={(orderedData, from, to) => {
          setData(orderedData)
        }}
        renderItem={({ item }) => {
          return <View style={{ flex: 1, backgroundColor: item.color }}></View>
        }}
      />
    </View>
  )
}

export default Example

Props

Accept all props in FlatList

Name	Type	Required	Description
data	Array	✓	Same as FlatList data
renderItem	function	✓	Simular to FlatList renderItem but this module does NOT access JSX.Element
isEditing	boolean	✓	If isEditing is true, item can be sorted by drag & drop, but onPress/onLongPress within items would be blocked.
onOrderChanged	function	✓	Callback when touch end. (orderedData: Array, from: number, to: number) would be returned. orderedData is an array of data with new order. from is the original position of the dragged item. to is the new position of the dragged item
keyExtractor	Array		Same as FlatList keyExtractor
numColumns	number		Default 1. Same as FlatList numColumns. If only 1 item is needed in each row, you may use react-native-draggable-flatlist which has better performance.
listWidth	number		Default screen width. Width of the whole list, This value would be used to calcuate the width of item by (listWidth / numColumns)
animMoveDuration	number		Default 1000 miliseconds. The time taken (miliseconds) for non-dragged items to animate.
debounce	number		Default undefined. Debounce of non-dragged items to start animation. If value is undefined, there would be no debounce. Implementing debounce can improve performance.
shouldVibrate	boolean		Default true. This determine should the items vibrate while editing
itemContainerStyle	ViewStyle		Style of item wrapper