Thanks again, great suggestions 
First, a screenshot from element inspector:
I just tried adding
getItemLayout={(data, index) => (
{length: brandRowWidth, offset: brandRowWidth * index, index}
)}
but alas, to no avail 
Same for setting maxWidth:200 on the row container style.
I’m sorry for the following wall-of-code, but I think all of it is necessary to give a clear picture of what I’m doing. There’s a list which renders another list in it’s header.
The containing list is plain and simple, looks something this:
class CampaignList extends React.Component<ICampaignListProps> {
...
renderHeader = () => {
return this.props.availableCampaignsData.length > 0 ? (
<BrandList
brandData={this.props.availableCampaignsData}
onPress={this.props.onAvailableCampaignItemPressed}
chosenCampaignFilter={this.props.chosenCampaignFilter}
/>
) : (
<View />
);
};
render() {
return (
<View style={styles.container}>
<FlatList
...
ListHeaderComponent={this.renderHeader}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
The list in the header, BrandList, is equally straight forward:
class BrandList extends React.Component<IBrandListProps> {
renderRow = ({ item }) => {
return (
<BrandRow
item={item}
onPress={this.props.onPress}
chosenCampaignFilter={this.props.chosenCampaignFilter}
/>
);
};
...
render() {
return (
<View style={styles.container}>
<FlatList
renderItem={this.renderRow}
horizontal={true}
contentContainerStyle={{ flex: 1, justifyContent: 'center' }}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
height: dimens.BRAND_LIST_HEIGHT,
backgroundColor: '#f7fafa',
},
});
And finally, the row component itself:
class BrandRow extends React.Component<IBrandRowProps> {
render() {
const { name, logo } = this.props.item.organization;
return (
<TouchableOpacity
onPress={this.onPress}
>
<View style={styles.container}>
<View style={styles.logobackground}>
<Image source={{ uri: logo }} style={styles.logo} />
</View>
<Text
ellipsizeMode={'tail'}
numberOfLines={1}
style={[globalSheet.breadText, styles.logoText]}
>
{name}
</Text>
</View>
</TouchableOpacity>
);
}
}
const logoSize = dimens.BRAND_LIST_HEIGHT * 0.65;
const brandRowWidth = screenDimens.width * 0.15;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
width: brandRowWidth,
marginHorizontal: 2,
marginTop: dimens.BRAND_LIST_HEIGHT * 0.1,
},
logo: {
height: logoSize,
width: logoSize,
borderRadius: logoSize / 2,
},
logobackground: {
// borderRadius: logoSize / 2,
// borderWidth: 2,
// borderColor: 'white',
},
logoText: {
fontSize: 7,
},
});
Utilities:
import { Dimensions } from 'react-native';
const screenDimens = {
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
};
export { screenDimens };
Common style:
BRAND_LIST_HEIGHT: screenDimens.height * 0.12,
