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 just use it for fun :)

Installation

npm install --save react-native-space

Current version : 0.2.5 - latest is best Its only dependency is React Native, so, that's useful:)

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)