# react-native-metro-grid

> sample metroUI for react-native.

Latest version **1.0.2** (published 2015-11-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-metro-grid
pnpm add react-native-metro-grid
yarn add react-native-metro-grid
bun add react-native-metro-grid
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2015-11-13 |
| First published | 2015-11-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zoudeyi |
| Maintainers | zackleo |
| Keywords | react-component, react-native, ios, metro, metroUI, win8 style, grid |

## Links

- npm: https://www.npmjs.com/package/react-native-metro-grid
- Repository: https://ZackLeonardo@github.com/ZackLeonardo/react-native-metro-grid
- Homepage: https://github.com/ZackLeonardo/react-native-metro-grid#readme
- Issues: https://github.com/ZackLeonardo/react-native-metro-grid/issues
- npm.io page: https://npm.io/package/react-native-metro-grid

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2015-11-13
- 1.0.1 — 2015-11-11
- 1.0.0 — 2015-11-10

## README

# 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:
```js
{
  "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"],
    }
  ],
}

```

```js
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](https://raw.githubusercontent.com/ZackLeonardo/react-native-metro-grid/master/metroUI.gif)

## Example

Check full example in the `Example` folder.

## License

[MIT License](http://opensource.org/licenses/mit-license.html). © Zou Deyi

---
_Source: https://npm.io/package/react-native-metro-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._