rn-lockable-draggable-grid

This is a drag-and-drop grid for React Native. Items can be locked to prevent dragging, and they can also have their position locked so that they do not reorder as other items shift around.

Demo

Installation

yarn add @tailwindapp/rn-lockable-draggable-grid

Usage

import React from 'react';
import {
  View,
  StyleSheet,
  Text,
} from 'react-native';
import { DraggableGrid } from '@tailwindapp/rn-lockable-draggable-grid';

interface MyTestProps {

}

interface MyTestState {
  data:{key:string, name:string}[];
}

export class MyTest extends React.Component<MyTestProps, MyTestState>{

  constructor(props:MyTestProps) {
    super(props);
    this.state = {
      data:[
        {name:'1',key:'one'},
        {name:'2',key:'two'},
        {name:'3',key:'three'},
        {name:'4',key:'four'},
        {name:'5',key:'five'},
        {name:'6',key:'six'},
        {name:'7',key:'seven'},
        {name:'8',key:'eight'},
        {name:'9',key:'night'},
        {name:'0',key:'zero'},
      ],
    };
  }

  public render_item(item:{name:string, key:string}) {
    return (
      <View
        style={styles.item}
        key={item.key}
      >
        <Text style={styles.item_text}>{item.name}</Text>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.wrapper}>
        <DraggableGrid
          numColumns={4}
          renderItem={this.render_item}
          data={this.state.data}
          onDragRelease={(data) => {
            this.setState({data});// need reset the props data sort after drag release
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  button:{
    width:150,
    height:100,
    backgroundColor:'blue',
  },
  wrapper:{
    paddingTop:100,
    width:'100%',
    height:'100%',
    justifyContent:'center',
  },
  item:{
    width:100,
    height:100,
    borderRadius:8,
    backgroundColor:'red',
    justifyContent:'center',
    alignItems:'center',
  },
  item_text:{
    fontSize:40,
    color:'#FFFFFF',
  },
});

Props

| parameter | type | required | description | | :-------- | :---- | :------- | :---------- | | numColumns | number | yes | how many items should be render on one row| | data | array | yes | data's item must have unique key，item's render will depend on the key| | renderItem |(item, order:number) => ReactElement| yes | Takes an item from data and renders it into the list | | itemHeight | number | no | if not set this, it will the same as itemWidth | | dragStartAnimation | object | no | custom drag start animation | | style | object | no | grid styles |

Event Props

| parameter | type | required | description | | :-------- | :---- | :------- | :---------- | | onItemPress | (item) => void | no | Function will execute when item on press | | onDragStart | (startDragItem) => void | no | Function will execute when item start drag | | onDragRelease | (data) => void | no | Function will execute when item release, and will return the new ordered data | | onResetSort | (data) => void | no | Function will execute when dragged item change sort |

Item Props

| parameter | type | required | description | | :-------- | :---- | :------- | :---------- | | disabledDrag | boolean | no | It will disable drag for the item | | disabledReSorted | boolean | no | It will disable resort the item |

if you set disabledResorted be true, it will look like that

Custom Drag Start Animation

If you want to use your custom animation, you can do like this

 render() {
    return (
      <View style={styles.wrapper}>
        <DraggableGrid
          numColumns={4}
          renderItem={this.render_item}
          data={this.state.data}
          onDragStart={this.onDragStart}
          dragStartAnimation={{
            transform:[
              {scale:this.state.animatedValue}
            ],
          }}
        />
      </View>
    );
  }

  private onDragStart = () => {
    this.state.animatedValue.setValue(1);
    Animated.timing(this.state.animatedValue, {
      toValue:3,
      duration:400,
    }).start();
  }

Resort item

if you want resort item yourself,you only need change the data's sort, and the draggable-grid will auto resort by your data.

Contributor Notes

• You'll need to use Node 10 to build this, otherwise the dependencies won't compile.
• Use yarn instead of npm