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.

Sign up for GitHub

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

Jump to bottom

Reintroduce onReanimatedPropsChange #4821

Merged
merged 19 commits into from
Aug 4, 2023
Merged

Reintroduce onReanimatedPropsChange #4821

merged 19 commits into from
Aug 4, 2023

Conversation

Latropos
Copy link
Contributor

@Latropos Latropos commented Jul 26, 2023 •
edited
Loading

Summary

Reintroduce support for jsProps.
Closes #4317 and closes #4674

It turns out that jsProps are still in use by many libraries like react-native-lottie and react-native-svg.

Note
This fix does not work for fabric 😢 However Lottie animations are not implemented for Fabric anyway 😎

BEFOREAFTER
The white dot does not move ❌The white dot moves ✅
Screen.Recording.2023-07-26.at.13.53.25.mov
Screen.Recording.2023-07-26.at.13.52.28.mov

Test plan

Tested on this example: https://github.com/acollazomayer/ReanimatedSVGBug

@Latropos Latropos marked this pull request as ready for review July 26, 2023 12:06
@Latropos Latropos changed the title onReanimatedPropsChange Reintroduce onReanimatedPropsChange Jul 28, 2023
tomekzaw
tomekzaw reviewed Jul 28, 2023
View reviewed changes
src/ReanimatedModule.ts Outdated Show resolved Hide resolved
@AlexanderEggers
Copy link
Contributor

@Latropos Quick FYI, lottie-react-native v6 with fabric support was released a short while ago.

@Latropos Latropos requested a review from tomekzaw August 2, 2023 13:23
piaskowyk
piaskowyk requested changes Aug 2, 2023
View reviewed changes
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.

let's refactor the event registering logic into a separate file, just like we discussed offline.

@piaskowyk
Copy link
Member

Did you tested it on Android?

@Latropos Latropos requested a review from piaskowyk August 3, 2023 09:00
@Latropos
Copy link
Contributor Author

Latropos commented Aug 3, 2023

@piaskowyk Yes, it works on Andorid 💪

piaskowyk
piaskowyk requested changes Aug 3, 2023
View reviewed changes
src/ReanimatedModule.ts Outdated Show resolved Hide resolved
src/ReanimatedModule.ts Outdated Show resolved Hide resolved
src/createAnimatedComponent.tsx Outdated Show resolved Hide resolved
src/createAnimatedComponent.tsx Outdated Show resolved Hide resolved
src/ReanimatedModule.ts Outdated Show resolved Hide resolved
@Latropos Latropos requested a review from piaskowyk August 3, 2023 11:09
piaskowyk
piaskowyk requested changes Aug 3, 2023
View reviewed changes
src/JSPropUpdater.ts Outdated Show resolved Hide resolved
src/JSPropUpdater.ts Outdated Show resolved Hide resolved
src/JSPropUpdater.ts Outdated Show resolved Hide resolved
src/JSPropUpdater.ts Outdated Show resolved Hide resolved
src/JSPropUpdater.ts Outdated Show resolved Hide resolved
src/JSPropUpdater.ts Outdated Show resolved Hide resolved
@Latropos Latropos requested a review from piaskowyk August 4, 2023 08:44
piaskowyk
piaskowyk requested changes Aug 4, 2023
View reviewed changes
src/JSPropUpdater.ts Outdated Show resolved Hide resolved
@Latropos Latropos added this pull request to the merge queue Aug 4, 2023
Merged via the queue into main with commit a4398b7 Aug 4, 2023
1 check passed
@Latropos Latropos deleted the acynk/add-js-props branch August 4, 2023 12:37
tomekzaw
tomekzaw reviewed Aug 7, 2023
View reviewed changes
src/createAnimatedComponent.tsx
@@ -286,6 +287,7 @@ export default function createAnimatedComponent(
_inlinePropsMapperId: number | null = null;
_inlineProps: StyleProps = {};
_sharedElementTransition: SharedTransition | null = null;
_JSPropUpdater = new JSPropUpdater();
Copy link
Member

Choose a reason for hiding this comment

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

Probably _jsPropsUpdater would be a better name here

src/JSPropUpdater.ts
}

public addOnJSPropsChangeListener(
animatedComponent: React.Component<unknown, unknown>
Copy link
Member

Choose a reason for hiding this comment

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

Is there any TypeScript way to enforce that the component must be animated?

src/JSPropUpdater.ts

private static _listener(data: ListenerData) {
const component = JSPropUpdater._tagToComponentMapping.get(data.viewTag);
component && component._updateFromNative(data.props);
Copy link
Member

Choose a reason for hiding this comment

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

I know this snippet of code was copied but it may be finally worth to convert it into a proper conditional.

@Latropos
Copy link
Contributor Author

Not all svg issues were solved, looks that fill color still doesn't change #1909

@tomekzaw
Copy link
Member

As far as I know, it required a custom prop adapter, see createAnimatedPropAdapter.

@piaskowyk piaskowyk mentioned this pull request Aug 30, 2023
Merged
github-merge-queue bot pushed a commit that referenced this pull request Nov 15, 2023
@piaskowyk
Add JSProps on Fabric (#5009)
870116b 
## Summary

This pull request adds support for JS props in Fabric. The
implementation is available in the common codebase, so there is no
platform-specific code required. This approach doesn't rely on events
since, based on my research, using events would require messy
workarounds with React Native.
Same thing on Paper:
#4821

## Test plan

<details>
<summary>code</summary>

```js
import { TextInput } from 'react-native';
import React, { useEffect } from 'react';
import Svg, {
  Path,
  Circle,
  G,
} from 'react-native-svg';
import Animated, {
  runOnJS,
  useSharedValue,
  useDerivedValue,
  useAnimatedProps,
  useAnimatedGestureHandler,
  interpolate,
} from 'react-native-reanimated';
import {PanGestureHandler} from 'react-native-gesture-handler';

const BORDER_WIDTH = 25;
const DIAL_RADIUS = 22.5;

export const {PI} = Math;
export const TAU = 2 * PI;

const AnimatedPath = Animated.createAnimatedComponent(Path);
const AnimatedG = Animated.createAnimatedComponent(G);
const AnimatedInput = Animated.createAnimatedComponent(TextInput);

const polarToCartesian = (
  angle: number,
  radius: number,
  {x, y}: {x: number; y: number},
) => {
  'worklet';
  const a = ((angle - 90) * Math.PI) / 180.0;
  return {x: x + radius * Math.cos(a), y: y + radius * Math.sin(a)};
};

const cartesianToPolar = (
  x: number,
  y: number,
  {x: cx, y: cy}: {x: number; y: number},
  step = 1,
) => {
  'worklet';

  const value =
    Math.atan((y - cy) / (x - cx)) / (Math.PI / 180) + (x > cx ? 90 : 270);

  return Math.round(value * (1 / step)) / (1 / step);
};

const unMix = (value: number, x: number, y: number) => {
  'worklet';
  return (value - x) / (y - x);
};

type Props = {
  width: number;
  height: number;
  fillColor: string[];
  value: number;
  meterColor: string;
  min?: number;
  max?: number;
  onValueChange: (value: any) => void;
  children: (
    props: Partial<{defaultValue: string; text: string}>,
  ) => React.ReactNode;
  step?: number;
  decimals?: number;
};

const CircleSlider = (props: Props) => {
  const {
    width,
    height,
    value,
    meterColor,
    children,
    min,
    max,
    step = 1,
    decimals,
  } = props;
  const smallestSide = Math.min(width, height);

  const cx = width / 2;
  const cy = height / 2;
  const r = (smallestSide / 2) * 0.85;

  const start = useSharedValue(0);
  const end = useSharedValue(unMix(value, min! / 360, max! / 360));

  useEffect(() => {
    end.value = unMix(value, min! / 360, max! / 360);
  }, [value, end, max, min]);

  const startPos = useDerivedValue(() =>
    polarToCartesian(start.value, r, {x: cx, y: cy}),
  );

  const endPos = useDerivedValue(() =>
    polarToCartesian(end.value, r, {x: cx, y: cy}),
  );

  const animatedPath = useAnimatedProps(() => {
    const p1 = startPos.value;
    const p2 = endPos.value;
    return {
      d: `M${p1.x} ${p1.y} A ${r} ${r} 0 ${end.value > 180 ? 1 : 0} 1 ${p2.x} ${
        p2.y
      }`,
    };
  });

  const animatedCircle = useAnimatedProps(() => {
    const p2 = endPos.value;
    return {
      x: p2.x - 7.5,
      y: p2.y - 7.5,
    };
  });

  const animatedChildrenProps = useAnimatedProps(() => {
    const decimalCount = (num: number) => {
      if (decimals) {
        return decimals;
      }
      const numStr = String(num);
      if (numStr.includes('.')) {
        return numStr.split('.')[1].length;
      }
      return 0;
    };

    const value = interpolate(end.value, [min! / 360, max! / 360], [min! / 360, max! / 360]);

    return {
      defaultValue: `${value.toFixed(decimalCount(step))}`,
      text: `${value.toFixed(decimalCount(step))}`,
    };
  });

  const gestureHandler = useAnimatedGestureHandler({
    onActive: ({x, y}: {x: number; y: number}, ctx: any) => {
      const value = cartesianToPolar(x, y, {x: cx, y: cy}, step);

      ctx.value = interpolate(value, [min! / 360, max! / 360], [min! / 360, max! / 360]);
      end.value = value;
    },
    onFinish: (_, ctx) => {
      runOnJS(props.onValueChange)(ctx.value);
    },
  });
  
  return (
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Animated.View>
        <Svg width={width} height={height}>
          <Circle cx={cx} cy={cy} r={r + BORDER_WIDTH / 2 - 1} fill="blue" />
          <Circle
            cx={cx}
            cy={cy}
            r={r}
            strokeWidth={BORDER_WIDTH}
            fill="url(#fill)"
            stroke="rgba(255, 255, 525, 0.2)"
          />
          <AnimatedPath
            stroke={meterColor}
            strokeWidth={BORDER_WIDTH}
            fill="none"
            animatedProps={animatedPath}
          />
          <AnimatedG animatedProps={animatedCircle} onPress={() => {}}>
            <Circle cx={7.5} cy={7.5} r={DIAL_RADIUS} fill={meterColor} />
          </AnimatedG>
        </Svg>
        {children && children(animatedChildrenProps)}
      </Animated.View>
    </PanGestureHandler>
  );
};

CircleSlider.defaultProps = {
  width: 300,
  height: 300,
  fillColor: ['#fff'],
  meterColor: '#fff',
  min: 0,
  max: 359,
  step: 1,
  onValueChange: (x: any) => x,
};

export default function EmptyExample(): JSX.Element {
  const handleChange = value => console.log(value);
  console.log('EmptyExample');
  return (
    <CircleSlider
      width={325}
      height={325}
      value={0}
      meterColor={'#ffffff'}
      onValueChange={handleChange}>
      {animatedProps => (
        <AnimatedInput
          keyboardType="numeric"
          maxLength={3}
          selectTextOnFocus={false}
          animatedProps={animatedProps}
        />
      )}
    </CircleSlider>
  );
}

```

</details>
Latropos pushed a commit that referenced this pull request Nov 24, 2023
@piaskowyk
Add JSProps on Fabric (#5009)
baa663f 
## Summary

This pull request adds support for JS props in Fabric. The
implementation is available in the common codebase, so there is no
platform-specific code required. This approach doesn't rely on events
since, based on my research, using events would require messy
workarounds with React Native.
Same thing on Paper:
#4821

## Test plan

<details>
<summary>code</summary>

```js
import { TextInput } from 'react-native';
import React, { useEffect } from 'react';
import Svg, {
  Path,
  Circle,
  G,
} from 'react-native-svg';
import Animated, {
  runOnJS,
  useSharedValue,
  useDerivedValue,
  useAnimatedProps,
  useAnimatedGestureHandler,
  interpolate,
} from 'react-native-reanimated';
import {PanGestureHandler} from 'react-native-gesture-handler';

const BORDER_WIDTH = 25;
const DIAL_RADIUS = 22.5;

export const {PI} = Math;
export const TAU = 2 * PI;

const AnimatedPath = Animated.createAnimatedComponent(Path);
const AnimatedG = Animated.createAnimatedComponent(G);
const AnimatedInput = Animated.createAnimatedComponent(TextInput);

const polarToCartesian = (
  angle: number,
  radius: number,
  {x, y}: {x: number; y: number},
) => {
  'worklet';
  const a = ((angle - 90) * Math.PI) / 180.0;
  return {x: x + radius * Math.cos(a), y: y + radius * Math.sin(a)};
};

const cartesianToPolar = (
  x: number,
  y: number,
  {x: cx, y: cy}: {x: number; y: number},
  step = 1,
) => {
  'worklet';

  const value =
    Math.atan((y - cy) / (x - cx)) / (Math.PI / 180) + (x > cx ? 90 : 270);

  return Math.round(value * (1 / step)) / (1 / step);
};

const unMix = (value: number, x: number, y: number) => {
  'worklet';
  return (value - x) / (y - x);
};

type Props = {
  width: number;
  height: number;
  fillColor: string[];
  value: number;
  meterColor: string;
  min?: number;
  max?: number;
  onValueChange: (value: any) => void;
  children: (
    props: Partial<{defaultValue: string; text: string}>,
  ) => React.ReactNode;
  step?: number;
  decimals?: number;
};

const CircleSlider = (props: Props) => {
  const {
    width,
    height,
    value,
    meterColor,
    children,
    min,
    max,
    step = 1,
    decimals,
  } = props;
  const smallestSide = Math.min(width, height);

  const cx = width / 2;
  const cy = height / 2;
  const r = (smallestSide / 2) * 0.85;

  const start = useSharedValue(0);
  const end = useSharedValue(unMix(value, min! / 360, max! / 360));

  useEffect(() => {
    end.value = unMix(value, min! / 360, max! / 360);
  }, [value, end, max, min]);

  const startPos = useDerivedValue(() =>
    polarToCartesian(start.value, r, {x: cx, y: cy}),
  );

  const endPos = useDerivedValue(() =>
    polarToCartesian(end.value, r, {x: cx, y: cy}),
  );

  const animatedPath = useAnimatedProps(() => {
    const p1 = startPos.value;
    const p2 = endPos.value;
    return {
      d: `M${p1.x} ${p1.y} A ${r} ${r} 0 ${end.value > 180 ? 1 : 0} 1 ${p2.x} ${
        p2.y
      }`,
    };
  });

  const animatedCircle = useAnimatedProps(() => {
    const p2 = endPos.value;
    return {
      x: p2.x - 7.5,
      y: p2.y - 7.5,
    };
  });

  const animatedChildrenProps = useAnimatedProps(() => {
    const decimalCount = (num: number) => {
      if (decimals) {
        return decimals;
      }
      const numStr = String(num);
      if (numStr.includes('.')) {
        return numStr.split('.')[1].length;
      }
      return 0;
    };

    const value = interpolate(end.value, [min! / 360, max! / 360], [min! / 360, max! / 360]);

    return {
      defaultValue: `${value.toFixed(decimalCount(step))}`,
      text: `${value.toFixed(decimalCount(step))}`,
    };
  });

  const gestureHandler = useAnimatedGestureHandler({
    onActive: ({x, y}: {x: number; y: number}, ctx: any) => {
      const value = cartesianToPolar(x, y, {x: cx, y: cy}, step);

      ctx.value = interpolate(value, [min! / 360, max! / 360], [min! / 360, max! / 360]);
      end.value = value;
    },
    onFinish: (_, ctx) => {
      runOnJS(props.onValueChange)(ctx.value);
    },
  });
  
  return (
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Animated.View>
        <Svg width={width} height={height}>
          <Circle cx={cx} cy={cy} r={r + BORDER_WIDTH / 2 - 1} fill="blue" />
          <Circle
            cx={cx}
            cy={cy}
            r={r}
            strokeWidth={BORDER_WIDTH}
            fill="url(#fill)"
            stroke="rgba(255, 255, 525, 0.2)"
          />
          <AnimatedPath
            stroke={meterColor}
            strokeWidth={BORDER_WIDTH}
            fill="none"
            animatedProps={animatedPath}
          />
          <AnimatedG animatedProps={animatedCircle} onPress={() => {}}>
            <Circle cx={7.5} cy={7.5} r={DIAL_RADIUS} fill={meterColor} />
          </AnimatedG>
        </Svg>
        {children && children(animatedChildrenProps)}
      </Animated.View>
    </PanGestureHandler>
  );
};

CircleSlider.defaultProps = {
  width: 300,
  height: 300,
  fillColor: ['#fff'],
  meterColor: '#fff',
  min: 0,
  max: 359,
  step: 1,
  onValueChange: (x: any) => x,
};

export default function EmptyExample(): JSX.Element {
  const handleChange = value => console.log(value);
  console.log('EmptyExample');
  return (
    <CircleSlider
      width={325}
      height={325}
      value={0}
      meterColor={'#ffffff'}
      onValueChange={handleChange}>
      {animatedProps => (
        <AnimatedInput
          keyboardType="numeric"
          maxLength={3}
          selectTextOnFocus={false}
          animatedProps={animatedProps}
        />
      )}
    </CircleSlider>
  );
}

```

</details>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tomekzaw tomekzaw tomekzaw left review comments

@piaskowyk piaskowyk piaskowyk approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
4 participants
@Latropos @AlexanderEggers @piaskowyk @tomekzaw