CODEWITHSUNDEEP
react-nativereact-native-flatlist
ofer2980
ofer2980

Reputation: 474

How to present vertical separators on a horizontal `FlatList`?

enter image description here

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;

Upvotes: 2

Views: 9751

Answers (1)

Vahid Boreiri
Vahid Boreiri

Reputation: 3438

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>
  )
}

Upvotes: 7

Related Questions