How to present vertical separators on a horizontal `FlatList`? - react-native

Question

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;

Answer 1

It is a react-native bug that is not fixed yet. You can rewrite your code as blow to solve this problem:
renderSeparator = () => {
return (
<View
style = {{
height: 100,
width: 3,
backgroundColor: '#D81458'
}}
/>
)
}
_renderItem = ({item, index}) => (
<View style={{flexDirection: 'row'}}>
<WhosOutUsersInPolicyCell data = { item } />
{(index !== this.state.dataSource.length - 1) && this.renderSeparator()}
</View>
)
render() {
return (
<View style = { styles.container } >
<FlatList
data = { this.state.dataSource }
horizontal = { true }
renderItem = {this._renderItem}
keyExtractor = { item => item.policyDispalyName }
/>
</View>
)
}