react-native-drag-sort-gridview

Getting started

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

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

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' },
    { id: 3, color: '#FFFF00' },
    { id: 4, color: '#00FFFF' },
    { id: 5, color: '#FF00FF' },
    { id: 6, color: '#FFFFFF' },
    { id: 7, color: '#888888' },
    { id: 8, color: '#555555' }
  ])

  return (
    <DraggableGridView
      style={{
        overflow: 'visible',
        backgroundColor: '#222222',
        paddingVertical: 80
      }}
      contentContainerStyle={{
        justifyContent: 'flex-start'
      }}
      itemContainerStyle={{
        padding: 10
      }}
      isEditing={true}
      numColumns={3}
      itemHeight={100}
      data={data}
      keyExtractor={({ id }) => `${id}`}
      onOrderChanged={orderedData => {
        setData(orderedData)
      }}
      renderItem={({ item }) => {
        return <View style={{ width: '100%', height: 80, backgroundColor: item.color }}></View>
      }}
    />
  )
}

export default Example

Props

Accept all props in FlatList

GitHub

View Github