Rows

Row is a container that renders its children horizontally.

API

Props

Row has no 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

JSX Declaration

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

Small list item + Icon

JSX Declaration

<Row styleName="small">
  <Icon name="add-to-favorites-off" />
  <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="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

JSX Declaration

<Row>
  <Image
    styleName="small-avatar top"
    source={{ uri: 'https://shoutem.github.io/img/ui-toolkit/examples/image-11.png' }}
  />
  <View styleName="vertical">
    <View styleName="horizontal space-between">
      <Subtitle>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://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: 'https://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

JSX Declaration

<Row>
  <Image
    styleName="small rounded-corners"
    source={{ uri: 'https://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

JSX Declaration

<Row>
  <Image
    styleName="small rounded-corners"
    source={{ uri: 'https://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

JSX Declaration

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