title: Properly aligning a ListView in react-native
body: <p>I have a screen in my <code>react-native</code> app where I am showing details of a record. It's a pretty simple screen where on the left column, I have a label describing the item and on the right, I have the value of the item. For one of the values, I have to render a <code>ListView</code> and I am not able to properly align it. Below is the sample app on rnplay with the symptoms:</p>
  <p><a href="https://rnplay.org/apps/BRk--A" rel="nofollow noreferrer">Sample app on rnplay</a></p>
  <p>Please run on iOS. Here <code>ComponentListView</code> is a reusable component that I am using to render <code>ListView</code> and it takes a <code>component</code> and <code>data</code> as it props and render each entry in the <code>data</code> using the passed in <code>component</code>. Here the list is <code>BackupList</code> and the component to render in each row is <code>BackupSummary</code>. If you run the app, you will observe that the backups are not aligned properly. I ran it in the <code>Inspector</code> on the simulator and looks like the <code>ListView</code> starts from where <code>Varun Accepted</code> is seen. I am not sure why. Right now there is just one item in the <code>this.props.backupContacts</code> but there could be more. I have tried many different <code>flexbox</code> properties such as <code>alignItems, justifyContent, alignSelf</code> in order to get it to work with no success.</p>
  <p>Please let me know if you know how to fix it.</p>