Skip to content

Conversation

@swansontec
Copy link
Contributor

Summary

If the interpolated alpha value is really tiny, the code might emit a string like "rgba(0, 0, 0, 1e-11)". This is not valid syntax, and can cause worklet crashes. Replace these small values with 0.

Test plan

This PR includes the necessary unit-test update:

  it('handles tiny values', () => {
    const colors = ['#00000000', '#ff802001'];

    // We don't want output like "rgba(4, 2, 0, 3.921568627450981e-7)":
    const interpolatedColor = interpolateColor(0.0001, [0, 1], colors);
    expect(interpolatedColor).toBe(`rgba(4, 2, 0, 0)`);
  });

If one of the interpolated color values in really tiny, we might emit a string like "rgba(0, 0, 0, 1e-11)". This is not valid syntax, and can cause worklet crashes. Use a regexp to truncate these values to 0.
swansontec added a commit to EdgeApp/edge-react-gui that referenced this pull request Jun 21, 2024
swansontec added a commit to EdgeApp/edge-react-gui that referenced this pull request Jun 21, 2024
swansontec added a commit to EdgeApp/edge-react-gui that referenced this pull request Jun 22, 2024
Copy link
Member

@tomekzaw tomekzaw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks for the PR!

Copy link
Member

@piaskowyk piaskowyk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your PR! 🎉

@piaskowyk piaskowyk added this pull request to the merge queue Jun 24, 2024
Merged via the queue into software-mansion:main with commit 07ccb07 Jun 24, 2024
r0h0gg6 pushed a commit to r0h0gg6/react-native-reanimated that referenced this pull request Jul 28, 2025
<!-- 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

If the interpolated alpha value is really tiny, the code might emit a
string like "rgba(0, 0, 0, 1e-11)". This is not valid syntax, and can
cause worklet crashes. Replace these small values with 0.

## Test plan

This PR includes the necessary unit-test update:

```ts
  it('handles tiny values', () => {
    const colors = ['#00000000', '#ff802001'];

    // We don't want output like "rgba(4, 2, 0, 3.921568627450981e-7)":
    const interpolatedColor = interpolateColor(0.0001, [0, 1], colors);
    expect(interpolatedColor).toBe(`rgba(4, 2, 0, 0)`);
  });
```

---------

Co-authored-by: Krzysztof Piaskowy <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants