Listitem top and bottom border properties issue

[F0ofoon]

Implemented a ListItem but the borders sometimes randomly doesn't show.

Expected behavior

Describe the bug

There is no border between the two first elements. This bug happend throughout many projects.

Your Environment (please complete the following information):

software	version
react-native-elements	1.2.7
react-native	0.61.5

[flyingcircle]

Can you try running on latest version. If this is still happening on the latest version please let me know, but I can't reproduce this.

[flyingcircle]

I found out that the issue has to do with how RN/iOS/Android is placing items on the screen. The bottom border is set by using:
borderBottomWidth: StyleSheet.hairlineWidth

However it seems that every so often, RN draws a component ever so slightly 1 or 2 pixels off thus covering up the border line. So the only way that I have seen to fix this is to add:
style={{padding: StyleSheet.hairlineWidth}} to ListItem.

[M-Jas]

@flyingcircle are you seeing this behavior on the Simulator or a Device? Or Both? I noticed this behavior once or twice before on the simulator, but on the device it was magically gone. I chalked it up to a drawing issue with debug on simulators.

[F0ofoon]

@M-Jas I saw the issue on Android both simulator and real device.

[pranshuchittora]

I am able to reproduce the issue successfully. So the issue is with the rendering pipeline, on the scroll the lines appear and disappear.
This thread might help => facebook/react-native#22927 (comment)

Tried the padding fix, unfortunately not working.

[pranshuchittora]

A workaround, for the time being, is to set the width to StyleSheet.hairlineWidth * 2 which decreases the change of such issue drastically.

cc @flyingcircle @iRoachie