@pyrodash/react-native-draggable-grid
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.3 • Public • Published

    react-native-draggable-grid

    996.icu LICENSE

    中文文档

    Demo

    Issue Stats

    Getting Started

    Installation

    npm install react-native-draggable-grid --save

    Usage

    import React from 'react';
    import {
      View,
      StyleSheet,
      Text,
    } from 'react-native';
    import { DraggableGrid } from 'react-native-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
    scrollAreaSize number no allowed space from edges to start scrolling from
    scrollInterval number no time interval to automatically scroll when dragging
    scrollStep number or ((iteration: number) => number) no the amount of pixels to scroll each scroll interval iteration
    contentOffset {x: number, y: number} no object used to set initial scroll state and keep updated scroll state

    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
    onDragging (gestureState: PanResponderGestureState) => void no Function will execute when dragging item

    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

    Issue Stats

    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.

    the data's key must unique

    Install

    npm i @pyrodash/react-native-draggable-grid

    DownloadsWeekly Downloads

    5

    Version

    2.1.3

    License

    ISC

    Unpacked Size

    76.4 kB

    Total Files

    21

    Last publish

    Collaborators

    • pyrodash