[v3] - Issue with animating Text nodes when using unistyles variants

[mateioprea]

Description

There seems to be an issue when animating Text (probably other views as well but I only had Texts variants in my app) with unistyles variants.

Steps to Reproduce

1. Create a Typography component using variants (it only happens when using variants apparently).

import React, {PropsWithChildren} from 'react';
import {Text} from 'react-native';
import {StyleSheet, UnistylesVariants} from 'react-native-unistyles';

interface TypographyProps
  extends PropsWithChildren,
    UnistylesVariants<typeof styles> {}

export default function Typography({children, isBold, size}: TypographyProps) {
  styles.useVariants({
    isBold,
    size,
  });
  return <Text style={styles.title}>{children}</Text>;
}

const styles = StyleSheet.create(theme => ({
  title: {
    color: theme.colors.white,
    variants: {
      isBold: {
        true: {
          fontWeight: 'bold',
        },
      },
      size: {
        extraSmall: {
          fontSize: 14,
        },
        small: {
          fontSize: 16,
        },
        medium: {
          fontSize: 18,
        },
        large: {
          fontSize: 26,
        },
        extraLarge: {
          fontSize: 36,
        },
        default: {
          fontSize: 5,
        },
      },
    },
  },
}));

2. Try to animate the component in a modal / screen using entering layout animation from reanimated:

<Animated.View
          entering={SlideInRight.springify().mass(1).stiffness(170).damping(26)}
          exiting={SlideOutRight.springify()
            .mass(1)
            .stiffness(170)
            .damping(26)}>
            <Typography size="extraLarge">Test</Typography>
</Animated.View>

You'll see that the animation will have a different place / lags behind. Also, what I found is that its only happening when using variants. If you remove:

 styles.useVariants({
    isBold,
    size,
  });

everything's fine.

Snack or Repository Link (Optional)

No response

Unistyles Version

3.0.0-beta.2

React Native Version

0.76.5

Platforms

iOS

Expo

No

[shahzaib78631]

+1 Having same issue with animated Views and Texts

[jpudysz]

Will dedicate one beta to support Reanimated worklets + animations. Thanks for the report