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

← Text Contributing →