Can't get skia and reanimated to work together

[FrancoTanzarella]

I'm trying to do a very simple animation (rotate and scale) on a set of icons depending on which button was pressed and has active state.

On my local I get this error when trying to apply the transitions transform={[{ rotate: doRotate }, { scale: doScale }]}.

On the snack I get no such errors but nothing happens either way. Can someone please help me with this. Is the problem my implementation?

This is the snack - https://snack.expo.dev/@francot/skia-and-reanimated-

The code for the component.

import React, { useEffect } from 'react';
import styled from '@emotion/native';
import { useSharedValue, withTiming } from 'react-native-reanimated';
import {
  Canvas,
  Group,
  mix,
  Path,
  useSharedValueEffect,
  useValue,
} from '@shopify/react-native-skia';

type ButtonGroupedProps = {
  options: {
    label: string;
    key: string;
  }[];
  selected: string;
  handleOptionPress: (argument: string) => void;
};

const GroupButton = ({
  isActive,
  option,
  optionPress,
}: {
  isActive: boolean;
  option: { key: string; label: string };
  optionPress: (value: string) => void;
}) => {
  const doRotate = useValue(0);
  const doScale = useValue(0);
  const progress = useSharedValue(0);

  useEffect(() => {
    progress.value = withTiming(isActive ? 1 : 0, { duration: 300 });
  }, [progress, isActive]);

  useSharedValueEffect(() => {
    doRotate.current = mix(progress.value, 0, 90);
    doScale.current = mix(progress.value, 0, 1);
  }, progress);

  return (
    <Button onPress={() => optionPress(option.key)} active={isActive}>
      <Canvas style={{ width: 26, height: 26 }}>
        <Group
          transform={[{ rotate: doRotate }, { scale: doScale }]}
          origin={{ x: 13, y: 13 }}
        >
          <Path
            path="M13 3L22.8995 12.8995L13 22.799L3.10051 12.8995L13 3Z"
            color="#B5FFAF"
          />
        </Group>
        <Path
          path="M24.5 13C24.5 19.3513 19.3513 24.5 13 24.5C6.64873 24.5 1.5 19.3513 1.5 13C1.5 6.64873 6.64873 1.5 13 1.5C19.3513 1.5 24.5 6.64873 24.5 13Z"
          color="#B5FFAF"
          strokeWidth={2}
          style="stroke"
          opacity={isActive ? 1 : 0.5}
        />
      </Canvas>

      <Label>{option.label}</Label>
    </Button>
  );
};

export const ButtonGrouped = ({
  options,
  selected,
  handleOptionPress,
}: ButtonGroupedProps) => {
  return (
    <ButtonContainer>
      {options.map((option) => {
        const active = selected === option.key;

        return (
          <GroupButton
            key={option.key}
            isActive={active}
            optionPress={handleOptionPress}
            option={option}
          />
        );
      })}
    </ButtonContainer>
  );
};

const ButtonContainer = styled.View`
  align-items: center;
  justify-content: center;
  flex-direction: row;
`;

const Button = styled.Pressable<{ active: boolean }>`
  background-color: ${({active}) => active ? '#626262' : '#545454'};
  height: 60px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px;
  margin: 0 0.25px;
`;

const Label = styled.Text`
  color: white;
  font-size: 16px;
  margin-left: 10px;
`;

[wcandillon]

The code looks good. is the issue only on RN web? or also on iOS and/or Android?

[FrancoTanzarella]

Hi William.

I'm working with iOS and Android only.

[wcandillon]

It looks like you fixed your issue? (the snack works well?)

[FrancoTanzarella]

No. I just realised, looking at the snack code, that what I pasted there was not the version that is giving me the issue. I fixed the snack with the correct code but on the snack I don't have the error I get on my local (bare RN) project.

as soon as I try to use the animated values from skia I get the above (screenshot) error.

    ...

const doRotate = useValue(0);
  const doScale = useValue(0);

useSharedValueEffect(() => {
    doRotate.current = mix(progress.value, 0, 90);
    doScale.current = mix(progress.value, 0, 1);
}, progress);

    ...

<Group
    transform={[{ rotate: doRotate }, { scale: doScale }]}
     origin={{ x: 13, y: 13 }}
>

[wcandillon]

you need to use a computed value for the transform, see https://shopify.github.io/react-native-skia/docs/animations/values#computed-value and https://github.com/Shopify/react-native-skia/blob/main/example/src/Examples/Breathe/Breathe.tsx#L63

[FrancoTanzarella]

Nice one. Thanks!