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"
               >



<p>UI View : <br>
<img src="https://img.php.cn/upload/article/000/000/000/173682985071915.jpg" alt="Flat list horizontal all Items perfectly visible in iOS not in android ContentContainerStyle" /></p>

<p>Expected View : </p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173682985655775.jpg" alt="Flat list horizontal all Items perfectly visible in iOS not in android ContentContainerStyle" /></p>

<p>Here is Code after removing width from contentContainer style<br>
</p>

<pre class="brush:php;toolbar:false">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>



<p>Why It Works After Commenting width:</p>

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

The above is the detailed content of Flat list horizontal all Items perfectly visible in iOS not in android ContentContainerStyle. For more information, please follow other related articles on the PHP Chinese website!