Menu
I want to change width and height of <FlatList />.
I set the height style to the current <FlatList /> but it never worked.
I can change the height of <FlatList /> in no way.
This is my render() function and styles.
render() { const listData = []; listData.push({ key: 0 }); listData.push({ key: 1 }); listData.push({ key: 2 }); listData.push({ key: 3 }); listData.push({ key: 4 }); return ( <View style={styles.container}> <FlatList data={listData} renderItem={({item}) => { return ( <View style={{ width: 30, height: 30, borderRadius: 15, backgroundColor: 'green' }} /> ) }} horizontal style={styles.flatList} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white' }, flatList: { height: 50, backgroundColor: 'red' } }); And this is result of this code.
I found the answers for several hours but nothing helped me.
I am not sure why height style is not working.
Any help is appreciated.
692
You can give the item itself a width value of 45% . Also, flatlist has a property called columnWrapperStyle that you can give the value justifyContent: 'space-between . Docs: Rendered in between each item, but not at the top or bottom. Just add some margin to the style of the list Item.
To add a horizontal FlatList in React Native, we just set the horizontal prop of the FlatList to true . to add horizontal to FlatList . As a result, we can scroll through the FlatList items horizontally.
Without setting this prop, FlatList would not know it needs to re-render any items because it is a PureComponent and the prop comparison will not show any changes. keyExtractor tells the list to use the id s for the react keys instead of the default key property.
Use basic components The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
Set the height of <View/> and place <FlatList/> inside that <View/>
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
