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 Tileimport { 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 Iconimport { Tile } from 'react-native-elements';
<Tile imageSrc={require('./img/path')} icon={{ name: 'play-circle', type: 'font-awesome' }} featured/>;
#
Tile with Iconimport { 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>;
#
PropsAlso receives all TouchableNativeFeedback (Android) or TouchableOpacity (iOS) props
activeOpacity
caption
captionStyle
containerStyle
contentContainerStyle
featured
height
icon
iconContainerStyle
imageContainerStyle
imageProps
imageSrc
onPress
overlayContainerStyle
title
titleNumberOfLines
titleStyle
width
ImageComponent
#
ReferenceactiveOpacity
#
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 |
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 |
ImageComponent
#
Custom ImageComponent for Tile
Type | Default |
---|---|
React component or element | BackgroundImage |