I’m using React Native’s new FlatList
component. I’m using it to present an horizontal list, but when using the built-in ItemRenderComponent
it presents the separators beneath each items, instead of in between.
Is there a way to change that?
interface State {
dataSource: WhosOutByPolicy[];
}
interface Props {
data: WhosOutByPolicy[];
}
class WhosOutParentCell extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = { dataSource: props.data };
}
renderSeparator = () => {
return (
<View
style={{
height: 100,
width: 3,
backgroundColor: "#D81458"
}}
/>
);
};
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.dataSource}
horizontal={true}
renderItem={({ item }) => (
<WhosOutUsersInPolicyCell data={item} />
)}
keyExtractor={item => item.policyDispalyName}
ItemSeparatorComponent={this.renderSeparator}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#EFEFEF"
}
});
export default WhosOutParentCell;
It is a
react-native
bug that is not fixed yet. You can rewrite your code as blow to solve this problem: