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