1

I'm trying to implement some fade-in and out transition for icons with react native reanimated. The version of it is 2.1.0. I'm using the bare workflow of expo. And the code looks like this

...
const IconWrapper: React.FC<IconWrapperProps> = ({
  wrapperStyle,
  children
}) => {

  const [opacity, setOpacity] = useState<number>(0);
  const animatedOpacity = useSharedValue(opacity);
    
  const hookUpdater = () => {
    return {
      opacity: withTiming(animatedOpacity.value , {
        duration: 100,
        easing: Easing.linear
      })
    };
  };

  const animationStyle = useAnimatedStyle(hookUpdater, [opacity]);

  const hookEffect = () => {
    setOpacity(1);
    const cleaner = () => setOpacity(0);
    return cleaner;
  };
  
  useEffect(hookEffect, []);

  return (
    <Animated.View
      style={[wrapperStyle, animationStyle]}
    >
      {children}
    </Animated.View>
  );
};

export default IconWrapper;

For me, it seems that there is no problem, since I actually did the same thing which is in the documentation. But it keeps spitting me the error like

TypeError: Object.values requires that input parameter not be null or undefined

I've tried resetting cache with expo start -c, but it didn't work. What should I do to fix this?

Joseph Hwang
  • 324
  • 5
  • 13

2 Answers2

2

I don't really know why, but the updater passed into useAnimatedStyle hook should be anonymous function. So this part should be look like

  const animationStyle = useAnimatedStyle(
    () => {
      return {
        opacity: withTiming(animatedOpacity.value, {
          duration: 100,
          easing: Easing.linear
        })
      };
    },
    [opacity]
  );

Hope this can be helped for someone who struggling with this same problem.

Joseph Hwang
  • 324
  • 5
  • 13
0

The problem is you are making a different functions hookUpdater and hookEffect but not passing those inside the dependency list in animationStyle and useEffect since those are also dependencies. So adding those will work.

  const animationStyle = useAnimatedStyle(hookUpdater, [hookUpdater]);
  ...
  useEffect(hookEffect, [hookEffect]);

And better make the hookUpdater and hookEffect use useCallback as well.

Niraj
  • 134
  • 11