Skip to main content
Version: 3.4.2

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

screen shot 2017-01-15 at 9 50 15 pm

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"
/>;

screen shot 2017-01-15 at 9 50 22 pm

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

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

Tile with Icon

screen shot 2017-01-15 at 9 50 34 pm

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


Reference

activeOpacity

Number passed to control opacity on press (optional)

TypeDefault
number0.2

caption

Text inside the tilt when tile is featured

TypeDefault
string OR React element or componentnone

captionStyle

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

TypeDefault
object (style)none

containerStyle

Styling for the outer tile container (optional)

TypeDefault
object (style)none

contentContainerStyle

Styling for bottom container when not featured tile (optional)

TypeDefault
object (style)none

Changes the look of the tile (optional)

TypeDefault
booleanfalse

height

Height for the tile

TypeDefault
numberDevice Width * 0.8

icon

Icon Component Props (optional)

TypeDefault
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)

TypeDefault
object (style)none

ImageComponent

Custom ImageComponent for Tile

TypeDefault
React component or elementBackgroundImage

imageContainerStyle

Styling for the image (optional)

TypeDefault
object (style)none

imageProps

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

TypeDefault
{...Image props}none

imageSrc

Source for the image (required)

TypeDefault
object (image)none

onPress

Function to call when tile is pressed (optional)

TypeDefault
function (event)none

overlayContainerStyle

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

TypeDefault
View style (object)none

title

Text inside the tile (optional)

TypeDefault
stringnone

titleNumberOfLines

Number of lines for Title

TypeDefault
numbernone

titleStyle

Styling for the title (optional)

TypeDefault
object (style)none

width

Width for the tile (optional)

TypeDefault
numberDevice Width