Your bookmarks

Tile / React Native

Also known as Clickable Card

When you need to wrap your content into something clickable.

To implement Tile component into your project you’ll need to the import at least the Tile:

import { Tile } from '@kiwicom/orbit-react-native';

After adding import into your project you can use it simply like:

<Tile title="Title" />


Table below contains all types of the props available in Tile component.

Name Type Platform Default Description
dataTest string web/native Optional prop for testing purposes.
description string web/native The content of the Tile.
external boolean web false If true, the Tile opens link in a new tab. See Functional specs
href string web The URL of the link to open when Tile is clicked. See Functional specs
icon React$Node web/native Displayed icon on the left side of the Tile.
onClick event => void | Promise web/native Function for handling onClick event.
title React$Node web/native The title of the Tile.
children React$Node web/native Content of expanded tile
initialExpanded boolean web/native Default state of expandable. See Functional specs

Functional specs

  • When the external is specified, noopener and noreferrer values will automatically added to attribute rel for security reason.
  • By passing the href prop into Tile, it will render into a element.
  • By passing children and not defining href, the Tile will be expandable. You can set default visibility of content by property expanded