Shared style (software-mansion#1470)

## Description I added the possibility to use one instance of `useAnimationStyle()` for many components. `AnimationStyle` is connected with view by ViewDescriptor object. I changed this to a set of `ViewDescriptors` and now `AnimationStyle` can be shared between many components. Fixes software-mansion#1263 ## Example of code <details> <summary>code</summary> ```Js import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing, } from 'react-native-reanimated'; import { Button, ScrollView } from 'react-native'; import React from 'react'; export default function SharedAnimatedStyleUpdateExample(props) { const randomWidth = useSharedValue(10); const config = { duration: 500, easing: Easing.bezier(0.5, 0.01, 0, 1), }; const style = useAnimatedStyle(() => { return { width: withTiming(randomWidth.value, config), }; }); const renderList = () => { const items = []; for (let i = 0; i < 100; i++) { items.push( <Animated.View key={i} style={[ { width: 100, height: 5, backgroundColor: 'black', margin: 1 }, style, ]} /> ); } return items; }; return ( <ScrollView style={{ flex: 1, flexDirection: 'column', }}> <Button title="toggle" onPress={() => { randomWidth.value = Math.random() * 350; }} /> {renderList()} </ScrollView> ); } ``` </details> <details> <summary>code2</summary> ```Js import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing, } from 'react-native-reanimated'; import { View, Button } from 'react-native'; import React, { useState } from 'react'; export default function AnimatedStyleUpdateExample(props) { const randomWidth = useSharedValue(10); const [counter, setCounter] = useState(0); const [counter2, setCounter2] = useState(0); const [itemList, setItemList] = useState([]); const [toggleState, setToggleState] = useState(false); const config = { duration: 500, easing: Easing.bezier(0.5, 0.01, 0, 1), }; const style = useAnimatedStyle(() => { return { width: withTiming(randomWidth.value, config), }; }); const staticObject = <Animated.View style={[ { width: 100, height: 8, backgroundColor: 'black', margin: 1 }, style, ]} /> const renderItems = () => { let output = [] for(let i = 0; i < counter; i++) { output.push( <Animated.View key={i + 'a'} style={[ { width: 100, height: 8, backgroundColor: 'blue', margin: 1 }, style, ]} /> ) } return output } return ( <View style={{ flex: 1, flexDirection: 'column', }}> <Button title="animate" onPress={() => { randomWidth.value = Math.random() * 350; }} /> <Button title="increment counter" onPress={() => { setCounter(counter + 1) }} /> <Button title="add item to static lists" onPress={() => { setCounter2(counter2 + 1) setItemList([...itemList, <Animated.View key={counter2 + 'b'} style={[ { width: 100, height: 8, backgroundColor: 'green', margin: 1 }, style, ]} />]) }} /> <Button title="toggle state" onPress={() => { setToggleState(!toggleState) }} /> <Animated.View style={[ { width: 100, height: 8, backgroundColor: 'orange', margin: 1 }, style, ]} /> {toggleState && <Animated.View style={[ { width: 100, height: 8, backgroundColor: 'black', margin: 1 }, style, ]} />} {toggleState && staticObject} {renderItems()} {itemList} </View> ); } ``` </details> ## Change before changes: ![1](https://user-images.githubusercontent.com/36106620/102333064-3100b280-3f8d-11eb-9ad8-c61facd2d1af.gif) final result: ![3](https://user-images.githubusercontent.com/36106620/102333162-5392cb80-3f8d-11eb-9d71-e2b800385098.gif)
pinchez254 · Jul 19, 2021 · 0c2f66f · 0c2f66f
1 parent f9e5db9
commit 0c2f66f
Show file tree

Hide file tree

Showing 15 changed files with 248 additions and 112 deletions.
diff --git a/Common/cpp/NativeModules/NativeReanimatedModule.cpp b/Common/cpp/NativeModules/NativeReanimatedModule.cpp
@@ -119,9 +119,7 @@ jsi::Value NativeReanimatedModule::startMapper(
                                                const jsi::Value &inputs,
                                                const jsi::Value &outputs,
                                                const jsi::Value &updater,
-                                               const jsi::Value &tag,
-                                               const jsi::Value &name
-                                               )
+                                               const jsi::Value &viewDescriptors)
 {
   static unsigned long MAPPER_ID = 1;
 
@@ -136,8 +134,7 @@ jsi::Value NativeReanimatedModule::startMapper(
     optimalizationLvl = optimalization.asNumber();
   }
   auto updaterSV = ShareableValue::adapt(rt, updater, this);
-  const int tagInt = tag.asNumber();
-  const std::string nameStr = name.asString(rt).utf8(rt);
+  auto viewDescriptorsSV = ShareableValue::adapt(rt, viewDescriptors, this);
 
   scheduler->scheduleOnUI([=] {
     auto mapperFunction = mapperShareable->getValue(*runtime).asObject(*runtime).asFunction(*runtime);
@@ -148,12 +145,11 @@ jsi::Value NativeReanimatedModule::startMapper(
                                                                      newMapperId,
                                                                      mapperFunctionPointer,
                                                                      inputMutables,
-                                                                     outputMutables,
-                                                                     updaterSV,
-                                                                     tagInt,
-                                                                     nameStr,
-                                                                     optimalizationLvl
+                                                                     outputMutables
                                                                      );
+    if(optimalizationLvl > 0) {
+      mapperPointer->enableFastMode(optimalizationLvl, updaterSV, viewDescriptorsSV);
+    }
     mapperRegistry->startMapper(mapperPointer);
     maybeRequestRender();
   });

diff --git a/Common/cpp/NativeModules/NativeReanimatedModuleSpec.cpp b/Common/cpp/NativeModules/NativeReanimatedModuleSpec.cpp
@@ -52,8 +52,7 @@ static jsi::Value __hostFunction_NativeReanimatedModuleSpec_startMapper(
                     std::move(args[1]),
                     std::move(args[2]),
                     std::move(args[3]),
-                    std::move(args[4]),
-                    std::move(args[5]));
+                    std::move(args[4]));
 }
 
 static jsi::Value __hostFunction_NativeReanimatedModuleSpec_stopMapper(
@@ -110,7 +109,7 @@ NativeReanimatedModuleSpec::NativeReanimatedModuleSpec(std::shared_ptr<CallInvok
 
 
   methodMap_["startMapper"] = MethodMetadata{
-    6, __hostFunction_NativeReanimatedModuleSpec_startMapper};
+    5, __hostFunction_NativeReanimatedModuleSpec_startMapper};
   methodMap_["stopMapper"] = MethodMetadata{
     1, __hostFunction_NativeReanimatedModuleSpec_stopMapper};
 

diff --git a/Common/cpp/Tools/Mapper.cpp b/Common/cpp/Tools/Mapper.cpp
@@ -8,25 +8,13 @@ Mapper::Mapper(NativeReanimatedModule *module,
                unsigned long id,
                std::shared_ptr<jsi::Function> mapper,
                std::vector<std::shared_ptr<MutableValue>> inputs,
-               std::vector<std::shared_ptr<MutableValue>> outputs,
-               std::shared_ptr<ShareableValue> updater,
-               const int viewTag,
-               const std::string& viewName,
-               const int optimalizationLvl):
+               std::vector<std::shared_ptr<MutableValue>> outputs):
 id(id),
 module(module),
 mapper(mapper),
 inputs(inputs),
-outputs(outputs),
-viewTag(viewTag),
-optimalizationLvl(optimalizationLvl)
+outputs(outputs)
 {
-  jsi::Runtime* rt = module->runtime.get();
-  this->viewName = jsi::Value(*rt, jsi::String::createFromUtf8(*rt, viewName));
-  updateProps = &module->updaterFunction;
-  userUpdater = std::make_shared<jsi::Function>(updater->getValue(*rt).asObject(*rt).asFunction(*rt));
-
-
   auto markDirty = [this, module]() {
     this->dirty = true;
     module->maybeRequestRender();
@@ -39,11 +27,40 @@ optimalizationLvl(optimalizationLvl)
 void Mapper::execute(jsi::Runtime &rt) {
   dirty = false;
   if(optimalizationLvl == 0) {
-    mapper->callWithThis(rt, *mapper);// call styleUpdater
+    mapper->callWithThis(rt, *mapper); // call styleUpdater
   }
   else {
-    (*updateProps)(rt, viewTag, viewName, userUpdater->call(rt).asObject(rt));
+    for(auto& viewDescriptor : viewDescriptors) {
+      (*updateProps)(rt, viewDescriptor.tag, viewDescriptor.name, userUpdater->call(rt).asObject(rt));
+    }
+  }
+}
+
+void Mapper::enableFastMode(
+  const int optimalizationLvl,
+  const std::shared_ptr<ShareableValue>& updater,
+  const std::shared_ptr<ShareableValue>& jsViewDescriptors
+) {
+  if(optimalizationLvl == 0) {
+    return;
   }
+  this->optimalizationLvl = optimalizationLvl;
+  updateProps = &module->updaterFunction;
+  jsi::Runtime* rt = module->runtime.get();
+  userUpdater = std::make_shared<jsi::Function>(updater->getValue(*rt).asObject(*rt).asFunction(*rt));
+  auto jsViewDescriptorArray = jsViewDescriptors->getValue(*rt)
+                                .getObject(*rt)
+                                .getProperty(*rt, "value")
+                                .asObject(*rt)
+                                .getArray(*rt);
+  for(int i = 0; i < jsViewDescriptorArray.length(*rt); ++i) {
+    auto jsViewDescriptor = jsViewDescriptorArray.getValueAtIndex(*rt, i).getObject(*rt);
+    viewDescriptors.push_back(ViewDescriptor {
+      (int)jsViewDescriptor.getProperty(*rt, "tag").asNumber(),
+      jsViewDescriptor.getProperty(*rt, "name"),
+    });
+  }
+
 }
 
 Mapper::~Mapper() {

diff --git a/Common/cpp/headers/NativeModules/NativeReanimatedModule.h b/Common/cpp/headers/NativeModules/NativeReanimatedModule.h
@@ -48,8 +48,7 @@ class NativeReanimatedModule : public NativeReanimatedModuleSpec, public Runtime
                          const jsi::Value &inputs,
                          const jsi::Value &outputs,
                          const jsi::Value &updater,
-                         const jsi::Value &tag,
-                         const jsi::Value &name) override;
+                         const jsi::Value &viewDescriptors) override;
   void stopMapper(jsi::Runtime &rt, const jsi::Value &mapperId) override;
 
   jsi::Value registerEventHandler(jsi::Runtime &rt, const jsi::Value &eventHash, const jsi::Value &worklet) override;

diff --git a/Common/cpp/headers/NativeModules/NativeReanimatedModuleSpec.h b/Common/cpp/headers/NativeModules/NativeReanimatedModuleSpec.h
@@ -36,8 +36,7 @@ class JSI_EXPORT NativeReanimatedModuleSpec : public TurboModule {
                                  const jsi::Value &inputs,
                                  const jsi::Value &outputs,
                                  const jsi::Value &updater,
-                                 const jsi::Value &tag,
-                                 const jsi::Value &name) = 0;
+                                 const jsi::Value &viewDescriptors) = 0;
   virtual void stopMapper(jsi::Runtime &rt, const jsi::Value &mapperId) = 0;
 
   // events

diff --git a/Common/cpp/headers/Tools/Mapper.h b/Common/cpp/headers/Tools/Mapper.h
@@ -11,6 +11,11 @@ namespace reanimated {
 
 class MapperRegistry;
 
+struct ViewDescriptor {
+  int tag;
+  jsi::Value name;
+};
+
 class Mapper : public std::enable_shared_from_this<Mapper> {
   friend MapperRegistry;
 private:
@@ -22,21 +27,21 @@ class Mapper : public std::enable_shared_from_this<Mapper> {
   bool dirty = true;
   std::shared_ptr<jsi::Function> userUpdater;
   UpdaterFunction* updateProps;
-  jsi::Value viewName;
-  int viewTag;
+  std::vector<ViewDescriptor> viewDescriptors;
   int optimalizationLvl = 0;
 
 public:
   Mapper(NativeReanimatedModule *module,
          unsigned long id,
          std::shared_ptr<jsi::Function> mapper,
          std::vector<std::shared_ptr<MutableValue>> inputs,
-         std::vector<std::shared_ptr<MutableValue>> outputs,
-         std::shared_ptr<ShareableValue> updater,
-         const int viewTag,
-         const std::string& viewName,
-         const int optimalizationLvl);
+         std::vector<std::shared_ptr<MutableValue>> outputs);
   void execute(jsi::Runtime &rt);
+  void enableFastMode(
+    const int optimalizationLvl,
+    const std::shared_ptr<ShareableValue>& updater,
+    const std::shared_ptr<ShareableValue>&jsViewDescriptors
+  );
   virtual ~Mapper();
 };
 

diff --git a/Example/src/AnimatedStyleUpdateExample.tsx b/Example/src/AnimatedStyleUpdateExample.tsx
@@ -43,4 +43,4 @@ function AnimatedStyleUpdateExample(): React.ReactElement {
   );
 }
 
-export default AnimatedStyleUpdateExample;
+export default AnimatedStyleUpdateExample;
diff --git a/plugin.js b/plugin.js
@@ -121,6 +121,7 @@ const blacklistedFunctions = new Set([
   'apply',
   'call',
   '__callAsync',
+  'includes',
 ]);
 
 const possibleOptFunction = new Set(['interpolate']);
@@ -275,7 +276,7 @@ function buildWorkletString(t, fun, closureVariables, name) {
   return generate(workletFunction, { compact: true }).code;
 }
 
-function processWorkletFunction(t, fun, fileName, options = {}) {
+function processWorkletFunction(t, fun, fileName) {
   if (!t.isFunctionParent(fun)) {
     return;
   }
@@ -284,6 +285,7 @@ function processWorkletFunction(t, fun, fileName, options = {}) {
   const closure = new Map();
   const outputs = new Set();
   const closureGenerator = new ClosureGenerator();
+  const options = {};
 
   // We use copy because some of the plugins don't update bindings and
   // some even break them
@@ -302,7 +304,13 @@ function processWorkletFunction(t, fun, fileName, options = {}) {
     babelrc: false,
     configFile: false,
   });
-
+  if (
+    fun.parent &&
+    fun.parent.callee &&
+    fun.parent.callee.name === 'useAnimatedStyle'
+  ) {
+    options.optFlags = isPossibleOptimization(transformed.ast);
+  }
   traverse(transformed.ast, {
     ReferencedIdentifier(path) {
       const name = path.node.name;
@@ -498,12 +506,7 @@ function processIfWorkletNode(t, fun, fileName) {
               directive.value.value === 'worklet'
           )
         ) {
-          const flags = isPossibleOptimization(fun);
-          if (flags) {
-            processWorkletFunction(t, fun, fileName, { optFlags: flags });
-          } else {
-            processWorkletFunction(t, fun, fileName);
-          }
+          processWorkletFunction(t, fun, fileName);
         }
       }
     },
@@ -547,7 +550,7 @@ const STATEMENTLESS_FLAG = 0b00000010;
 function isPossibleOptimization(fun) {
   let isFunctionCall = false;
   let isSteatements = false;
-  fun.scope.path.traverse({
+  traverse(fun, {
     CallExpression(path) {
       if (!possibleOptFunction.has(path.node.callee.name)) {
         isFunctionCall = true;

diff --git a/src/createAnimatedComponent.js b/src/createAnimatedComponent.js
@@ -73,6 +73,8 @@ export default function createAnimatedComponent(Component, options = {}) {
 
   class AnimatedComponent extends React.Component {
     _invokeAnimatedPropsCallbackOnMount = false;
+    _styles = null;
+    _viewTag = -1;
 
     constructor(props) {
       super(props);
@@ -87,6 +89,7 @@ export default function createAnimatedComponent(Component, options = {}) {
       this._detachPropUpdater();
       this._propsAnimated && this._propsAnimated.__detach();
       this._detachNativeEvents();
+      this._detachStyles();
       this.sv = null;
     }
 
@@ -143,6 +146,25 @@ export default function createAnimatedComponent(Component, options = {}) {
       }
     }
 
+    _detachStyles() {
+      if (Platform.OS === 'web') {
+        for (const style of this._styles) {
+          if (style.viewsRef) {
+            style.viewsRef.remove(this);
+          }
+        }
+      } else if (this._viewTag !== -1) {
+        for (const style of this._styles) {
+          if (style?.viewDescriptors) {
+            style.viewDescriptors.remove(this._viewTag);
+          }
+        }
+        if (this.props.animatedProps?.viewDescriptors) {
+          this.props.animatedProps.viewDescriptors.remove(this._viewTag);
+        }
+      }
+    }
+
     _reattachNativeEvents(prevProps) {
       const node = this._getEventViewRef();
       const attached = new Set();
@@ -261,6 +283,7 @@ export default function createAnimatedComponent(Component, options = {}) {
         ? this.props.style
         : [this.props.style];
       styles = flattenArray(styles);
+      this._styles = styles;
       let viewTag, viewName;
       if (Platform.OS === 'web') {
         viewTag = findNodeHandle(this);
@@ -289,10 +312,11 @@ export default function createAnimatedComponent(Component, options = {}) {
           adaptViewConfig(hostInstance.viewConfig);
         }
       }
+      this._viewTag = viewTag;
 
       styles.forEach((style) => {
-        if (style?.viewDescriptor) {
-          style.viewDescriptor.value = { tag: viewTag, name: viewName };
+        if (style?.viewDescriptors) {
+          style.viewDescriptors.add({ tag: viewTag, name: viewName });
           if (process.env.JEST_WORKER_ID) {
             /**
              * We need to connect Jest's TestObject instance whose contains just props object
@@ -302,29 +326,29 @@ export default function createAnimatedComponent(Component, options = {}) {
              */
             this.animatedStyle.value = {
               ...this.animatedStyle.value,
-              ...style.initial,
+              ...style.initial.value,
             };
             style.animatedStyle.current = this.animatedStyle;
           }
         }
       });
       // attach animatedProps property
-      if (this.props.animatedProps?.viewDescriptor) {
-        this.props.animatedProps.viewDescriptor.value = {
+      if (this.props.animatedProps?.viewDescriptors) {
+        this.props.animatedProps.viewDescriptors.add({
           tag: viewTag,
           name: viewName,
-        };
+        });
       }
     }
 
     _hasReanimated2Props(flattenStyles) {
-      if (this.props.animatedProps?.viewDescriptor) {
+      if (this.props.animatedProps?.viewDescriptors) {
         return true;
       }
       if (this.props.style) {
         for (const style of flattenStyles) {
           // eslint-disable-next-line no-prototype-builtins
-          if (style?.hasOwnProperty('viewDescriptor')) {
+          if (style?.hasOwnProperty('viewDescriptors')) {
             return true;
           }
         }
@@ -345,6 +369,7 @@ export default function createAnimatedComponent(Component, options = {}) {
       this._reattachNativeEvents(prevProps);
 
       this._propsAnimated && this._propsAnimated.setNativeView(this._component);
+      this._attachAnimatedStyles();
     }
 
     _setComponentRef = setAndForwardRef({
@@ -430,12 +455,10 @@ export default function createAnimatedComponent(Component, options = {}) {
         if (key === 'style') {
           const styles = Array.isArray(value) ? value : [value];
           const processedStyle = styles.map((style) => {
-            if (style && style.viewDescriptor) {
+            if (style && style.viewDescriptors) {
               // this is how we recognize styles returned by useAnimatedStyle
-              if (style.viewRef.current === null) {
-                style.viewRef.current = this;
-              }
-              return style.initial;
+              style.viewsRef.add(this);
+              return style.initial.value;
             } else {
               return style;
             }
@@ -444,11 +467,9 @@ export default function createAnimatedComponent(Component, options = {}) {
             StyleSheet.flatten(processedStyle)
           );
         } else if (key === 'animatedProps') {
-          Object.keys(value.initial).forEach((key) => {
-            props[key] = value.initial[key];
-            if (value.viewRef.current === null) {
-              value.viewRef.current = this;
-            }
+          Object.keys(value.initial.value).forEach((key) => {
+            props[key] = value.initial.value[key];
+            value.viewsRef.add(this);
           });
         } else if (value instanceof AnimatedEvent) {
           // we cannot filter out event listeners completely as some components
-Original file line number
+Diff line change
@@ Expand Up / @@ -43,4 +43,4 @@ function AnimatedStyleUpdateExample(): React.ReactElement { @@
       );
     }
-    export default AnimatedStyleUpdateExample;
+    export default AnimatedStyleUpdateExample;