Separator/divider gets to hide in React Native App

Question

In my React Native Project, I am trying to make some kind of lists using Flatlist or sometimes using map method, for executing JSX Element. I am getting the result correctly, But there is a bit of a problem in separate.

Let's take chatting app example, When we open WhatsApp there are a lot of people showing up, but there is also a tiny separator after each item, That looks great, Now exactly when I try to put that separator in my React Native application using ItemSeparatorComponent attribute in Flatlist, It's working but still in some places, meaning in some items that separator not showing up, its looks missing, it feels that there is no border/separator. And actually what's going on is that, the below item from that separator which is hidden or which height looks smaller than others, that below View go a little bit towards the upside, so the separator gets to hide, That's the main problem, Why is that happening, I tried everything but still, I am getting that UI problem.

Here is a code example:

<FlatList
  data={actionSheet._data}
  showsVerticalScrollIndicator={false}
  showsHorizontalScrollIndicator={false}
  keyExtractor={(_, index) => index}
  renderItem={({item, index}) => <ActionSheetClickableItem data={item} index={index}/> }
  ItemSeparatorComponent={() => (
    <View
      style={{
        height: 1,
        width: '100%',
        backgroundColor: 'red'
      }}
    />
  )}
/>

OR

<ScrollView>
{
actionSheet._data.map((item, index) => (
  <>
   <ActionSheetClickableItem data={item} index={index} key={index}/>
   <View
     style={{
       height: 1,
       width: '100%',
       backgroundColor: 'red'
     }}
   />
  </>
))
  }
</ScrollView>

So according to the above code, I know for sure, that everything is correct, But why is that separator get hidden, If we look at this Picture in the area of the green rectangles, there is no border showing up, Why... I want to show it here, I tried to put zIndex property, that trick working correctly but that isn't the solution, It has to correct view as we expecting, why its behave like this, any solution??????

Answer 1

Use the below style for the divider

style={{
  width: '100%',
  borderBottomWidth: 1,
  borderColor: 'red,
}}