Version: Next

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#

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

Featured Tile with Icon#

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

featured#

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