Unable to display SwipeRows of variable height

[zamiang]

I am in the process of transitioning a react native 0.29 ListView to your SwipeListView.

I've noticed that due to properties on a container I cannot style, the list items are all of equal height.

ListView on the left, SwipeListView on the right.

Happy to help out here -- maybe passing style down the chain? -- but i'm not sure where to start.

Thanks

[jemise111]

Hey @zamiang happy to look into this but I think I'm missing the issue. The first two items look like they're of equal height. The third item looks larger on the right but it's not equal to the height of any other items. So is the issue that the height of the third item is unexpectedly larger?

If you could provide some snippets of code for the ListView and SwipeListView that would be really helpful.

Also if you'll take a look at this line:

https://github.com/jemise111/react-native-swipe-list-view/blob/master/components/SwipeListView.js#L104

you'll see that any props you pass to the SwipeListView are passed to the underlying ListView, meaning a style or contentContainerStyle prop will be passed along and you can style the container as you need.

[zamiang]

Thanks! Here is a bit more detail. TLDR - All rows have flex: 1 applied in a way that I cannot override. https://github.com/jemise111/react-native-swipe-list-view/blob/master/components/SwipeRow.js#L250

Color key:

• yellow is background of the the SwipeListView
• purple and gray are alternating backgrounds of a component passed to renderRow

I believe the correct fix would be to allow passing custom styles to the SwipeRow (similar to the SwipeListView) rather than removing that line.

[jemise111]

@zamiang Okay so without your code to run and I can't really test if this will fix your problem. But when checkout this PR, #40, when you have a sec and let me know if it fixes your issue. Then I'll merge and release a new version. Thanks!

[zamiang]

That looks great! Thanks so much.

I have gained a bit more insight into the root issue. React-native 0.28 made changes to how flex: 1 vs flex: 0 works. I have been seeing similar pull requests / issues with other projects. In the release notes you will see this note:

"flex styling property behavior now behaves slightly differently. If you previously used flex: 1 where not necessary this change will likely break your layout as the measuring behavior is slightly different than before due to performance optimizations. Removing that unnecessary flex: 1 will solve your layout in most cases."

That note suggests that just removing the flex: 1 declaration would fix the issue -- and remove the need (in this case!) for styling the SwipeRow (though that may be a good thing for the project anyway)

[jemise111]

@zamiang I merged in the PR to allow for passing in styles. I'll do a release over the weekend. Good call on the flex: 1 issue, I'll take a look and see if it makes sense to remove it. Leaving this open until then. Thanks!

[jemise111]

Removed flex: 1, closing. Fixed by #40 and #43

[zamiang]

Thanks!