tile.md

id	tile
title	Tile

A component with full size image and with text either inside the image or under the image along with customizable caption

This component was inspired from Shoutem UI by Shoutem. Check out Shoutem if you haven't already!

Featured Tile

<Tile
  imageSrc={{ require: './img/path' }}
  title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores dolore exercitationem"
  featured
  caption="Some Caption Text"
/>

Featured Tile with Icon

<Tile
  imageSrc={{ require: './img/path' }}
  icon={{ name: 'play-circle', type: 'font-awesome' }}
  featured
/>

Tile with Icon

<Tile
  imageSrc={{ require: './img/path' }}
  title="Lorem ipsum dolor sit amet, consectetur"
  icon={{ name: 'play-circle', type: 'font-awesome' }} // optional
  contentContainerStyle={{ height: 70 }}
>
  <View
    style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}
  >
    <Text>Caption</Text>
    <Text>Caption</Text>
  </View>
</Tile>

---

Props

Also receives all TouchableNativeFeedback (Android) or TouchableOpacity (iOS) props

• activeOpacity
• caption
• captionStyle
• containerStyle
• contentContainerStyle
• featured
• height
• icon
• iconContainerStyle
• imageContainerStyle
• imageSrc
• onPress
• title
• titleNumberOfLines
• titleStyle
• width

---

Reference

activeOpacity

Number passed to control opacity on press (optional)

Type	Default
number	0.2

---

caption

Text inside the tilt when tile is featured

Type	Default
string	none

---

captionStyle

Styling for the caption (optional)

Type	Default
object (style)	none

---

containerStyle

Styling for the outer tile container (optional)

Type	Default
object (style)	none

---

contentContainerStyle

Styling for bottom container when not featured tile (optional)

Type	Default
object (style)	none

---

featured

Changes the look of the tile (optional)

Type	Default
boolean	false

---

height

Height for the tile

Type	Default
number	Device Width * 0.8

---

icon

Icon Component Props (optional)

Type	Default
object {name: string, color: string, size: number, type: string (default is material, or choose one of material-community, simple-line-icon, zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo), iconStyle: object(style)}	none

---

iconContainerStyle

Styling for the outer icon container (optional)

Type	Default
object (style)	none

---

imageContainerStyle

Styling for the image (optional)

Type	Default
object (style)	none

---

imageSrc

Source for the image (required)

Type	Default
object (image)	none

---

onPress

Function to call when tile is pressed (optional)

Type	Default
function (event)	none

---

title

Text inside the tile (optional)

Type	Default
string	none

---

titleNumberOfLines

Number of lines for Title

Type	Default
number	none

---

titleStyle

Styling for the title (optional)

Type	Default
object (style)	none

---

width

Width for the tile (optional)

Type	Default
number	Device Width