Skip to content

[BUG] FlatList ItemSeparatorComponent not work correctly. #14661

@ghost

Description

Description

When I set horizontal true for FlatList, ItemSeparatorComponent is added vertically. Please fix this bug. Thanks

Sample Code

import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';

class App extends React.Component {
    constructor() {
        super();

        const arr = [];
        for(let i=0; i<100; i++)
            arr.push({key: i, value: i});
        this.state = {data: arr};
    }

    render() {
        return (
            <View style={ styles.container }>
                <FlatList
                    horizontal
                    ItemSeparatorComponent={ () => <View style={ { width: 10, height: 10, backgroundColor: 'red' } } /> }
                    data={ this.state.data }
                    renderItem={ (rowData) => <Text>{ rowData.item.value }</Text> }
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

screen

Additional Information

  • React Native version: 0.45.1
  • React: 16.0.0-alpha.12
  • Platform: ios. not checked android.
  • Development Operating System: macOS
  • Build tools: WebStorm

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions