title: React Native: Correct scrolling in horizontal FlatList with Item Separator
body: <p>ReactNative: <code>v0.52.0</code></p>
  
  <p>Platform: <code>iOS</code></p>
  
  <p>My <code>FlatList</code> code:</p>
  
  <pre><code>&lt;FlatList
    horizontal
    pagingEnabled={true}
    showsHorizontalScrollIndicator={false}
  
    legacyImplementation={false}
  
    data={this.props.photos}
    renderItem={item =&gt; this.renderPhoto(item)}
    keyExtractor={photo =&gt; photo.id}
  
    ItemSeparatorComponent={this.itemSeparatorComponent}
  /&gt;
  </code></pre>
  
  <p>Item separator code:</p>
  
  <pre><code>itemSeparatorComponent = () =&gt; {
      return &lt;View style = {
          {
              height: '100%',
              width: 5,
              backgroundColor: 'red',
          }
      }
      /&gt;
  }
  </code></pre>
  
  <p>And finally <code>FlatList</code> item component:</p>
  
  <pre><code>renderPhoto = ({ item, index }) =&gt; {
      return (
          &lt;View style = {{ width: SCREEN_WIDTH, height: 'auto' }}&gt;
            &lt;FastImage 
              style = { styles.photo }
              resizeMode = { FastImage.resizeMode.contain }
              source = {{ uri: item.source.uri }}
            /&gt; 
          &lt;/View&gt;
      )
  }
  </code></pre>
  
  <p>But when scrolling, the <code>FlatList</code> makes an offset to the separator but not to the left edge of item:</p>
  
  <p><a href="https://i.stack.imgur.com/jRuB0l.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jRuB0l.png" alt="enter image description here"></a></p>
  
  <p>And with each new element the <code>FlatList</code> adds the width of the all previous separators to offset:</p>
  
  <p><a href="https://i.stack.imgur.com/7RNpMl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7RNpMl.png" alt="enter image description here"></a></p>
  
  <p>How to make the <code>FlatList</code> component consider the width of the separator component in horizontal scrolling and make proper offset?</p>