Rows

Row is a container that renders its children horizontally.

Small list item + Icon + Description Row example

API

Props

  • Row component doesn’t have specific (custom) Props, however, it supports every prop that the standard React Native View component supports. For full list of available props, visit React Native View component documentation

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%
    • notification-dot: applicable only for View components within Row. Pulls the notification dot to the left of the content
    • right-icon: applicable only for Button components within Row
    • top: applicable to any component nested within Row. Positions the component with top style to the beginning of Row component
    • vertical: applicable only for View components within Row. Adds a bottom margin below each View in Row

Examples

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

Small list item + Avatar thumbnail Row example

JSX Declaration

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

Small list item + Icon

Small list item + Icon Row example

JSX Declaration

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

Small list item + Icon + Right Arrow

Small list item + Icon + Right Arrow Row example

JSX Declaration

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

Small list item + Icon + Description

Small list item + Icon + Description Row example

JSX Declaration

<Row styleName="small">
  <Icon name="share" />
  <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

Small list item + Avatar + Description + Caption Row example

JSX Declaration

<Row>
  <Image
    styleName="small-avatar top"
    source={{ uri: 'http://shoutem.github.io/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: 'http://shoutem.github.io/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: 'http://shoutem.github.io/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

Medium list item + Description + Icon Row example

JSX Declaration

<Row>
  <Image
    styleName="small rounded-corners"
    source={{ uri: 'http://shoutem.github.io/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

Medium list item + Description + Icon + Label Row example

JSX Declaration

<Row>
  <Image
    styleName="small rounded-corners"
    source={{ uri: 'http://shoutem.github.io/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

Medium list item + Notification dot Row example

JSX Declaration

<Row>
  <View styleName="notification-dot" />
  <Image
    styleName="small rounded-corners"
    source={{ uri: 'http://shoutem.github.io/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: 'http://shoutem.github.io/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>