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!
<Tile
imageSrc={{require: ('./img/path')}}
title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores dolore exercitationem"
featured
caption="Some Caption Text"
/>
<Tile
imageSrc={{require: ('./img/path')}}
icon={{name: 'play-circle', type: 'font-awesome'}}
featured
/>
<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>| prop | default | type | description |
|---|---|---|---|
| icon | none | 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)} | Icon Component Props (optional) |
| iconContainerStyle | none | object (style) | Styling for the outer icon container (optional) |
| title | none | string | Text inside the tile (optional) |
| titleStyle | none | object (style) | Styling for the title (optional) |
| titleNumberOfLines | none | number | Number of lines for Title |
| caption | none | string | Text inside the tilt when tile is featured |
| captionStyle | none | object (style) | Styling for the caption (optional) |
| featured | false | boolean | Changes the look of the tile (optional) |
| containerStyle | none | object (style) | Styling for the outer tile container (optional) |
| imageSrc | none | object (image) | Source for the image (required) |
| imageContainerStyle | none | object (style) | Styling for the image (optional) |
| onPress | none | function (event) | Function to call when tile is pressed (optional) |
| activeOpacity | 0.2 | number | Number passed to control opacity on press (optional) |
| contentContainerStyle | none | object (style) | Styling for bottom container when not featured tile (optional) |
| width | Device Width | number | Width for the tile (optional) |
| height | Device Width * 0.8 | number | Height for the tile |