react-native-metro-grid

1.0.2 • Public • Published

react-native-metro-grid

metro UI grid for react-native

if you want use it more Intelligently, you should pretreat the images by Native methods. Just reload the json data by caculating width and height of the image.

Installation

npm install --save react-native-metro-grid

This module requires React Native 0.11 or later

Usage

example: see github Example. https://github.com/ZackLeonardo/react-native-metro-grid/tree/master/Example

pay attention: this module is closely associated with the props json data. for example:

{
  "rowItems": [
    {
      "type": 1,
      "row": ["cdr"],
    },{
      "type": 11,
      "row": ["one", "two"],
    },{
      "type": 12,
      "row": ["fourZero",["one", "two"]],
    },{
      "type": 22,
      "row": ["fourZero", "fourZero"],
    },{
      "type": 21,
      "row": [["one", "two"],"fourZero"],
    }
  ],
}
 
var imgData = require('./imgData.json');
var Metro = require('react-native-metro-grid');
 
var metroUI = React.createClass({
  render: function () {
    return (
      <Metro
        data={imgData.rowItems}
        navigator={this.props.navigator}
        transStyle={"navigator"}
        />
    );
  },
});
 

Navigator setup/ios support

For android support you must pass a reference to a NavigatorIOS since it does not yet have the Modal component and is not on the official todo list. See the Example project for a complete example.

var AwesomeProject = React.createClass({
  render: function () {
    return (
      <NavigatorIOS
        style={styles.navigator}
        navigationBarHidden={true}
        initialRoute={{
          title: '',
          component: metroUI,
        }}
      />
    );
  }
});

Properties

Prop Type Description
data object Data can be loaded from json data file. But the json data has specific format, which can be seen in Usage part.
navigator object This is an optional one. If transStyle is set as "modal", this prop can be unchosen.
transStyle string There are two options can be chosen. "modal" or "navigator". The modal one means the pages switch in modal method, navigator means NavigatorIOS method.

Demo

Demo

Example

Check full example in the Example folder.

License

MIT License. © Zou Deyi

Package Sidebar

Install

npm i react-native-metro-grid

Weekly Downloads

2

Version

1.0.2

License

MIT

Last publish

Collaborators

  • zackleo