title: React Native Elements ListItem borderBottom Length Control
body: <p>I am trying to control the length of the BottomBorder on my ListItem, the listItem is rendered inside a List Component, going through the doc the only way i could found is through borderBottomStartRadius which is working and achieving the desired overall look. But it doesn't look perfect from UI point of view.</p>
  
  <p>Here a snippet from my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import {
      StyleSheet,
      View,
      Image,
      Text
  } from 'react-native';
  import {
      List,
      ListItem,
      Avatar,
      Header
  } from 'react-native-elements';
  
  
  class HomePage extends Component {
      render() {
          return (
              &lt;View style={styles.container}&gt;
                  &lt;Header
                      leftComponent={&lt;Image source={require('../../../images/avtar_logo.png')} /&gt;}
                      centerComponent={{ text: 'DAWI', style: { color: '#fff', fontSize: 20, fontWeight: '500', fontFamily: 'Roboto' } }}
                      rightComponent={{ icon: 'notifications', color: '#fff' }}
                      outerContainerStyles={{ backgroundColor: '#40beb3' }}
                      innerContainerStyles={{ justifyContent: 'space-between' }}
                  /&gt;
                  &lt;List containerStyle={{ marginTop: 0 }}&gt;
                      {
                          Data.map((section, index) =&gt; (
                              &lt;ListItem
                                  title={
                                      &lt;View style={styles.titleView}&gt;
                                          &lt;Text style={styles.titleText}&gt;{section.title}&lt;/Text&gt;
                                      &lt;/View&gt;}
                                  subtitle={
                                      &lt;View style={styles.subtitleView}&gt;
                                          &lt;Text style={styles.subtitleText}&gt;{section.subtitle}&lt;/Text&gt;
                                      &lt;/View&gt;
                                  }
                                  key={index}
                                  avatar={&lt;Avatar
                                      height={24}
                                      width={24}
                                      source={section.image}
                                      overlayContainerStyle={{ backgroundColor: colors.whiteBackground }}
                                  /&gt;}
                              /&gt;
                          ))
                      }
                  &lt;/List&gt;
              &lt;/View&gt;
          );
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/decPq.png" rel="nofollow noreferrer">How this look!</a></p>
  
  <p>If one looked carefully on the left end of Border, it look distorted cause of the radius behavior. Is there any other means i can control the border length?!</p>
  
  <p><strong>Update:</strong></p>
  
  <p><strong>Raised an <a href="https://github.com/react-native-training/react-native-elements/issues/1282" rel="nofollow noreferrer">issue</a> on react-native-elements GitHub and look like there is no build in solution available at the time been, there is a work around using <a href="https://facebook.github.io/react-native/docs/flatlist#itemseparatorcomponent" rel="nofollow noreferrer">ItemSeparatorComponent</a> prop from FlatList. If anyone could help implement this feature, please comment on the GitHub thread.</strong></p>