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

Here is A Code

<FlatList
horizontal={isHorizontal}
contentContainerStyle={{
// width: isHorizontal ? 274 : ‘100%’,
paddingHorizontal:10
}}
ov…


This content originally appeared on DEV Community and was authored by Vaibhav Shukla

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,
                        }}
                    />
                }
            />

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;

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.


This content originally appeared on DEV Community and was authored by Vaibhav Shukla


Print Share Comment Cite Upload Translate Updates
APA

Vaibhav Shukla | Sciencx (2025-01-14T02:36:33+00:00) Flat list horizontal all Items perfectly visible in iOS not in android ContentContainerStyle. Retrieved from https://www.scien.cx/2025/01/14/flat-list-horizontal-all-items-perfectly-visible-in-ios-not-in-android-contentcontainerstyle/

MLA
" » Flat list horizontal all Items perfectly visible in iOS not in android ContentContainerStyle." Vaibhav Shukla | Sciencx - Tuesday January 14, 2025, https://www.scien.cx/2025/01/14/flat-list-horizontal-all-items-perfectly-visible-in-ios-not-in-android-contentcontainerstyle/
HARVARD
Vaibhav Shukla | Sciencx Tuesday January 14, 2025 » Flat list horizontal all Items perfectly visible in iOS not in android ContentContainerStyle., viewed ,<https://www.scien.cx/2025/01/14/flat-list-horizontal-all-items-perfectly-visible-in-ios-not-in-android-contentcontainerstyle/>
VANCOUVER
Vaibhav Shukla | Sciencx - » Flat list horizontal all Items perfectly visible in iOS not in android ContentContainerStyle. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/01/14/flat-list-horizontal-all-items-perfectly-visible-in-ios-not-in-android-contentcontainerstyle/
CHICAGO
" » Flat list horizontal all Items perfectly visible in iOS not in android ContentContainerStyle." Vaibhav Shukla | Sciencx - Accessed . https://www.scien.cx/2025/01/14/flat-list-horizontal-all-items-perfectly-visible-in-ios-not-in-android-contentcontainerstyle/
IEEE
" » Flat list horizontal all Items perfectly visible in iOS not in android ContentContainerStyle." Vaibhav Shukla | Sciencx [Online]. Available: https://www.scien.cx/2025/01/14/flat-list-horizontal-all-items-perfectly-visible-in-ios-not-in-android-contentcontainerstyle/. [Accessed: ]
rf:citation
» Flat list horizontal all Items perfectly visible in iOS not in android ContentContainerStyle | Vaibhav Shukla | Sciencx | https://www.scien.cx/2025/01/14/flat-list-horizontal-all-items-perfectly-visible-in-ios-not-in-android-contentcontainerstyle/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.