facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
116.18k stars 23.98k forks source link

CellRendererComponent with onViewableItemsChanged #44303

Closed dekim1028 closed 2 weeks ago

dekim1028 commented 2 weeks ago

Description

When i use CellRendererComponent, onViewableItemsChanged is not calling. How can we use them together?

Steps to reproduce

const CellRendererComponent = useCallback(
      ({ children, item, ...props }) => {
          return (
              <View
                  {...props}
                  onLayout={(event) => {
                      ...
                  }}>
                  {children}
              </View>
          );
      },
      [],
);

<FlatList
 CellRendererComponent={CellRendererComponent}
 onViewableItemsChanged={/** code */}
 ViewabilityConfig={/** code */}
...
/>

React Native Version

0.71.16

Affected Platforms

Runtime - Android, Runtime - iOS, Build - MacOS

Output of npx react-native info

...

Stacktrace or Logs

...

Reproducer

NO

Screenshots and Videos

No response

github-actions[bot] commented 2 weeks ago
:warning: Unsupported Version of React Native
:information_source: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.
github-actions[bot] commented 2 weeks ago
: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.
NickGerleman commented 2 weeks ago

Custom CellRenderer must forward events like onLayout, onFocusCapture. So the set onLayout prop must be called in any custom handlers.

See list of handlers: https://github.com/facebook/react-native/blob/bb120ff663ae56ca825b7b32873127ea91d52720/packages/virtualized-lists/Lists/VirtualizedListProps.js#L41