Add inline styles without animation functions #4062

graszka22 · 2023-02-17T01:04:46Z

Summary

a rewrite of Add inline styles #3354
adds inline styles without animation functions just by starting a mapper
a mapper is started only when there are inline styles or inline styles have changed, also there is just one mapper for all styles properties for the given component
adds a way to disable inline styles warning in plugin options
adds support for transform property in styles, because I forgot to check that in the previous PR
it would be nice to have tests for this but toHaveAnimatedStyle won't work without any modifications (probably adding another updater just for jest testing like in useAnimatedStyles), so maybe I'll add it later

Test plan

Run this in ReanimatedExample, FabricExample and WebExample:

Example

import Animated, {
  useSharedValue,
  withTiming,
  Easing,
} from 'react-native-reanimated';
import { View, Button } from 'react-native';
import React from 'react';

function AnimatedStyleUpdateExample(): React.ReactElement {
  const randomWidth = useSharedValue(10);

  const config = {
    duration: 500,
    easing: Easing.bezierFn(0.5, 0.01, 0, 1),
  };

  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
      }}>
      <Animated.View
        style={[
          { height: 80, backgroundColor: 'black', margin: 30 },
          { width: randomWidth },
          { transform: [{ translateX: randomWidth }] },
        ]}
      />
      <Button
        title="toggle"
        onPress={() => {
          randomWidth.value = withTiming(Math.random() * 350, config);
        }}
      />
    </View>
  );
}

export default AnimatedStyleUpdateExample;

kmagiera

This is much better 👏 👏

I left a couple of comments inline. I also think that we can relatively easily extend this now to also work for other non-style properties. We now use useAnimatedProps but since it is just an alias for useAnimatedStyle, making this inline styles approach work for non-style props should be very much limited to recognizing if shared value is used fo a given prop and then including it in newInlineStyles object (ofc we would rename this variable in such case)

kmagiera · 2023-02-17T11:31:45Z

src/createAnimatedComponent.tsx

+      );
+
+      if (hasChanged) {
+        const sharableViewDescriptors =


Can we maybe initialized veiw descriptors lazily here? We only put at most one item there for inline styles. Alternatively we can change updateProps method to conditionally take viewTag instead of view descriptors structure that just seem wasteful here

kmagiera · 2023-02-17T12:13:07Z

src/createAnimatedComponent.tsx

+
+        const maybeViewRef = NativeReanimatedModule.native
+          ? undefined
+          : ({ items: new Set([this]) } as ViewRefSet<any>); // see makeViewsRefSet


we can follow similar approach with view descriptors and only define them here, no?

kmagiera · 2023-02-17T12:19:41Z

src/createAnimatedComponent.tsx

+              const newStyle: StyleProps = {};
+              for (const [key, styleValue] of Object.entries(style)) {
+                if (
+                  styleValue.value === undefined &&


can we define a method isSharedValue and use it here? I was thinking about adding such method for some time and it'll be useful in other places as well.

kmagiera · 2023-02-17T12:20:40Z

src/createAnimatedComponent.tsx

+                  !(key === 'transform' && isInlineStyleTransform(styleValue))
+                ) {
+                  newStyle[key] = styleValue;
+                }


if it is shared value don't we still include it in newStyle ? Much like we do with useAnimatedStyle where we just take the initial value, so here maybe we should do newStyle[key] = styleValue.value

kmagiera · 2023-02-17T12:21:42Z

src/createAnimatedComponent.tsx

+              update[key] = styleValue.map((t: Record<string, any>) =>
+                Object.keys(t).reduce(
+                  (acc, curr) => ({ ...acc, [curr]: t[curr].value }),
+                  {}


I'd prefer to rewrite this bit using simple loops. One aspect is that object spread isn't typically very fast and another one is readability. Using map method is ok, but reduce with spread is a bit too much I believe

kmagiera

Looks good, left a few more comments inline

kmagiera · 2023-02-20T10:02:43Z

src/reanimated2/utils.ts

+
+export function isSharedValue(obj: any) {
+  'worklet';
+  return typeof obj === 'object' && obj.value !== undefined;


would be better to add a new field that we can use to distinguish shared value w/o risking conflicts. I think with SVG we already have similar problems in the past as certain objects have value fields there. This new field can be added in mutables.ts (ideally we should use JS Symbol instead of field with unique name but symbols are not yet supported to be sent to the ui thread).

In addition, this method should definition should look as follows:
export function isSharedValue<T>(value: any): value is SharedValue<T>

This way typescript would know that if the method return true, then the object is of certain type and we could avoid casting in the future.

kmagiera · 2023-02-21T10:54:32Z

plugin.js

+          t.callExpression(
+            t.memberExpression(t.identifier('console'), t.identifier('warn')),
+            [
+              t.stringLiteral(


Would it make sense if instead of doing console.log(message) here we'd generate require('react-native-reanimated).showUseOfValueInStyleWarning() instead. This way, we could put the message in the library's code and hence we won't need to update snapshots every time we want to change it

I used the function to get the warning message but left the console.warn call in the plugin. That way we still get a nice arrow in Source section that shows exactly where is the error.

When console.warn is in the function we'd get something like that:

kmagiera · 2023-02-21T11:03:51Z

src/createAnimatedComponent.tsx

+        if (Object.keys(newInlineStyles).length) {
+          this._inlineStylesMapperId = startMapper(
+            updaterFunction,
+            Object.values(newInlineStyles)


it seem like if there is a transform object with only one of transform elements being a shared value, this won't actually extract that shared value. Can you verify if this works ok?

Surprisingly it works ok. See extractInputs method in mappers.ts. It extracts all shared values from an object and it's run on all inputs when starting the mapper.

kmagiera

Thanks for making all the updates.Looks good!

kmagiera · 2023-02-21T21:39:11Z

plugin/index.js

+}
+
+function processInlineStylesWarning(t, path, state) {
+  if (state.opts.disableInlineStylesWarning) return;


We should only generate warning for DEV builds. In prod you won't see the warning appear anyways.

There is isRelease function used in the plugin that you can call here to check the build variation

## Summary Based on #4062 Adds support for inline animated props like this: ```js const AnimatedCircle = Animated.createAnimatedComponent(Circle); export default function SvgExample() { const sv = useSharedValue('0%'); sv.value = withRepeat(withTiming('50%', { duration: 500 }), -1, true); return ( <View style={styles.container}> <Svg height="200" width="200"> <AnimatedCircle cx="50%" cy="50%" fill="lime" r={sv} /> </Svg> </View> ); } ``` This syntax is so pretty 🤩 but there is one issue with it though. We can't differentiate between a shared value and ordinary object with `value` prop. It may happen (though I think it's rather unlikely) that user doesn't want the prop to animate but just wants to pass an object or shared value. So I'm checking if it's a whitelisted prop (user had to whitelist it anyway). If that's not enough we may add whitelist/blacklist per component in `createAnimatedComponent`. Or use `animatedProps` prop but that won't be so pretty ;_;. Also I'm no adding a warning in babel plugin. Imo it would lead to too many false positives. Something like `<Component prop={obj.value} />` is normal. ## Test plan Example above. Run on ReanimatedExample, FabricExample and something similar on WebExample.

## Summary - a rewrite of software-mansion#3354 - adds inline styles without animation functions just by starting a mapper - a mapper is started only when there are inline styles or inline styles have changed, also there is just one mapper for all styles properties for the given component - adds a way to disable inline styles warning in plugin options - adds support for transform property in styles, because I forgot to check that in the previous PR - it would be nice to have tests for this but `toHaveAnimatedStyle` won't work without any modifications (probably adding another updater just for jest testing like in `useAnimatedStyles`), so maybe I'll add it later ## Test plan Run this in ReanimatedExample, FabricExample and WebExample: <details> <summary>Example</summary> ```js import Animated, { useSharedValue, withTiming, Easing, } from 'react-native-reanimated'; import { View, Button } from 'react-native'; import React from 'react'; function AnimatedStyleUpdateExample(): React.ReactElement { const randomWidth = useSharedValue(10); const config = { duration: 500, easing: Easing.bezierFn(0.5, 0.01, 0, 1), }; return ( <View style={{ flex: 1, flexDirection: 'column', }}> <Animated.View style={[ { height: 80, backgroundColor: 'black', margin: 30 }, { width: randomWidth }, { transform: [{ translateX: randomWidth }] }, ]} /> <Button title="toggle" onPress={() => { randomWidth.value = withTiming(Math.random() * 350, config); }} /> </View> ); } export default AnimatedStyleUpdateExample; ``` </details>

## Summary Based on software-mansion#4062 Adds support for inline animated props like this: ```js const AnimatedCircle = Animated.createAnimatedComponent(Circle); export default function SvgExample() { const sv = useSharedValue('0%'); sv.value = withRepeat(withTiming('50%', { duration: 500 }), -1, true); return ( <View style={styles.container}> <Svg height="200" width="200"> <AnimatedCircle cx="50%" cy="50%" fill="lime" r={sv} /> </Svg> </View> ); } ``` This syntax is so pretty 🤩 but there is one issue with it though. We can't differentiate between a shared value and ordinary object with `value` prop. It may happen (though I think it's rather unlikely) that user doesn't want the prop to animate but just wants to pass an object or shared value. So I'm checking if it's a whitelisted prop (user had to whitelist it anyway). If that's not enough we may add whitelist/blacklist per component in `createAnimatedComponent`. Or use `animatedProps` prop but that won't be so pretty ;_;. Also I'm no adding a warning in babel plugin. Imo it would lead to too many false positives. Something like `<Component prop={obj.value} />` is normal. ## Test plan Example above. Run on ReanimatedExample, FabricExample and something similar on WebExample.

graszka22 added 7 commits February 16, 2023 23:10

Shared value only inline styles

62cc552

Make it work for tranforms

46355ac

docs

2159fc2

babel plugin

d3f0fec

Add a way to disable inline styles warning

82ba1d6

types

cc0b648

fix fabric?

b357772

graszka22 requested a review from kmagiera February 17, 2023 01:04

kmagiera reviewed Feb 17, 2023

View reviewed changes

graszka22 added 6 commits February 17, 2023 14:46

review changes

e31a960

initial render

a9a651f

Merge branch 'main' into graszka22/sv-only-inline-styles

3fa388d

Fix plugin on spread syntax

e50dbda

Fix snap

362d291

improve isSharedValue

dedf04d

graszka22 mentioned this pull request Feb 18, 2023

Add inline animated props #4068

Merged

kmagiera reviewed Feb 21, 2023

View reviewed changes

graszka22 added 3 commits February 21, 2023 13:19

Merge branch 'main' into graszka22/sv-only-inline-styles

e1d8a77

review changes

1922ec7

plugin review changes

1026861

graszka22 requested a review from kmagiera February 21, 2023 15:55

fix tests

64638ff

kmagiera approved these changes Feb 21, 2023

View reviewed changes

kmagiera reviewed Feb 21, 2023

View reviewed changes

Don't show warn on production build

21054e4

graszka22 added this pull request to the merge queue Feb 22, 2023

Merged via the queue into main with commit a073f21 Feb 22, 2023

graszka22 deleted the graszka22/sv-only-inline-styles branch February 22, 2023 02:36

tjzel added a commit that referenced this pull request Feb 27, 2023

included #4062 plugin changes

f9043d4

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add inline styles without animation functions #4062

Add inline styles without animation functions #4062

graszka22 commented Feb 17, 2023

kmagiera left a comment

kmagiera Feb 17, 2023

kmagiera Feb 17, 2023

kmagiera Feb 17, 2023

kmagiera Feb 17, 2023

kmagiera Feb 17, 2023

kmagiera left a comment

kmagiera Feb 20, 2023

kmagiera Feb 21, 2023

graszka22 Feb 21, 2023

kmagiera Feb 21, 2023

graszka22 Feb 21, 2023

kmagiera left a comment

kmagiera Feb 21, 2023

kmagiera Feb 21, 2023

Add inline styles without animation functions #4062

Add inline styles without animation functions #4062

Conversation

graszka22 commented Feb 17, 2023

Summary

Test plan

kmagiera left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kmagiera left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kmagiera left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment