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 |