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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay