CODEWITHSUNDEEP
flexboxreact-native
Varun Gupta
Varun Gupta

Reputation: 3112

Properly aligning a ListView in react-native

I have a screen in my react-native 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 ListView and I am not able to properly align it. Below is the sample app on rnplay with the symptoms:

Sample app on rnplay

Please run on iOS. Here ComponentListView is a reusable component that I am using to render ListView and it takes a component and data as it props and render each entry in the data using the passed in component. Here the list is BackupList and the component to render in each row is BackupSummary. If you run the app, you will observe that the backups are not aligned properly. I ran it in the Inspector on the simulator and looks like the ListView starts from where Varun Accepted is seen. I am not sure why. Right now there is just one item in the this.props.backupContacts but there could be more. I have tried many different flexbox properties such as alignItems, justifyContent, alignSelf in order to get it to work with no success.

Please let me know if you know how to fix it.

Upvotes: 0

Views: 1062

Answers (1)

Abhishek
Abhishek

Reputation: 1714

Put your ListView inside a View and apply css on View, something like this

<View style={{display:'flex', flexDirection:'row', justifyContent:'center'}}>
      <ListView/>
</View>

Upvotes: 4

Related Questions