https://github.com/thang2162/react-native-tile-view
A utility for creating tile views in react native!
https://github.com/thang2162/react-native-tile-view
Last synced: 2 months ago
JSON representation
A utility for creating tile views in react native!
- Host: GitHub
- URL: https://github.com/thang2162/react-native-tile-view
- Owner: thang2162
- License: unlicense
- Created: 2020-10-29T21:32:54.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2020-11-09T23:04:27.000Z (over 4 years ago)
- Last Synced: 2025-02-14T20:40:38.392Z (3 months ago)
- Language: JavaScript
- Size: 90.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Tile View
[](https://github.com/thang2162/react-native-tile-view)
[](https://www.npmjs.com/package/@thang2162/react-native-tile-view)
[](https://www.npmjs.com/package/@thang2162/react-native-tile-view)
[](https://opensource.org/licenses/unlicense)
## Installation
Add the dependency:
### React Native:
```js
npm i @thang2162/react-native-tile-view
or,
yarn add @thang2162/react-native-tile-view
```
## Peer Dependencies
###### IMPORTANT! You need install them.
```js
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
```
## Basic Usage
```js
import TileView from "@thang2162/react-native-tile-view";
const tiles = [
{tpr: 1, tileHeight: 200, touchable: true, data: {text: 'hello', number: 5}},
{tpr: 2, tileHeight: 200, data: {number: 5}},
{tpr: 2, tileHeight: 200, touchable: true, data: {text: 'hello'}},
{tpr: 3, data: {number: 5}},
{tpr: 3, touchable: true, data: {text: 'hello'}},
{tpr: 3, data: {text: 'hello', number: 5}},
{tpr: 4, data: {text: 'hello'}},
{tpr: 4, data: {number: 5}},
{tpr: 4, data: {text: 'hello'}},
{tpr: 4, data: {text: 'hello', number: 5}},
];
const tileContent = (data) => (
{data.text}
{data.number && {data.number}}
);
```
## Configuration - Props
| Property | Type | Default | Description |
| -------------------- | :----: | :------------: | ----------------------------------------- |
| customStyle | style | | Set your own style |
| showChildren | boolean | true or false | Show child slot content instead of tiles |
| tileContent - required | jsx | | Set the template for your tiles |
| tiles - required | array | [] | Object array containing tile data |
| onTileTouch | callback | | Callback for touchable tiles |
| refreshControl | jsx | | Set a Refresh Control for pull to refresh |
| tileSize | number | 1 | Resize your tiles |
## Tiles - Object Structure Details
tpr or tiles per row is required and sets the size of the tiles.
touchable is optional and makes the tile in question touchable. Callback will return the index of object in the array as well as the object in the data key.
tileHeight is optional and allows you to set the height of each tile.
tileStyle is optional and allows you to override the default tile style of each tile. tileStyle must be initialized through StyleSheet.create().
data is optional and where you put data you wish to be available in the tileContent
## Custom Styles - Details
To change the main container set styles under the container key in the style Object.
To change the item container set styles under the tile key in the style Object.
The style object must be initialized through StyleSheet.create() before being set into the customStyle prop. See the example for more details.
## Author
thang2162, [email protected]
## License
React Native Tile View Library is available under the Unlicense. See the LICENSE file for more info.