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
activeOpacitycaptioncaptionStylecontainerStylecontentContainerStylefeaturedheighticoniconContainerStyleImageComponentimageContainerStyleimagePropsimageSrconPressoverlayContainerStyletitletitleNumberOfLinestitleStylewidth
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 |