Fabric component custom properties, when one property is modified by JavaScript using setState, all property set methods in Android bridging are invoked.

[zwyzzu]

Description

Fabric component custom properties, when one property is modified by JavaScript using setState, all property set methods in Android bridging are invoked.

Steps to reproduce

1.Define properties

export interface NativeProps extends ViewProps {
  // add props
  itemSeparator? : string;

  footerData? : {};

  headerData? : {};

  cellHeight? : Int32;
}

export default codegenNativeComponent<NativeProps>(
  'AHRNReuseListView',
) as HostComponent<NativeProps>;

2.bridging

    @ReactProp(name = "headerData")
    public void setHeaderData(AHRNListViewLayout rnListViewLayout, ReadableMap headerData) {
        LogUtil.d(TAG, "--- headerData : " + headerData + "layouts: " + rnListViewLayout.hashCode());

        if (headerData == null || rnListViewLayout == null) {
            return;
        }
//
//        if (rnListViewLayout.getRNListView().getHeaderViewsCount() > 0) {
//            return;
//        }

        HeaderDataEntity headerDataEntity = new HeaderDataEntity(headerData);
        RNListViewUpdater.getViewUpdater(rnListViewLayout).setHeaderModule(rnListViewLayout, headerDataEntity);
    }

    @ReactProp(name = "footerData")
    public void setFooterData(AHRNListViewLayout rnListViewLayout, ReadableMap footerData) {
        LogUtil.d(TAG, "--- footerData : " + footerData + "layouts: " + rnListViewLayout.hashCode());

        if (footerData == null || rnListViewLayout == null) {
            return;
        }
//
//        if (rnListViewLayout.getRNListView().getFooterViewsCount() > 0) {
//            LogUtil.d(TAG, "--- footerData : " + footerData + "layouts: " + rnListViewLayout.hashCode() + "has footer views count : " + rnListViewLayout.getRNListView().getFooterViewsCount());
//            return;
//        }

        FooterDataEntity footerDataEntity = new FooterDataEntity(footerData);
        RNListViewUpdater.getViewUpdater(rnListViewLayout).setFooterModule(rnListViewLayout, footerDataEntity);
    }

3.use component

<AHRNReuseListView
                    ref='RCT_UI_REF'
                    style={{width: Dimensions.get('window').width, flex: 1, backgroundColor: 'white' }}
                    data={this.state.data}
                    headerData={{ 'module': 'header', height: 30, data: {} }}
                    footerData={{ 'module': 'footer', height: 30, data: {} }}
                    onPullRefresh={this._onPullRefresh}
                    onSelectedItem={this._onSelectedItem}
                    refreshing={this.state.refreshing}
                    refreshInitHints='1下拉刷新'
                    willRefreshHints='1松开刷新'
                    refreshingHints='1刷新中...'
                    onLoadMore={this._onLoadMore}
                    loadingMore={this.state.loadingMore}
                    loadingHints='1加载更多'
                />

4.Update State

this.setState({ refreshing: true })

React Native Version

0.72.5

Affected Platforms

Runtime - Android

Areas

Fabric - The New Renderer

Output of npx react-native info

.

Stacktrace or Logs

.

Reproducer

.

Screenshots and Videos

No response

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

[cortinico]

We would need to see your entire project. Could you share a reproducer @zwyzzu ?

[zwyzzu]

⚠️ Newer Version of React Native is Available! ℹ️ 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

Please help confirm whether the issue was addressed in the commit time mentioned. Due to some reasons, we are unable to upgrade to version 0.72.12. Thank you very much for your assistance.

[zwyzzu]

We would need to see your entire project. Could you share a reproducer @zwyzzu ?

@cortinico 1.Define properties ` export interface NativeProps extends ViewProps { // add props itemSeparator? : string;

footerData? : {};

headerData? : {};

cellHeight? : Int32; }

export default codegenNativeComponent<NativeProps>( 'AHRNReuseListView', ) as HostComponent<NativeProps>; `

2.bridging ` @ReactProp(name = "headerData") public void setHeaderData(AHRNListViewLayout rnListViewLayout, ReadableMap headerData) { LogUtil.d(TAG, "--- headerData : " + headerData + "layouts: " + rnListViewLayout.hashCode());

    if (headerData == null || rnListViewLayout == null) {
        return;
    }

// // if (rnListViewLayout.getRNListView().getHeaderViewsCount() > 0) { // return; // }

    HeaderDataEntity headerDataEntity = new HeaderDataEntity(headerData);
    RNListViewUpdater.getViewUpdater(rnListViewLayout).setHeaderModule(rnListViewLayout, headerDataEntity);
}

@ReactProp(name = "footerData")
public void setFooterData(AHRNListViewLayout rnListViewLayout, ReadableMap footerData) {
    LogUtil.d(TAG, "--- footerData : " + footerData + "layouts: " + rnListViewLayout.hashCode());

    if (footerData == null || rnListViewLayout == null) {
        return;
    }

// // if (rnListViewLayout.getRNListView().getFooterViewsCount() > 0) { // LogUtil.d(TAG, "--- footerData : " + footerData + "layouts: " + rnListViewLayout.hashCode() + "has footer views count : " + rnListViewLayout.getRNListView().getFooterViewsCount()); // return; // }

    FooterDataEntity footerDataEntity = new FooterDataEntity(footerData);
    RNListViewUpdater.getViewUpdater(rnListViewLayout).setFooterModule(rnListViewLayout, footerDataEntity);
}

`

3.use component <AHRNReuseListView ref='RCT_UI_REF' style={{width: Dimensions.get('window').width, flex: 1, backgroundColor: 'white' }} data={this.state.data} headerData={{ 'module': 'header', height: 30, data: {} }} footerData={{ 'module': 'footer', height: 30, data: {} }} onPullRefresh={this._onPullRefresh} onSelectedItem={this._onSelectedItem} refreshing={this.state.refreshing} refreshInitHints='1下拉刷新' willRefreshHints='1松开刷新' refreshingHints='1刷新中...' onLoadMore={this._onLoadMore} loadingMore={this.state.loadingMore} loadingHints='1加载更多' />

4.Update State this.setState({ refreshing: true })

[cortinico]

Please use the template linked here @zwyzzu https://github.com/facebook/react-native/issues/43760#issuecomment-2031651964

[github-actions[bot]]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[cortinico]

Closing as @zwyzzu is unresponsive