CODEWITHSUNDEEP
react-native
ThinkAndCode
ThinkAndCode

Reputation: 1667

Inconsistent width of separator while displaying list items

Following is the code to display list items with separators

</View>
  <Text style={{padding: 10}}>List Item</Text>
  <View style={{height: StyleSheet.hairlineWidth, backgroundColor: 'grey'}} />
</View>

(Kindly assume that I have repeated above piece of code multiple times to get the list view appearence)

there is some inconsistency in separators

enter image description here

this issue had already been posted in stack overflow and in github, but there hasn't been any permanent fix for this issue and it's been almost 2 years since these issue has been posted.

So, I just want to know that has anybody found permanent fix for this in recent times.

Upvotes: 1

Views: 713

Answers (4)

Adrian Buciuman
Adrian Buciuman

Reputation: 325

I see that this is an old post. But I still faced this issue. I fixed it by setting the item from Flatlist to have the same backgroundColor with contentContainerStyle

  <FlatList
        ...
        contentContainerStyle={{
          backgroundColor: 'white',
        }}
        renderItem={({ item }) => (
            </View style={{backgroundColor: 'white'}}>
                <Text style={{padding: 10}}>List Item</Text>
            </View>
          )
        }
      />

Upvotes: 0

topherPedersen
topherPedersen

Reputation: 671

I found that this is a bug in React-Native for Android where React-Native renders a separator for the bottom of one FlatList item, and then a second separator for the top of the next FlatList item, when the FlatList should really only render one separator between each FlatList item. I figured this out when I added marginVertical: 1 to my ItemSeparatorComponent and noticed the two distinct separators in between each FlatList item. The fix I found was to set my ItemSeparatorComponent height to 2 pixels, and then set marginVertical to -1 pixel:

      <FlatList
        data={companyGrowthRankings}
        renderItem={renderItem}
        keyExtractor={item => `${Math.random()}`}
        ItemSeparatorComponent={() => <View style={{ width: windowWidth, height: 2, marginVertical: -1, backgroundColor: lessBlack }}></View>}
      />

Upvotes: 0

alexmngn
alexmngn

Reputation: 9617

One solution I found that works usually well enough is to add a small margin to the divider.

const styles = StyleSheet.create({
  divider: {
    borderBottomColor: '#ccc',
    borderBottomWidth: StyleSheet.hairlineWidth,
    marginVertical: 1,
  },
});

return <View style={styles.divider} />

Upvotes: 1

bennygenel
bennygenel

Reputation: 24680

As far as I know this is an issue related to emulators and IOS simulator because of scaling. This is just a visual mispresentation. I don't think it would happen on a real device.

Try your code with a real device or if its possible try with no scaling with device emulators or simulators.

Upvotes: -1

Related Questions