Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useAnimatedProps with SVG transform crash

See original GitHub issue

Description

I am using an SVG G component and I am attempting to translate it’s content in the y axis using useAnimatedProps based upon a shared value. I can’t get useAnimatedProps to successfully set the SVG translation. I may be doing something wrong in the implementation.

Expected behavior

The SVG group is translated to the new y location

Actual behavior

I get the below error and then a full crash.

2021-01-06 09:45:06.886599+0000 Reanimated2Playground[52387:2756775] [native] Error setting property 'transform' of RNSVGGroup with tag #5: JSON value 'translate(0 -100)' of type NSString cannot be converted to a CATransform3D. Did you pass something other than an array?
2021-01-06 09:45:06.952167+0000 Reanimated2Playground[52387:2756775] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'Application tried to present modally a view controller <UIViewController: 0x7fb611420b20> that is already being presented by <UIViewController: 0x7fb62160d160>.'
*** First throw call stack:
(
	0   CoreFoundation                      0x00007fff20420af6 __exceptionPreprocess + 242
	1   libobjc.A.dylib                     0x00007fff20177e78 objc_exception_throw + 48
	2   UIKitCore                           0x00007fff23f70e65 -[UIViewController _presentViewController:withAnimationController:completion:] + 6016
	3   UIKitCore                           0x00007fff23f71876 __63-[UIViewController _presentViewController:animated:completion:]_block_invoke + 98
	4   UIKitCore                           0x00007fff23f71bac -[UIViewController _performCoordinatedPresentOrDismiss:animated:] + 519
	5   UIKitCore                           0x00007fff23f717d4 -[UIViewController _presentViewController:animated:completion:] + 179
	6   UIKitCore                           0x00007fff23f71c62 -[UIViewController presentViewController:animated:completion:] + 155
	7   Reanimated2Playground               0x000000010ff9eb35 -[RCTRedBoxWindow showErrorMessage:withStack:isUpdate:errorCookie:] + 1381
	8   Reanimated2Playground               0x000000010ffa39f4 __67-[RCTRedBox showErrorMessage:withParsedStack:isUpdate:errorCookie:]_block_invoke + 1012
	9   libdispatch.dylib                   0x00000001138427ec _dispatch_call_block_and_release + 12
	10  libdispatch.dylib                   0x00000001138439c8 _dispatch_client_callout + 8
	11  libdispatch.dylib                   0x0000000113851e75 _dispatch_main_queue_callback_4CF + 1152
	12  CoreFoundation                      0x00007fff2038edbb __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 9
	13  CoreFoundation                      0x00007fff2038963e __CFRunLoopRun + 2685
	14  CoreFoundation                      0x00007fff203886d6 CFRunLoopRunSpecific + 567
	15  GraphicsServices                    0x00007fff2bededb3 GSEventRunModal + 139
	16  UIKitCore                           0x00007fff24690e0b -[UIApplication _run] + 912
	17  UIKitCore                           0x00007fff24695cbc UIApplicationMain + 101
	18  Reanimated2Playground               0x000000010f80fc70 main + 112
	19  libdyld.dylib                       0x00007fff202593e9 start + 1
)
libc++abi.dylib: terminating with uncaught exception of type NSException
*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'Application tried to present modally a view controller <UIViewController: 0x7fb611420b20> that is already being presented by <UIViewController: 0x7fb62160d160>.'
terminating with uncaught exception of type NSException
CoreSimulator 732.18.6 - Device: iPhone 11 Pro (91659218-9526-4752-8960-02611E7AFD4E) - Runtime: iOS 14.3 (18C61) - DeviceType: iPhone 11 Pro

Steps To Reproduce

Use the below templates of a use useAnimatedProps
Try the one that uses the output of the interpolation - crash
Try the one that writes the fixed value - works

Snack or minimal code example

import React, {useEffect} from 'react';
import {StyleSheet, View} from 'react-native';
import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedProps,
  Easing,
  interpolate,
} from 'react-native-reanimated';
import {G, Svg, Rect} from 'react-native-svg';

const AnimatedG = Animated.createAnimatedComponent(G);

export default function AnimatedSVGPropsUpdateExample(props) {
  const valueToAnimate = useSharedValue(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      valueToAnimate.value = withTiming(Math.floor(Math.random() * 15000), {
        duration: 1000,
        easing: Easing.linear,
      });
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  const failingTransform = useAnimatedProps(() => {
    const yTranslate = Math.trunc(
      interpolate(valueToAnimate.value,[0, 15000],[-150, 150])
    );
    return {transform: `translate(0 ${yTranslate})`};
  });

  const workingTransform = useAnimatedProps(() => {
    const yTranslate = Math.trunc(
      interpolate(valueToAnimate.value,[0, 15000],[-150, 150])
    );
    return {transform: `translate(0 150)`};
  });

  return (
    <View
      style={[
        StyleSheet.absoluteFill,
        {alignItems: 'center', justifyContent: 'center'},
      ]}>
      <Svg style={{position: 'absolute'}}>
        <AnimatedG animatedProps={failingTransform}>
          <Rect
            x="50"
            y="200"
            width="70"
            height="70"
            stroke="red"
            strokeWidth="2"
            fill="yellow"
          />
        </AnimatedG>
      </Svg>
    </View>
  );
}