react-native-grid-design

Grid Design for React-Native, is a simple design tool which let you create your own grid system. It consists on a view with a drawn customizable grid with a selection and snapping tools.

It features

• A customizable grid with allowing you to have any x and y numbers of cells
• An optional select box which can be snapped to you grid cell
• An easy to use method letting you snap anything to the grid
• Customizable style
• Fast thanks to ART module

How to install (NPM or Yarn)

npm install react-native-grid-design

or

yarn add react-native-grid-design

Troubleshooting

If you meet any error with ART, be sure that the module is available. It should be by default if you use Expo.

Once your project is ejected, you need to link ART manually in your native project.

How to use : Imports

{ TouchEventType }: This enumeration allows you to know what type of touch happened on the grid. Possible values :

• PRESS_IN
• PRESSING
• PRESS_OUT

{ GridCellType }: This enumeration allows you to define the type of the value you want to snap on the grid. Possible values :

• X
• Y

Grid : Default element - This is the component you need to import to actually see the grid and the selector. Possible properties :

Features :

• onTouchEvent : Callback - touchEventData parameter object
• displaySelector : Boolean - Shows the selector on touch
• gridCount : Object - Required - Defines the number of cells for each columns and rows. Possible properties :
  • xCells: Number of columns
  • yCells: Number of rows
• snapSelectionToGrid : Boolean - Snap the selector to the grid. Affects values of onTouchEvent
• jailSelection : Boolean - When true, it prevents selector from getting out of bounds

Styling - Self explanatory:

• gridCellsBorderColor
• gridCellsBorderWidth
• selectionBorderColor
• selectionBackgroundColor

Container Styling :

• style

How to use : Example

For more informations, simply look at the Example.js project which speaks for itself, in the examples folder.

How to snap my own elements

To snap any element to the grid, you need to create a ref of the grid.

Once you have one, simply use the snapToGrid(value, GridCellType) method.