Rows

Components rendered within lists are usually implemented using the row container. Row is a container that renders its children horizontally.

Small list item

Small list item Row example

JSX Declaration

<Row>
  <Text numberOfLines={1}>Portland ugh fashion axe Helvetica, YOLO Echo Party</Text>
</Row>

Small list item + Avatar thumbnail

JSX Declaration

<Row styleName="small">
  <Image
    styleName="small-avatar"
    source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-9.png' }}
  />
  <Text>Add comment</Text>
</Row>

Small list item + Icon

JSX Declaration

<Row styleName="small">
  <Icon name="star" />
  <Text>Add to favorites</Text>
</Row>

Small list item + Icon + Right Arrow

JSX Declaration

<Row styleName="small">
    <Icon name="web" />
    <Text>About</Text>
    <Icon styleName="disclosure" name="right-arrow" />
</Row>

Small list item + Icon + Description

JSX Declaration

<Row styleName="small">
  <Icon name="laptop" />
  <View styleName="vertical">
    <Subtitle>Bridges Rock Gym</Subtitle>
    <Text numberOfLines={1}>www.example.com/deal/link/that-is-really-long</Text>
  </View>
  <Icon styleName="disclosure" name="right-arrow" />
</Row>

Small list item + Avatar + Description + Caption

JSX Declaration

<Row>
  <Image
    styleName="small-avatar top"
    source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-11.png' }}
  />
  <View styleName="vertical">
    <View styleName="horizontal space-between">
      <Subtitle styleName="">Dustin Malone</Subtitle>
      <Caption>20 minutes ago</Caption>
    </View>
    <Text styleName="multiline">Banjo tote bag bicycle rights, High Life sartorial cray craft beer whatever street art fap. Hashtag typewriter banh mi, squid keffiyeh High.</Text>
  </View>
</Row>

Medium list item

Medium list item Row example

JSX Declaration

<Row>
  <Image
    styleName="small rounded-corners"
    source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-10.png' }}
  />
  <Subtitle styleName="top">Portland ugh fashion axe Helvetica, YOLO Echo Park Austin gastropub roof party.</Subtitle>
</Row>

Medium list item + Description

Medium list item + Description Row example

JSX Declaration

<Row>
  <Image
    styleName="small rounded-corners"
    source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-6.png' }}
  />
  <View styleName="vertical stretch space-between">
    <Subtitle>Fact Check: Wisconsin Music, Film & Photography Debate</Subtitle>
    <Caption>20 hours ago</Caption>
  </View>
</Row>

Medium list item + Description + Icon

JSX Declaration

<Row>
  <Image
    styleName="small rounded-corners"
    source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-3.png' }}
  />
  <View styleName="vertical stretch space-between">
    <Subtitle>Wilco Cover David Bowie&#39;s "Space Oddity"</Subtitle>
    <Caption>June 21  ·  20:00</Caption>
  </View>
  <Button styleName="right-icon"><Icon name="add-event" /></Button>
</Row>

Medium list item + Description + Icon + Label

JSX Declaration

<Row>
  <Image
    styleName="small rounded-corners"
    source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-11.png' }}
  />
  <View styleName="vertical stretch space-between">
    <Subtitle>Family Safari Vacation To The Home Of The Gods</Subtitle>
    <View styleName="horizontal">
      <Subtitle styleName="md-gutter-right">$120.00</Subtitle>
      <Caption styleName="line-through">$150.00</Caption>
    </View>
  </View>
  <Button styleName="right-icon"><Icon name="add-to-cart" /></Button>
</Row>

Medium list item + Notification dot

JSX Declaration

<Row>
  <View styleName="notification-dot" />
  <Image
    styleName="small rounded-corners"
    source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-2.png' }}
  />
  <View styleName="vertical stretch space-between">
    <Subtitle>Fact Check: Wisconsin Music, Film & Photography Debate</Subtitle>
    <Caption>20 hours ago</Caption>
  </View>
</Row>

Medium list item + Description + Label

Medium list item + Description + Label Row example

JSX Declaration

<Row>
  <Image
    styleName="medium rounded-corners"
    source={{ uri: 'https://myark.github.io/shoutem-cn/img/ui-toolkit/examples/image-1.png' }}
  />
  <View styleName="vertical stretch space-between">
    <Subtitle>Take A Romantic Break In A Boutique Hotel</Subtitle>
    <View styleName="horizontal space-between">
      <Caption>3 days ago</Caption>
      <Caption>12:16</Caption>
    </View>
  </View>
</Row>

Style names

small: sets the fixed height of Row to 65px

Nested components can also use these Style names:

disclosure: applicable only for Icon components within Row. Pulls the icon to the right, and sets opacity to 50%.
right-icon: applicable only for Button components within Row
notification-dot: applicable only for View components within Row. Pulls the notification dot to the left of the content.
vertical: applicable only for View components within Row. Adds a bottom margin below each View in Row.