how to create an inline facepile with shoutem/ui and react native

Question

How do I create an inline row of images in shoutem/ui? Right now they show up as block elements, each with its own row. Instead I want to show them as a centered row of avatar images.

http://shoutem.github.io/docs/ui-toolkit/components/image

<Tile>
  <Parallax driver={this.driver} scrollSpeed={1.2}>

    <Title styleName="md-gutter-top">{post.name}</Title>
    <Caption>{post.title}</Caption>
    <View>
      <Image
        styleName="small-avatar"
        source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
      />
      <Image
        styleName="small-avatar"
        source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
      />
      <Image
        styleName="small-avatar"
        source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
      />
      <Image
        styleName="small-avatar"
        source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
      />
    </View>

  </Parallax>
</Tile>

Answer 1

So I just needed to look at the default styles that shoutem includes as part of it's view. https://shoutem.github.io/docs/ui-toolkit/components/view

In this case

<View styleName="horizontal">

so like this

 <View styleName="horizontal">
      <Image
        styleName="small-avatar"
        source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
      />
      <Image
        styleName="small-avatar"
        source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
      />
      <Image
        styleName="small-avatar"
        source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
      />
      <Image
        styleName="small-avatar"
        source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-3.png'}}
      />
    </View>