Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hotfix: allow transform to be a string in useAnimatedStyle #4881

Merged
merged 1 commit into from
Aug 4, 2023

Conversation

tjzel
Copy link
Collaborator

@tjzel tjzel commented Aug 3, 2023

Summary

A few months back RN added in its types that transform could be a string - but it's missing in RN 0.72.3 and causes some errors when current version of react-native-reanimated is used with RN 0.71. This PR hotfixes that, allowing transform to be a string.

Keep in mind that it's definitely not the final form of how useAnimatedStyle types should look like - it will be refactored in the future.

Test plan

This snippet yields errors on `0.71.12` without this change
function Foo() {
  const sv = useSharedValue(0);
  const otherSv = useSharedValue(0);

  const width = 200;

  // error here, transform being inferred to `never`
  const animatedStyle = useAnimatedStyle(() => {
    return {
      width: '200%',
      alignItems: 'center',
      opacity: interpolate(sv.value, [0, 1], [0, 1], Extrapolation.CLAMP),
      transform: [
        {
          translateX: interpolate(
            sv.value,
            [0, 1],
            [0, 100],
            Extrapolation.CLAMP,
          ),
        },
        {
          translateY: sv.value + otherSv.value,
        },
      ],
    };
  }, [width]);

  return <Animated.View style={animatedStyle} />;
}

@tjzel tjzel added this pull request to the merge queue Aug 4, 2023
Merged via the queue into main with commit 2579370 Aug 4, 2023
1 check passed
@tjzel tjzel deleted the @tjzel/types/hotfix-transform-type branch August 4, 2023 07:08
piaskowyk pushed a commit that referenced this pull request Aug 4, 2023
<!-- 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

A few months back RN [added in its
types](facebook/react-native#37543) that
`transform` could be a `string` - but it's missing in RN `0.72.3` and
causes some errors when current version of `react-native-reanimated` is
used with RN `0.71`. This PR hotfixes that, allowing `transform` to be a
string.

Keep in mind that it's definitely not the final form of how
`useAnimatedStyle` types should look like - it will be refactored in the
future.

## Test plan


<details>
<summary> This snippet yields errors on `0.71.12` without this change
</summary>

```TSX
function Foo() {
  const sv = useSharedValue(0);
  const otherSv = useSharedValue(0);

  const width = 200;

  // error here, transform being inferred to `never`
  const animatedStyle = useAnimatedStyle(() => {
    return {
      width: '200%',
      alignItems: 'center',
      opacity: interpolate(sv.value, [0, 1], [0, 1], Extrapolation.CLAMP),
      transform: [
        {
          translateX: interpolate(
            sv.value,
            [0, 1],
            [0, 100],
            Extrapolation.CLAMP,
          ),
        },
        {
          translateY: sv.value + otherSv.value,
        },
      ],
    };
  }, [width]);

  return <Animated.View style={animatedStyle} />;
}
```
M-i-k-e-l added a commit to wix/react-native-ui-lib that referenced this pull request Sep 1, 2024
* SectionsWheelPicker - wrap with GestureHandlerRootView

* remove redundent

* remove // @ts-expect-error should be fixed in version 3.5 (software-mansion/react-native-reanimated#4881)

* Modal - applying useGestureHandlerRootView on iOS as well

* TouchableOpacity - migrate from deprecated onGestureEvent to onHandleStateChange

* PanView - migrate from PanGestureHandler with deprecated onGestureEvent to GestureDetector component with gesture

* Calendar header - ignore TS error

* upgrade libraries

* gesture upgrade to 2.16.0

* gestureHandler to 2.14.1

* Modal - update docs

* WheelPicker - wrap with GestureHandlerRootView, instead of wrapping the screen

* Wrapping SectionWheelPickerScreen instead of WheelPicker component

* clean

* Remove migration from useAnimatedGestureHandler

* //@ts-expect-error - useAnimatedGestureHandler migration

* fix TS error on ConnectionStatusBar NetInfo.fetch

* Revert "fix TS error on ConnectionStatusBar NetInfo.fetch"

This reverts commit 323a558.

* Revert "//@ts-expect-error - useAnimatedGestureHandler migration"

This reverts commit 03a695c.

* Revert "Remove migration from useAnimatedGestureHandler"

This reverts commit 7957805.

* Wrap screens with gestureHandlerRootHOC

* Fix TabController's indicator

* Fix PanView (and screen)

* Remove missed comment

* Change to map (also fixes initial indicator)

---------

Co-authored-by: M-i-k-e-l <michaelle@wix.com>
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.

2 participants