Unable to set shadowOffset through reanimated

<Animated.View
  style={[
    styles.playBtn,
    {
      shadowOffset: {
        height: interpolate(progress, {
          inputRange: [0, 1],
          outputRange: [5, 10],
          extrapolate: Extrapolate.CLAMP,
        }),
        width: 0,
      },
    },
  ]}
/>

the results

[jakub-gonet]

This is related to the wrong handling of nested styles internally.

Repro:

import React from 'react';

import Animated from 'react-native-reanimated';
Animated.addWhitelistedUIProps({shadowOffset: true});
const Example = () => {
  return (
    <Animated.View
      style={[
        {
          shadowOffset: {
            height: new Animated.Value(50),
            width: 20,
          },
        },
      ]}
    />
  );
};

export default Example;

PS. @nasmuris - if you use useRef like that: useRef(new Animated.Value(0)).current; it won’t give you much value, because it’s creating and disposing new Animated.Value per rerender. Check out useValue

[jakub-gonet]

Fixing this bug requires changing a lot of internal implementation (same problem as in transform node). We discussed it internally and decided to not fix this one - we’re focusing on getting v2 stable in where this problem don’t exist.

We’re open for small PRs though.