How can you create a scrollable square grid with two columns of squares in a FlatList using react-native and ensure it is responsive to different screen sizes?
Which CSS properties in react-native are necessary to achieve square shapes for each <Item/> within the FlatList?
I attempted to use aspectRatio without success.
While setting paddingTop : '50%' works for full rows, it does not work for the bottom as demonstrated here:
import React from 'react'
import {View, FlatList, StyleSheet, Dimensions} from 'react-native'
const screen_length = Math.max(Dimensions.get('window').height, Dimensions.get('window').width)
const screen_width = Math.min(Dimensions.get('window').height, Dimensions.get('window').width)
const length_factor = screen_length/844
const width_factor = screen_width/390
const StyleSheet.create.({
container:{
display: 'flex',
flex:1,
justifyContent: 'center',
justifyItems: 'center',
alignItems: 'center',
alignContent: 'center',
width: '100%',
height:'100%',
flexDirection: '100%'
},
square:{
flex:1 ,
aspectRatio: 1,
backgroundColor: 'blue',
borderColor: 'yellow',
borderWidth: 5,
borderRadius: 10,
width:Math.round( width_factor * 150),
paddingTop:'50%',
}
})
const DATA = [ {id: 1}, {id:2} , {id: 3} ]
const Item = ({item}) => {
<View style = {styles.square} />
}
export default function Test() {
renderItem = ({item})=> {
return(
<Item />
)
}
return(
<FlatList
data = {DATA}
renderItem = {renderItem}
keyExtractor = {item => item.theme}
numColumns = {2}
style ={{flex:1, width:'100%', height: '100%'}}
contentContainerStyle = {styles.container}
/>
)
}