React Native FlatList horizontal mode not working at all

Question

I am using React Native 0.44.0 and I am attempting to make a horizontal FlatList using a card style layout. For whatever reason, no matter what I do, I cannot get the horizontal mode to activate. It always seems to render vertically...

Here is the code I am using:

 <FlatList
    horizontal={true}
    data={this.state.newsFeed}
    refreshing={this.state.refreshing}
    ref={ref => {
        this.newsFeedListRef = ref;
    }}
    renderItem={this.renderNewsFeedRow.bind(this)}
    keyExtractor={(item, index) => `feed_${index}`}
    onRefresh={this.__handleNewsFeedOnRefresh.bind(this)}
    renderScrollComponent={this.renderScrollComponent.bind(this)}
    ListHeaderComponent={this.renderListHeaderComponent.bind(this)}
    getItemLayout={(data, index) => ({
        index,
        length: ITEM_HEIGHT,
        offset: ITEM_HEIGHT * index + headerBarHeight
    })} />;

I can post the code for my component renders but none of them use anything but padding and margins for style, so flex or flexDirection stuff.

Answer 1

Try use horizontal inside flatlist tag, not value, it work for me :D

<FlatList
    horizontal
    data={tab_ad}
    renderItem={(item) => this.renderItem(item.item)}
    keyExtractor={(item, index) => index}
    ={this.state}
/>

Answer 2

For anyone coming in off of a Google search, I figured it out. Turns out you can't render your own scroll component if you want to be able to dynamically change from horizontal to vertical or vice versa. So, if I take my previous code and comment out the call to renderScrollComponent, then it works... like so:

<FlatList
    data={this.state.newsFeed}
    refreshing={this.state.refreshing}
    horizontal={this.state.isHorizontal}
    ref={ref => { this.newsFeedListRef = ref; }}
    renderItem={this.renderNewsFeedRow.bind(this)}
    keyExtractor={(item, index) => `feed_${index}`}
    onRefresh={this.__handleNewsFeedOnRefresh.bind(this)}
    //renderScrollComponent={this.renderScrollComponent.bind(this)}
    ListHeaderComponent={this.renderListHeaderComponent.bind(this)}
    getItemLayout={(data, index) => ({ index, length: ITEM_HEIGHT, offset: (ITEM_HEIGHT * index) })} />

Also I can dynamically update the positioning like so. I add a function level const for calculating my item size like this:

const ITEM_SIZE = this.state.isHorizontal ? ITEM_HEIGHT : this.props.width;

Then I updated my getItemLayout function to look like this:

getItemLayout={(data, index) => ({ index, length: ITEM_SIZE, offset: ITEM_SIZE * index })} />