DEV Community

Vaibhav Shukla
Vaibhav Shukla

Posted on

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
                }}
                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.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay