Tile

Tiles like Cards, are a convenient way to display related content about a single subject.

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

Usage

Featured Tile

import { Tile } from 'react-native-elements';

<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

import { Tile } from 'react-native-elements';

<Tile

imageSrc={require('./img/path')}

icon={{ name: 'play-circle', type: 'font-awesome' }}

featured

/>;

Tile with Icon

import { Tile } from 'react-native-elements';

<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
• ImageComponent
• imageContainerStyle
• imageProps
• imageSrc
• onPress
• overlayContainerStyle
• 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 OR React element or component	none

---

captionStyle

Styling for the caption (optional); You only use this if caption is a string

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 from supported icon sets), iconStyle: object(style)}	none

---

iconContainerStyle

Styling for the outer icon container (optional)

Type	Default
object (style)	none

---

ImageComponent

Custom ImageComponent for Tile

Type	Default
React component or element	BackgroundImage

---

imageContainerStyle

Styling for the image (optional)

Type	Default
object (style)	none

---

imageProps

Optional properties to pass to the image if provided e.g "resizeMode" (options)

Type	Default
{...Image props}	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

---

overlayContainerStyle

Styling for the overlay container when using featured tile (optional)

Type	Default
View style (object)	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

---