{"_id":"@alain.campagno/react-native-masonry-brick-tribus","_rev":"1-c095e18ffddf0bafae62250180b493f8","name":"@alain.campagno/react-native-masonry-brick-tribus","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.3":{"name":"@alain.campagno/react-native-masonry-brick-tribus","version":"1.0.3","description":"Brick List with regreshing Function","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["react-native","react-native-masonry","react-native-list","react-native-staggered","brick-list","staggered-grid","staggered","grid","staggered-list","list","react native list","react native masonry","react-native masonry list","masonry list","staggered list"],"maintainers":[{"name":"alain.campagno","email":"a.campagno@tribusinformatica.com"}],"author":{"name":"Tribus Informatica Srl","email":"info@tribusinformatica.com"},"license":"MIT","peerDependencies":{"react-native":"^0.41.2","react-native-windows":"0.41.0-rc.1"},"_id":"@alain.campagno/react-native-masonry-brick-tribus@1.0.3","_nodeVersion":"16.13.2","_npmVersion":"9.1.3","dist":{"integrity":"sha512-9WXCW7VcckT/XcgoLFSKmfREqXaXCsUKAnNhOpEl+JaARPfpaGYsP1EyHdoOgOgFCsNAQXpEp9H7io051qm+SQ==","shasum":"6b2c8a81a0811c729a361fbae2037b007e317f7a","tarball":"https://registry.npmjs.org/@alain.campagno/react-native-masonry-brick-tribus/-/react-native-masonry-brick-tribus-1.0.3.tgz","fileCount":5,"unpackedSize":798039,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCumQVbFmiSgRcRo+rwMGhLLY04gJY5tlBMAoOS47fbsQIgAYBPkBZhtLOW8Dgym1fHiWaAdMmgG771vSK4ww1/V0Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2AF8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmGBAAjENvi7KrLII0jheYuUGpc37QsAk7+iBxdBL+KX7+o5xIzMBc\r\np9Okoa45oIkfsqQE9tyJzTX33xmQL52Aa2ETDXMf5DfeK9zPPrk0L3l7/n2X\r\nlSqhlqFvLvx2fVNVKzrK3hgkm/RUVI49XMQT7fwkU1A4FOyQm9MMf8AlF2PW\r\n7/7NyWMDbFKRkSfNsAjA5rayIeCABicWFidD+JfEGHbFzbkRn0D2gzc4jdL+\r\nu130E8xIDA+Ae3kPP7mmvSl1Wh+VE5xjG0DauyffwspR1pWhtKzy+3EwmWhE\r\nTiBkq7xWLEmS8UPjmSNkKe8Nw/JvXadOZkxGfuyUYtthiuDind8UtHAqLQw6\r\nEkEwuK3V+QWnAzm6OOcxb6lUcrA4VMY3AnS42SBz35oYWeaxFAZ43TfLlDXr\r\nNCmq09v2ygpZTx705L+EZn9Gd5osr5wTZNjQ0EQR1sRm+NvyRFcpCWNMqdpm\r\nwVUbuDZLXOE0kUymuvxfr0k0/zlqm18pnMBoR6zfokH+cJdOMiOUxTLsbj7z\r\nTgxJQaWtXDEZhjwZZxY4nmOFv+HLKmIT76xdjb745bBFol7oF+4NPCLP+mcR\r\nhDfhgtXnCIU6IEeL9K/okC6txHLSYnINJM05o5kfg1kM7cmeISX8KxVbAvr4\r\nRvrpntQ3wjAGXm6wtC7Z0xhxi/LzAZP3ZNk=\r\n=23xn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alain.campagno","email":"a.campagno@tribusinformatica.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-masonry-brick-tribus_1.0.3_1675100540419_0.513243854361854"},"_hasShrinkwrap":false}},"time":{"created":"2023-01-30T17:42:20.351Z","1.0.3":"2023-01-30T17:42:20.618Z","modified":"2023-02-27T11:30:34.331Z"},"maintainers":[{"email":"a.campagno@tribusinformatica.com","name":"tribus.informatica.srl"}],"description":"Brick List with regreshing Function","keywords":["react-native","react-native-masonry","react-native-list","react-native-staggered","brick-list","staggered-grid","staggered","grid","staggered-list","list","react native list","react native masonry","react-native masonry list","masonry list","staggered list"],"author":{"name":"Tribus Informatica Srl","email":"info@tribusinformatica.com"},"license":"MIT","readme":"\n# react-native-masonry-brick-list [![npm version](https://img.shields.io/npm/v/react-native-masonry-brick-list.svg)](https://www.npmjs.com/package/react-native-masonry-brick-list) [![Maintainability](https://api.codeclimate.com/v1/badges/a99a88d28ad37a79dbf6/maintainability)](https://codeclimate.com/github/lvlrSajjad/sajjad-brick-list/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/a99a88d28ad37a79dbf6/test_coverage)](https://codeclimate.com/github/lvlrSajjad/sajjad-brick-list/test_coverage)\n\n\nthis is a  staggered List view for react native (pure Js)\n\n\n<img src=\"https://raw.githubusercontent.com/lvlrSajjad/sajjad-brick-list/master/screen.gif\" >\n\n## Installation\n\n`$ npm install react-native-masonry-brick-list --save`\n\n\n## Usage\njust be sure that in your list id and span is specified\n\nand use it as below\n\nProps{data (array),\n    renderItem (react Component),\n    columns (int),\n    rowHeight (int) }\n\n```javascript\nimport BrickList from 'react-native-masonry-brick-list';\nimport React, {Component} from 'react';\nimport {View, Text} from 'react-native'\n\n\ntype Props = {};\nexport default class App extends Component<Props> {\n    constructor(props){\n        super(props);\n        this.state={\n            //Just id (unique) and span (1,2,3, ...) is required\n            data:[\n                {id: '1', name: \"Red\", color: \"#f44336\", span: 1},\n                {id: '2', name: \"Pink\", color: \"#E91E63\", span: 2},\n                {id: '3', name: \"Purple\", color: \"#9C27B0\", span: 3},\n                {id: '4', name: \"Deep Purple\", color: \"#673AB7\", span: 1},\n                {id: '5', name: \"Indigo\", color: \"#3F51B5\", span: 1},\n                {id: '6', name: \"Blue\", color: \"#2196F3\", span: 1},\n                {id: '7', name: \"Light Blue\", color: \"#03A9F4\", span: 3},\n                {id: '8', name: \"Cyan\", color: \"#00BCD4\", span: 2},\n                {id: '9', name: \"Teal\", color: \"#009688\", span: 1},\n                {id: '10', name: \"Green\", color: \"#4CAF50\", span: 1},\n                {id: '11', name: \"Light Green\", color: \"#8BC34A\", span: 2},\n                {id: '12', name: \"Lime\", color: \"#CDDC39\", span: 3},\n                {id: '13', name: \"Yellow\", color: \"#FFEB3B\", span: 2},\n                {id: '14', name: \"Amber\", color: \"#FFC107\", span: 1},\n                {id: '15', name: \"Orange\", color: \"#FF5722\", span: 3},\n            ],\n        }\n    }\n\n\n    render() {\n        return (\n            <BrickList\n            data = {this.state.data}\n            renderItem={(prop)=>renderView(prop)}\n            columns = {3}\n            />\n        );\n    }\n}\n//RenderAnyItem\nrenderView=(prop)=>{\n    return(\n        <View key={prop.id} style={{\n            margin: 2,\n            borderRadius: 2,\n            backgroundColor: prop.color,\n            flex:1,\n            alignItems:'center',\n            justifyContent:'center',\n        }} >\n            <Text style={{color:'white'}}>{prop.name}</Text>\n        </View>\n    )\n};\n\n\n```\n","readmeFilename":"README.md"}