New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

github.com/shisme/react-native-draggable-grid

Package Overview
Dependencies
Alerts
File Explorer
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

github.com/shisme/react-native-draggable-grid

  • v0.0.0-20240328024953-b3bf7b8ca3b3
  • Source
  • Go
  • Socket score

Version published
Created
Source

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

parametertyperequireddescription
numColumnsnumberyeshow many items should be render on one row
dataarrayyesdata's item must have unique key,item's render will depend on the key
renderItem(item, order:number) => ReactElementyesTakes an item from data and renders it into the list
itemHeightnumbernoif not set this, it will the same as itemWidth
dragStartAnimationobjectnocustom drag start animation
styleobjectnogrid styles

Event Props

parametertyperequireddescription
onItemPress(item) => voidnoFunction will execute when item on press
onDragStart(startDragItem) => voidnoFunction will execute when item start drag
onDragRelease(data) => voidnoFunction will execute when item release, and will return the new ordered data
onResetSort(data) => voidnoFunction will execute when dragged item change sort
onDragging(gestureState: PanResponderGestureState) => voidnoFunction will execute when dragging item
onDragItemActive(item) => voidnoFunction will execute when any item active

Item Props

parametertyperequireddescription
disabledDragbooleannoIt will disable drag for the item
disabledReSortedbooleannoIt 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

FAQs

Package last updated on 28 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc