DEV Community

Vaibhav Shukla
Vaibhav Shukla

Posted on

Flat list horizontal all Items perfectly visible in iOS not in android ContentContainerStyle

#reactnative #javascript #flatlist

Here is A Code

 <FlatList horizontal={isHorizontal} contentContainerStyle={{ // width: isHorizontal ? 274 : '100%', paddingHorizontal:10 }} overScrollMode="never" style={styles.frameGroup} data={[1, 2, 3, 4, 5]} renderItem={renderItem2} ItemSeparatorComponent={ <View style={{ width: isHorizontal ? 24 : 0, height: !isHorizontal ? 60 : 0, }} /> } />
Enter fullscreen mode Exit fullscreen mode

UI View :
Image description

Expected View :

Image description

Here is Code after removing width from contentContainer style

import React from 'react'; import { FlatList, View, Text, StyleSheet, Dimensions } from 'react-native'; const data = [...Array(10).keys()].map((_, i) => ({ id: i, name: `Item ${i + 1}` })); const ITEM_WIDTH = 100; const YourComponent = ({ item }) => ( <View style={styles.item}> <Text>{item.name}</Text> </View> ); const App = () => { return ( <FlatList data={data} horizontal keyExtractor={(item) => item.id.toString()} renderItem={({ item }) => <YourComponent item={item} />} showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingHorizontal: 10 }} ItemSeparatorComponent={() => <View style={{ width: 10 }} />} getItemLayout={(data, index) => ({ length: ITEM_WIDTH, offset: ITEM_WIDTH * index, index, })} /> ); }; const styles = StyleSheet.create({ item: { width: ITEM_WIDTH, height: 100, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0', marginHorizontal: 5, }, }); export default App;
Enter fullscreen mode Exit fullscreen mode

Why It Works After Commenting width:

  • The FlatList dynamically calculates the width of the content based on its children.
  • No padding offsets are added, so there's no risk of incorrect scrollable area calculation.
  • As a result, horizontal scrolling works as expected.

Top comments (0)