Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to align items in FlastList with maximum width?

$
0
0

I have read a lot of similar questions here but I can't still align items in FlatList to the center horizontally. Below is my component:

const renderItem = ({item}: ListRenderItemInfo<Post>) => (<NewsPost title={item.msg} style={styles.listItem} />)const HomeScreen = ({injector}: Props) => {  // Some code  return (<SafeAreaView style={styles.frame}><FlatList        style={styles.list}        contentContainerStyle={styles.listContent}        data={data?.posts}        renderItem={renderItem}        keyExtractor={item => item.id.toString()}        onEndReachedThreshold={0.1}        onEndReached={loadData}      /></SafeAreaView>  )}const styles = StyleSheet.create({  frame: {    flex: 1,  },  list: {    width: '100%',    overflow: 'visible',  },  listContent: {    flexGrow: 1,    justifyContent: 'space-around',  },  listItem: {    maxWidth: 600,  },})

And how it looks on device:

Screenshot

How to align items to the center with a maximum width?

P.S. I've tried marginHorizontal: 'auto' but it didn't help.


Viewing all articles
Browse latest Browse all 6287

Trending Articles