title: How to present vertical separators on a horizontal `FlatList`?
body: <p><a href="https://i.stack.imgur.com/FrGk6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FrGk6.png" alt="enter image description here"></a></p>
  
  <p>I’m using React Native’s new <code>FlatList</code> component. I’m using it to present an <strong>horizontal</strong> list, but when using the built-in <code>ItemRenderComponent</code> it presents the separators <strong>beneath</strong> each items, instead of in between.</p>
  
  <p>Is there a way to change that?</p>
  
  <pre><code> interface State {
  dataSource: WhosOutByPolicy[];
  }
  
  interface Props {
   data: WhosOutByPolicy[];
  }
  
  class WhosOutParentCell extends Component&lt;Props, State&gt; {
    constructor(props: Props) {
      super(props);
  
      this.state = { dataSource: props.data };
  }
  
  renderSeparator = () =&gt; {
      return (
          &lt;View
              style={{
                  height: 100,
                  width: 3,
                  backgroundColor: "#D81458"
              }}
          /&gt;
      );
  };
  
  render() {
      return (
          &lt;View style={styles.container}&gt;
              &lt;FlatList
                  data={this.state.dataSource}
                  horizontal={true}
                  renderItem={({ item }) =&gt; (
                      &lt;WhosOutUsersInPolicyCell data={item} /&gt;
                  )}
                  keyExtractor={item =&gt; item.policyDispalyName}
                  ItemSeparatorComponent={this.renderSeparator}
              /&gt;
          &lt;/View&gt;
      );
     }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "#EFEFEF"
  }
  });
  
  export default WhosOutParentCell;
  </code></pre>