Inconsistent separator lines
Open
Nobody has claimed this yet.
Issue: Author Provided Repro
Needs: Author Feedback
Newer Patch Available
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
Description
The thickness of the separator lines in FlatList is inconsistent on android. Here's another issue related to the separator: GitHub Issue.
Steps to reproduce
Add a separator to a FlatList with hairlineWidth or 1.
React Native Version
0.73.6
Affected Platforms
Runtime - Android
Output of npx react-native info
Expo 51 from snack.
Stacktrace or Logs
import React from 'react';
import {
SafeAreaView,
View,
FlatList,
StyleSheet,
Text,
StatusBar,
} from 'react-native';
const DATA = [...Array(100).keys()]
const Separator = () => <View style={{ height: StyleSheet.hairlineWidth, backgroundColor: '#000' }} />
const Item = ({title}) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const App = () => {
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={({item}) => <Item title={item} />}
ItemSeparatorComponent={Separator}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: 'white',
padding: 12,
},
title: {
fontSize: 20,
},
});
export default App;
Reproducer
https://snack.expo.dev/@diegolmello/f6c27a
Screenshots and Videos
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the FlatList ItemSeparatorComponent behavior on Android, using the provided Expo Snack reproducer with StyleSheet.hairlineWidth and a 1-pixel separator. Compare the rendered separator thickness across the list and determine what consistent output should look like; the issue does not name implementation files or tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100