Tile
A component with full size image and with text either inside the image or under the image along with customizable caption
This component was inspired from Shoutem UI by Shoutem. Check out Shoutem if you haven't already!
Featured Tile
<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
<Tile
imageSrc={require('./img/path')}
icon={{ name: 'play-circle', type: 'font-awesome' }}
featured
/>
Tile with Icon
<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
activeOpacity
caption
captionStyle
containerStyle
contentContainerStyle
featured
height
icon
iconContainerStyle
imageContainerStyle
imageSrc
onPress
title
titleNumberOfLines
titleStyle
width
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 | none |
captionStyle
Styling for the caption (optional)
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 one of material-community, simple-line-icon, zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo), 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 |
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 |
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 |