@thang2162/react-native-tile-view NPM

React Native Tile View

Installation

Add the dependency:

React Native:

npm i @thang2162/react-native-tile-view

or,

yarn add @thang2162/react-native-tile-view

Peer Dependencies

IMPORTANT! You need install them.

"react": ">= 16.x.x",
"react-native": ">= 0.55.x",

Basic Usage

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) => (
  <View>
    <Text>{data.text}</Text>
    {data.number && <Text>{data.number}</Text>}
  </View>
);

<TileView
  tiles={tiles}
  tileContent={tileContent}
/>

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