mark-spurgeon / react-native-space

This is about the concept of space

React Native Space

A component allowing you to play with space. By "space", I mean the concept of space : some space where entites occupy some space in a certain position.

Basically, it's a stripped-down map.

But this means we can add whatever we want to that space. And that's the cool part.

This is in early development, so I advise you not to use it for production purposes.

Installation

npm install --save react-native-space

Current version : 0.2.5 - latest is best

Usage

import Space from 'react-native-space';
import {Text} from 'react-native';


class MainView extends React.Component {

  loadComponents(boundary) {
    //... check if items are in the boundary
    return [
      {
        x:10,
        y:100,
        width:100,
        height:100,
        uid:"anything that's unique to the item",
        component: <Text>Oh hi mark</Text>  // Any React component
      }
    ]
  }

  render() {
    return (
      <Space
        x={0}
        y={0}
        onInitial={(b)=>loadComponents(b)}
      />  
    );
  }
}

Properties

prop	default	type	description
x	0	Number	X position of the component on the space
y	0	Number	Y position of the component on the space
unitsize	64	Number	Size of the 'unit' of the grid
backgroundColor	#	color value	Background color
lineColor	#	color value	Grid's lines' color
onInitial	null	Function (Event)	Return a list of components to load initially. Passes a boundary json object
onUpdate	null	Function (Event)	Return a list of components to add depending on the boundary.

Functions

Properties let you monitor what happens when the Space changes. But to add things dynamically, you need to use the 'ref' like so

...

otherFunction() {
  this.refs.SpaceComponent.addItem()
}

render() {
  return (
    <Space
      ...
      ...
      ref={"SpaceComponent"}
    />  
  );
}

...

#### addItem(item) Add an item to the Space

var i = this.refs.SpaceComponent.addItem({
    x: 0,
    y:0,
    width:100,
    height:100,
    uid:'lakenfjeohfi',
    component:<Text>I like spaghett</Text>
  })
console.log(i.status) // returns 'ok'

removeItem(uid)

Remove an item.

var rm = this.refs.SpaceComponent.removeItem(uid)
console.log(rm.status) // returns 'removed'

All objects with the uid will be removed, so this property is important.

getPosition()

Gets the position of the Space

var pos = this.refs.SpaceComponent.getPosition()
console.log(pos.x, pos.y)

TODO

• Component ID system [crucial] : generate ID. 👌
• Memory object : keep objects in mind to re-render them when on the right coordinates. 👌
• Add components while already running 👌
• Take velocity into account when moving the space around. 🔨 ( ! this will cause issues with getting the spaceview's position)
• Remove objects when not in the box. Use _selectActiveComponents() whenever components are added or space position has changed 🔨
• Function : getBoundary() 🔨 [probably wait till conversion to spaceunits ]
• Fix : getPosition() -> not always right apparently
• Convert x and y positions to units and not points --> create spaceunit value, change unitsize to spaceunit, which is how many points a unit is --> enables crossplatform consistency 🔨🚨
• Set a limit boundary to the accessible space --> requires conversion to specific space units 🔨

(🚨 : will change the usage so a rupture with current versions)