When Nesting a Flatlist inside a Flatlist both are horizontal child flatlist in not rendering horizontally

[hardikamber]

Description

Flatlist inside a horizontal flatlist is not rendering horizontally

Steps to reproduce

Create a component below import React from 'react'; import { FlatList, View, Text } from 'react-native';

const ParentComponent = () => { const parentData = [{ id: 'a' }, { id: 'b' }]; // Example parent data const childData = [{ id: '1' }, { id: '2' }, { id: '3' }]; // Example child data

const renderChildItem = ({ item }) => ( <View style={{ width: 100, height: 100, margin: 10, backgroundColor: 'lightblue' }}>

{item.id}

</View>

);

const renderChildFlatList = () => ( <FlatList data={childData} renderItem={renderChildItem} keyExtractor={item => item.id} horizontal={true} showsHorizontalScrollIndicator={false} /> );

const renderParentItem = ({ item }) => ( <View style={{ width: 200, height: 200, margin: 10, backgroundColor: 'lightcoral' }}>

Parent Item {item.id}

  {renderChildFlatList()}
</View>

);

return ( <FlatList data={parentData} renderItem={renderParentItem} keyExtractor={item => item.id} horizontal={true} showsHorizontalScrollIndicator={false} /> ); };

export default ParentComponent;

React Native Version

0.72.0

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M2
    Memory: 106.58 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.1 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
    npm: 10.5.0 - /opt/homebrew/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.15.2 - /Users/hardik/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, visionOS 1.0, watchOS 10.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 2022.3 AI-223.8836.35.2231.10671973
    Xcode: 15.2/15C500b - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.21 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.16 => 0.71.16 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
(node:51862) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
npm notice 
npm notice New patch version of npm available! 10.5.0 -> 10.5.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.1
npm notice Run npm install -g npm@10.5.1 to update!
npm notice

Stacktrace or Logs

Not an crash

Reproducer

added above

Screenshots and Videos

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.72.12. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[hardikamber]

⚠️ Missing Reproducible Example ℹ️ We could not detect a reproducible example in your issue report. Please provide either:

• If your bug is UI related: a Snack
• If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

https://snack.expo.dev/N5AAb_ERRXBHw7sY6vIa1

[cavaalex]

Same issue here.

The child FlatList ignores the horizontal={true} prop. My react-native version is 0.71.17. I am testing it on iOS.

      <FlatList
        data={["orange", "pink", "red"]}
        horizontal={true}
        renderItem={({ item }) => {
          return (
            <View
              style={{
                flex: 1,
                backgroundColor: item,
                height: Dimensions.get("window").height,
                width: Dimensions.get("window").width,
              }}
            >
              {"orange" === item && (
                <View style={{ flex: 1, backgroundColor: "brown" }}>
                  <FlatList
                    contentContainerStyle={{ flex: 1 }}
                    data={["gray", "black", "blue", "green", "yellow"]}
                    horizontal={true}
                    showsHorizontalScrollIndicator
                    renderItem={({ item }) => {
                      return (
                        <View
                          style={{
                            backgroundColor: item,
                            height: 100,
                            width: Dimensions.get("window").width - 10,
                          }}
                        />
                      );
                    }}
                  />
                </View>
              )}
            </View>
          );
        }}
        snapToInterval={Dimensions.get("window").width}
      />