Under the Android platform, the parent component has an absolute layout and the Flatlist cannot scroll normally.

[AsteriskZuo]

Description

Under the Android platform, the parent component has an absolute layout and the Flatlist cannot scroll normally.

React Native Version

0.71.11

Output of npx react-native info

info Fetching system and libraries information...
System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1
    Memory: 133.42 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.1 - /opt/homebrew/Cellar/node@18/18.12.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - /opt/homebrew/Cellar/node@18/18.12.1/bin/npm
    Watchman: 2022.10.31.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.12.1 - /opt/homebrew/opt/cocoapods/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK:
      API Levels: 23, 28, 29, 30, 31, 32, 33, 33
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.1, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0, 33.0.2
      System Images: android-28 | Google ARM64-V8a Play ARM 64 v8a, android-32 | Google APIs ARM 64 v8a
      Android NDK: 22.1.7171670
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9014738
    Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.13 - /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.11 => 0.71.11 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
info React Native v0.72.5 is now available (your project is running on v0.71.11).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.72.5
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.71.11
info For more info, check out "https://reactnative.dev/docs/upgrading".

Steps to reproduce

Minimal sample code:

import * as React from 'react';
import { FlatList, ListRenderItemInfo, Text, View } from 'react-native';

type MemberListItemProps = { id: string };

export function MemberListParticipants() {
  const dataRef = React.useRef([
    { id: '1' },
    { id: '2' },
    { id: '3' },
    { id: '4' },
    { id: '5' },
    { id: '6' },
    { id: '7' },
    { id: '8' },
    { id: '9' },
    { id: '10' },
    { id: '11' },
    { id: '12' },
    { id: '13' },
    { id: '14' },
    { id: '15' },
    { id: '16' },
    { id: '17' },
  ]);
  const [data] = React.useState(dataRef.current);

  return (
    <View
      style={{
        height: 200,
      }}
    >
      <FlatList
        data={data}
        renderItem={(info: ListRenderItemInfo<MemberListItemProps>) => {
          const { item } = info;
          return (
            <View
              key={item.id}
              style={{
                backgroundColor: 'yellow',
                margin: 1,
              }}
            >
              <Text>{item.id + '                  '}</Text>
            </View>
          );
        }}
        keyExtractor={(item: MemberListItemProps) => {
          return item.id;
        }}
      />
    </View>
  );
}

export function MemberListItem(): React.JSX.Element {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'green',
        width: '100%',
        marginTop: 100,
      }}
    >
      <View
        style={
          {
             // flex: 1, // Not setting this will cause the FlatList to not scroll.
          }
        }
      >
        <View style={{ position: 'absolute' }}>
          <MemberListParticipants />
        </View>
      </View>
    </View>
  );
}

export default function App() {
  return <MemberListItem />;
}

Snack, screenshot, or link to a repository

https://github.com/facebook/react-native/assets/11733363/b0daad80-ecf5-4939-ada4-cce51f972686

[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.71.13. 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.

[AsteriskZuo]

export function MemberListItem(): React.JSX.Element {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'green',
        width: '100%',
        marginTop: 100,
      }}
    >
      <View
        style={{
          flex: 1, // Not setting this will cause the FlatList to not scroll.
        }}
      >
        <View style={{ flex: 1, position: 'absolute' }}>
          <View style={{ flex: 1 }}>
            <View style={{ position: 'absolute' }}>
              <MemberListParticipants />
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}

multi absolute cause to FlatList can not scroll.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.