mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Julian TiglerandFacebook GitHub Bot
e3d607fc2e
Summary: - In the old architecture on iOS, it was possible to begin refreshing a [`RefreshControl`](https://reactnative.dev/docs/refreshcontrol) backed by [`RCTRefreshControl.m`](https://github.com/facebook/react-native/blob/ea876054cfdcdfba1d8ded69ab359f20072aef6c/packages/react-native/React/Views/RefreshControl/RCTRefreshControl.m) on mount (see [old arch rn-tester video](https://github.com/user-attachments/assets/0a759072-8931-438b-b9af-698b5f8fa072)). - In the new architecture on iOS, when attempting to refresh on mount, the `RefreshControl` backed by [`RCTPullToRefreshViewComponentView.mm`](https://github.com/facebook/react-native/blob/ea876054cfdcdfba1d8ded69ab359f20072aef6c/packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.mm) is not shown. Additionally, recycled `RefreshControl`s are missing their [`title`s](https://reactnative.dev/docs/refreshcontrol#title-ios) (see [new arch rn-tester video](https://github.com/user-attachments/assets/22f87a82-4703-470b-9c00-6454eb9458dd)). - This change fixes the new arch issues mentioned above, so that the new arch behaves the same as the old arch did (see [new arch rn-tester video with fix](https://github.com/user-attachments/assets/3ab6c90c-6ad4-4dc7-b2f5-7cf1378e50b9)). - This change also updates the rn-tester [`RefreshControlExample`](https://github.com/facebook/react-native/blob/442a368af5bda653e84514b870084c73607645eb/packages/rn-tester/js/examples/RefreshControl/RefreshControlExample.js) to include a refresh-on-mount to prevent future regressions ## Changelog: [IOS] [FIXED] - Fix new arch RefreshControl wasn't shown when refreshing on mount [IOS] [FIXED] - Fix new arch recycled RefreshControl was missing its title [INTERNAL] [CHANGED] - Update rn-tester RefreshControlExample to refresh on mount Pull Request resolved: https://github.com/facebook/react-native/pull/49240 Test Plan: - I created a [video](https://github.com/user-attachments/assets/0a759072-8931-438b-b9af-698b5f8fa072) of the baseline old arch behavior by overriding [`new_arch_enabled`](https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/cocoapods/new_architecture.rb#L163-L165) to return `false` - I created a [video](https://github.com/user-attachments/assets/22f87a82-4703-470b-9c00-6454eb9458dd) of the broken new arch behavior by overriding [`new_arch_enabled`](https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/cocoapods/new_architecture.rb#L163-L165) to return `true` - I applied the changes in this PR and created a [video](https://github.com/user-attachments/assets/3ab6c90c-6ad4-4dc7-b2f5-7cf1378e50b9) that confirms that the new arch with fix now behaves the same as the old arch - I also used [patch-package](https://github.com/ds300/patch-package) to verify that the changes in this PR work as expected in my production React Native app, running `react-native@0.77.0`, with the new arch now enabled by default. Note that this app uses [`react-navigation`](https://github.com/react-navigation/react-navigation) and [`react-native-screens`](https://github.com/software-mansion/react-native-screens), which I expected might complicate the fix. The changes in this PR continue to work as expected, even with the complications of those popular libraries. ## Details: - All of my changes were inspired by the many years of fixes that are included in [`RCTRefreshControl.m`](https://github.com/facebook/react-native/blob/ea876054cfdcdfba1d8ded69ab359f20072aef6c/packages/react-native/React/Views/RefreshControl/RCTRefreshControl.m), which haven't yet been included in the new [`RCTPullToRefreshViewComponentView.mm`](https://github.com/facebook/react-native/blob/ea876054cfdcdfba1d8ded69ab359f20072aef6c/packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.mm) - My `_isBeforeInitialLayout` is inspired by the old [`_isInitialRender`](https://github.com/facebook/react-native/blob/442a368af5bda653e84514b870084c73607645eb/packages/react-native/React/Views/RefreshControl/RCTRefreshControl.m#L17) - My `layoutSubviews` is inspired by the old [`layoutSubviews`](https://github.com/facebook/react-native/blob/442a368af5bda653e84514b870084c73607645eb/packages/react-native/React/Views/RefreshControl/RCTRefreshControl.m#L43-L59) - My `beginRefreshingProgrammatically` is inspired by the old [`beginRefreshingProgrammatically`](https://github.com/facebook/react-native/blob/442a368af5bda653e84514b870084c73607645eb/packages/react-native/React/Views/RefreshControl/RCTRefreshControl.m#L72-L107) - I have tried to comment all of the unexpected changes. Some of these comments are taken directly from the old `RCTRefreshControl.m` - In general, it seems like [`UIRefreshControl`](https://developer.apple.com/documentation/uikit/uirefreshcontrol) ignores many style updates, and even calls to `beginRefreshing`, until it's been added to the view hierarchy. That's why the `layoutSubviews` hack was needed in the old arch, and is similarly needed in this PR. - Here's a [Stack Overflow answer](https://stackoverflow.com/a/67758859) that hints at this, by saying that `beingRefreshing` needed to be called in a ViewController's `viewWillAppear` lifecycle callback - Here's a different [Stack Overflow answer](https://stackoverflow.com/a/32688124) that shows that `viewWillLayoutSubviews` (and by extension, all of the subviews' `layoutSubviews`) is indeed called after `viewWillAppear` - Since `_refreshControl` effectively ignores updates until the first `layoutSubviews` call, I needed to buffer all calls to `updateProps:oldProps:` into my new `_initialProps` before finally re-calling `updateProps:oldProps:` with `_initialProps` against `PullToRefreshViewShadowNode::defaultSharedProps` in `layoutSubviews` - Additionally, I needed to move the `if` block regarding refreshing from the top of `updateProps:oldProps:` to the bottom of it, because `_refreshControl` ignores updates that are made after the call to `beginRefreshing` ## Known issues: - There is one small difference between the old arch and the new arch with this PR. The old arch [programmatically animates the pull down content offset](https://github.com/facebook/react-native/blob/442a368af5bda653e84514b870084c73607645eb/packages/react-native/React/Views/RefreshControl/RCTRefreshControl.m#L89-L102), whereas this PR does not. See `[scrollView setContentOffset:offset]` in the PR code. - I tried animating it with the block below, and this did work in the rn-tester app. However, it caused the fix to not work when used with the extremely popular `react-navigation` and `react-native-screens` libraries. In that case, the `RefreshControl` exhibited the same buggy behavior of not being shown when refreshing on mount. ```objective-c [UIView animateWithDuration:0.25 delay:0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{ [_scrollViewComponentView.scrollView setContentOffset:offset]; } completion:^(BOOL finished) { [_refreshControl beginRefreshing]; }]; ``` - I thought it would be better to fix this for a larger number of real-world scenarios without animation than it would be to fix it for just the rn-tester app with animation. Reviewed By: javache Differential Revision: D69980100 Pulled By: cipolleschi fbshipit-source-id: bbacd8ffffff5d87728a1c8c0063acc60215d1a6