npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-sortable-grid-v2

v1.0.0

Published

Drag-and-drop sortable grid view for React Native.

Downloads

14

Readme

react-native-sortable-grid

Join the chat at https://gitter.im/react-native-sortable-grid/Lobby npm Sponsored by Leonidas npm David David

Installation

npm i react-native-sortable-grid --save

Usage

import SortableGrid from 'react-native-sortable-grid'

...

<SortableGrid>
  {
    ['a', 'b', 'c'].map( (letter, index) =>

      <View key={index}>
        <Text>{letter}</Text>
      </View>

    )
  }
</SortableGrid>

SortableGrid properties

  • style Object

Custom styles to override or complement the sortableGrid native style.

  • When a row becomes empty of items due to item deletion, the height of the grid is smoothly adjusted to fit the new rows. However, passing flex:1 inside the style prop will cause the grid to fill up the available space and not adjust height when rows become empty.
  • User cannot drag items outside of the grid. Assigning flex:1 will expand the grid, therefore giving more space for the items to be dragged in.
  • When deleting items from the last row on Android, the items can get clipped. You can workaround this by giving the grid bottomPadding. (This is a known issue with overflow-property on Android)
  • blockTransitionDuration Number

How long should the transition of a passive block take when the active block takes its place (milliseconds)

  • activeBlockCenteringDuration Number

How long should it take for the block that is being dragged to seek its place after it's released (milliseconds)

  • itemsPerRow Number

How many items should be placed on one row

  • itemWidth Number

If set, itemsPerRow will be calculated to fit items of this size

  • itemHeight Number

If set, the height of each item. Defaults to itemWidth

  • itemHeight Number

When used together with itemsPerRow, sets the size of a block to something other than the default square

  • dragActivationTreshold Number

How long must the user hold the press on the block until it becomes active and can be dragged (milliseconds)

  • doubleTapTreshold Number

How long will the execution wait for the second tap before deciding it was a single tap (milliseconds). Will be omitted if no onDoubleTap-property is given to the item being tapped - In which case single-tap callback will be executed instantly

  • onDragStart Callback (activeItem)

Function that is called when the dragging starts. This can be used to lock other touch responders from listening to the touch such as ScrollViews and Swipers.

  • onDragRelease Callback (itemOrder)

Function that is executed after the drag is released. Will return the new item order.

  • onDeleteItem Callback (item)

Function that is executed item is deleted. Will return the properties of the deleted item.

  • dragStartAnimation Object

Custom animation to override the default wiggle. Must be an object containing a key transform, which is an array of transformations. Read about transforms and animations and see the example to learn how to use this.

SortableGrid methods

  • toggleDeleteMode accepts no arguments

Calling this will toggle item deletion mode on/off. Will return object { deleteModeOn: true/false }.

SortableGrid's children's properties

  • onTap Callback

Function that is executed when the block is tapped once, but not pressed for long enough to activate the drag.

  • onDoubleTap Callback

Function that is executed when the block is double tapped within a timeframe of doubleTapTreshold (default 150ms). Assigning this will delay the execution of onTap. Omitting this will cause all taps to be handled as single taps, regardless of their frequency.

  • inactive Boolean

Flag to mark a child node as being inactive. If set, no touch events will be fired when users interact with the node.

onDragRelease return value looks like this:

Object {

  itemOrder: Array [
    0: Object {
      key: "1"
      order: 0
      ref: null
    }
    1: Object {
      key: "5"
      order: 1
      ref: null
    }
    n: Object ...
  ]

}

Full SortableGrid example:

 <SortableGrid
   blockTransitionDuration      = { 400 }
   activeBlockCenteringDuration = { 200 }
   itemsPerRow                  = { 4 }
   dragActivationTreshold       = { 200 }
   onDragRelease                = { (itemOrder) => console.log("Drag was released, the blocks are in the following order: ", itemOrder) }
   onDragStart                  = { ()          => console.log("Some block is being dragged now!") } >

   {
     ['a', 'b', 'c'].map( (letter, index) =>

       <View key={index} onTap={() => console.log("Item number:", index, "was tapped!") }>
         <Text>{letter}</Text>
       </View>

     )
   }

 </SortableGrid>

Demos

Basic item deletiontoggleDeleteMode() is called during onTap in this example

Custom block animation can be passed to the grid

Smooth resizing of the grid when the last row becomes empty:

No grid resizing if the grid has flex:1 assigned:

The item drag is constrained within the grid:

With flex:1 there is more space to drag: