Skip to content

Commit

Permalink
Update view tag on componentDidUpdate (#4440)
Browse files Browse the repository at this point in the history
<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

<!-- Explain the motivation for this PR. Include "Fixes #<number>" if
applicable. -->

Fixes #3769

Each time `componentDidUpdate` is triggered we have to subscribe for
events again. However we used to use the same viewTag, although the
viewTag may change each time the view is updated. This mean that the
given view will stop receiving any events.

Look at the above-linked issue to see the description of bug in the
recordings. In the console you can see viewTag used to subscribe for
events. In a buggy example it doesn't change when you modify the
orientation of the scroll.
<table>
<tr><td>BEFORE</td><td>


https://github.com/software-mansion/react-native-reanimated/assets/56199675/e8db724a-620f-4da1-ac44-bdc73e4d936b

</td></tr>
<tr><td>AFTER</td><td>


https://github.com/software-mansion/react-native-reanimated/assets/56199675/b2a8d2c1-0476-4ddf-b543-b7c0b768389e


</td></tr>
</table>  

## Test plan

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->
Tested on example from the issue: https://snack.expo.dev/fTGYvJ2t5

Co-authored-by: Aleksandra Cynk <aleksandracynk@swmansion.com>
  • Loading branch information
Latropos and Aleksandra Cynk committed May 22, 2023
1 parent e7c8bcc commit d05b452
Showing 1 changed file with 4 additions and 15 deletions.
19 changes: 4 additions & 15 deletions src/createAnimatedComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -344,19 +344,6 @@ export default function createAnimatedComponent(
_reattachNativeEvents(
prevProps: AnimatedComponentProps<InitialComponentProps>
) {
let viewTag: number | undefined;

for (const key in this.props) {
const prop = this.props[key];
if (
has('current', prop) &&
prop.current instanceof WorkletEventHandler
) {
if (viewTag === undefined) {
viewTag = prop.current.viewTag;
}
}
}
for (const key in prevProps) {
const prop = this.props[key];
if (
Expand All @@ -368,15 +355,17 @@ export default function createAnimatedComponent(
}
}

const node = this._getEventViewRef();
const viewTag = findNodeHandle(options?.setNativeProps ? this : node);

for (const key in this.props) {
const prop = this.props[key];
if (
has('current', prop) &&
prop.current instanceof WorkletEventHandler &&
prop.current.reattachNeeded
) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
prop.current.registerForEvents(viewTag!, key);
prop.current.registerForEvents(viewTag as number, key);
prop.current.reattachNeeded = false;
}
}
Expand Down

0 comments on commit d05b452

Please sign in to comment.