Suggestion for integration support with other libraries: provide a way to specify a callback for updates.

[phryneas]

I just filed a PR with react-native-svg that would add support for integrating react-native-reanimated on the web renderer. You can see that PR here: software-mansion/react-native-svg#1886

That said: that PR is doing a lot of cumbersome things to somehow provide an interface to react-native-svg to update attributes in batches, since granular updates are just not feasible there. This could at this point be done through setNativeProps, but apparently that is going to be deprecated and removed at some point.

So, I would like to propose the following change to this code:

+ export const updateReanimatedPropsCallback = Symbol()
export const _updatePropsJS = (
  updates: StyleProps | AnimatedStyle,
  viewRef: { _component?: JSReanimatedComponent }
): void => {
  if (viewRef._component) {
    const component = viewRef._component;
    const [rawStyles] = Object.keys(updates).reduce(
      (acc: [StyleProps, AnimatedStyle], key) => {
        const value = updates[key];
        const index = typeof value === 'function' ? 1 : 0;
        acc[index][key] = value;
        return acc;
      },
      [{}, {}]
    );

+  if (updateReanimatedPropsCallback in component) {
+    component[updateReanimatedPropsCallback](rawStyles)
+ } else
    if (typeof component.setNativeProps === 'function') {
      setNativeProps(component, rawStyles);
    } else if (Object.keys(component.props).length > 0) {
      Object.keys(component.props).forEach((key) => {
        if (!rawStyles[key]) {
          return;
        }
        const dashedKey = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
        component._touchableNode.setAttribute(dashedKey, rawStyles[key]);
      });
    } else {
      console.warn('It is not possible to manipulate component');
    }
  }
};

This way, an external library like react-native-svg that still has to do some modifications to attributes before flushing them to the native level could provide a hook to receive all data at once and handle the update more gracefully on their side.

It would also be a handy hook in user-written components that would not directly correlate to a native component.

If you would be okay with this, I would be happy to file a PR.

[phryneas]

Note: I was only going for the web platform in that case, but this might also be applicable on a higher level in updateProps, having all platforms first test if there is a viewRef with a [updateReanimatedPropsCallback] property and invoking that, otherwise falling back to the platform-specifc method.

Something like

export const updateProps: (
  viewDescriptor: SharedValue<Descriptor[]>,
  updates: StyleProps | AnimatedStyle,
  maybeViewRef: ViewRefSet<any> | undefined
) => void = (viewDescriptor, updates, maybeViewRef) => {
      // split `viewDesciptors` and `maybeViewRef` into pairs that have either `updateReanimatedPropsCallback` or not and call either 
      // maybeViewRef[updateReanimatedPropsCallback](updates)
      // or 
      // updatePropsByPlatform(viewDescriptor, updates, maybeViewRef)
    }
};

That would require some changes to tracking viewDescriptor and maybeViewRef though - they would have to be tracked in correlated pairs in createAnimatedComponent and the viewRef would also have to be tracked for other platforms than web.