Skip to content

Commit

Permalink
Update view tag on componentDidUpdate (software-mansion#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 software-mansion#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
2 people authored and fluiddot committed Jun 5, 2023
1 parent 5e50de2 commit da679da
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 da679da

Please sign in to comment.