Answer by jasonleonhard for React Native FlatList with columns, Last item width
This is the cleanest way to style a FlatList with columns and spaced evenly: <FlatList style={{margin:5}} numColumns={2} // set number of columns columnWrapperStyle={style.row} // space them out...
View ArticleAnswer by Tùng Nguyễn for React Native FlatList with columns, Last item width
The reason for it is your Card have style flex: 1, so it will try to expand all the space remain. You can fix it by add maxWidth: '50%' to your Card style <View style={{ flex: 1, margin: 5,...
View ArticleAnswer by Emilius Mfuruki for React Native FlatList with columns, Last item...
for your case use flex: 1/2 therefore: Your item should have flex of 1/(number of columns) if you have 3 columns your item should have flex:1/3
View ArticleAnswer by Supriya C S for React Native FlatList with columns, Last item width
check whether the number of items is odd, if the number is odd, give a special style to the last item. eg) {this.props.count%2!= 0? <View style={this.props.entireList.indexOf(item) ===...
View ArticleAnswer by skyplor for React Native FlatList with columns, Last item width
You can try to get the current width of the device via Dimensions, do some math based on the number of columns you want to render, minus off the margins and set that as the minWidth and maxWidth. For...
View ArticleAnswer by Ryan Turnbull for React Native FlatList with columns, Last item width
Theres a few things you can try here. A) Setting a pre-defined width for the card ( Maybe equal to the height you've set? ). Then you can use alignItems in order to have the card positioned in the...
View ArticleClik here to view.
React Native FlatList with columns, Last item width
I'm using a FlatList to show a list of items in two columns <FlatList style={{margin:5}} data={this.state.items} numColumns={2} keyExtractor={(item, index) => item.id } renderItem={(item) =>...
View ArticleAnswer by Amit for React Native FlatList with columns, Last item width
@Emilius Mfuruki suggestion is good.But if have text with varying length it doesn't work perfectly.Thenconst {height, width} = Dimensions.get('window');const itemWidth = (width - (MarginFromTheSide * 2...
View ArticleAnswer by Jagdish Suryawanshi for React Native FlatList with columns, Last...
just use flex:0.5 and width:'50%'
View ArticleAnswer by Clapa Lucian for React Native FlatList with columns, Last item width
You can use ListFooterComponent={this.renderFooter}
View ArticleAnswer by Pratik Adhikari for React Native FlatList with columns, Last item...
Create an array with odd number of images in it, like:const images = [ require('./../...jpg'), require('./../...jpg'), require('./../...jpg'), require('./../...jpg'), require('./../...jpg'),];And then,...
View ArticleClik here to view.
Answer by Mateo Guzmán for React Native FlatList with columns, Last item width
I tried some of the solutions above but I still had some problems with the margins on the last item (2 columns list).My solution was simply wrapping the item into a parent container, leaving the...
View ArticleClik here to view.
Answer by hegonen for React Native FlatList with columns, Last item width
The simplest solution is do the math.Imagine we have 2 View for each Row and we want to give 10 margin to every side it will look something like that:As you see in the image above each View have 2...
View ArticleAnswer by Daniil8k for React Native FlatList with columns, Last item width
I also faced the same problem.So, you can just use this package.It prevents that problem and some others by default.Installation:npm install grid-flatlist-react-nativeUsage:import GridFlatList from...
View ArticleAnswer by Shahjahan Chaudhry for React Native FlatList with columns, Last...
A simple way with flex<FlatList style={{margin:5}} data={this.state.items} numColumns={2} keyExtractor={(item, index) => item.id } renderItem={({item, index}) => { const lastItem = index ===...
View Article--- Article Not Found! ---
*** *** *** RSSing Note: Article is missing! We don't know where we put it!!. *** ***
View ArticleClik here to view.
Answer by kamikazzi for React Native FlatList with columns, Last item width
If I want to make a layout of this genre how would you do it!?I tried with FlatlistnumColumns={3}columnWrapperStyle={{ flex: 1/3, justifyContent: 'space-between' }}But the last two are always one on...
View ArticleAnswer by Sem for React Native FlatList with columns, Last item width
I had a similar issue, and instead of fixing it with CSS flexbox, I simply push a null element to the array if the array's length is odd number.const data = [1,2,3];if (data.length % 2 > 0) {...
View ArticleClik here to view.
Answer by CrackerKSR for React Native FlatList with columns, Last item width
I don't know if it is efficient or not but works like charm.// I have 4 columnslet rem = column_count - images.length % column_count;let blanks = Array(rem).fill( {} )images.push(blanks);<Flatlist...
View ArticleAnswer by Ravi Dubey for React Native FlatList with columns, Last item width
Below code works perfectly fine, width will be stretched as screenwidth and row with only 1 item will also have same width, you canremove scale from every unit used in code wrapped with scale, andwidth...
View Article