AnimatedInterpolation like AnimatedModulo do not call listener

[macrozone]

Description

if you create a new AnimatedValue by applying an AnimatedInterpolation like AnimatedModulo, this new animated value has a function addListener, but the listeners are never called.

this here describes the problem in react-native-web. I first wrongly assumed that its a react-native-web problem, but as it turns out its already present in react-native

React Native Version

0.71.6

Output of npx react-native info

System:
OS: macOS 13.3
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 17.13 GB / 64.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
Yarn: 3.5.0 - /usr/local/bin/yarn
npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
Watchman: 2023.04.10.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
Android SDK:
API Levels: 27, 28, 29, 31
Build Tools: 28.0.3, 29.0.2, 29.0.3, 31.0.0
System Images: android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9477386
Xcode: 14.3/14E222b - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_292 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: Not Found
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

see https://codesandbox.io/s/vibrant-lumiere-6p71s1?file=/src/App.js :

import React, { useRef, useMemo, useEffect } from "react";
import { View, Animated, Easing } from "react-native";

// Fork this sandbox and add example code
// to reproduce the issue.
//
// Please check the versions of dependencies
// in package.json

export default function App() {
  const animationProgress = useRef(new Animated.Value(0));

  useEffect(() => {
    const anim = Animated.timing(animationProgress.current, {
      toValue: 100,
      duration: 1000,
      easing: Easing.out(Easing.quad),
      useNativeDriver: false
    });

    anim.start();
  }, []);

  const moduloProgress = useMemo(
    () => Animated.modulo(animationProgress.current, 1),
    [animationProgress]
  );

  const doubleProgress = useMemo(
    () => Animated.multiply(animationProgress.current, 2),
    [animationProgress]
  );

  useEffect(() => {
    const ref = animationProgress.current;
    const listener = ref.addListener((progress) => {
      console.log("raw progress", progress);
    });
    return () => ref.removeListener(listener);
  }, [animationProgress]);
  useEffect(() => {
    const listener = moduloProgress.addListener((progress) => {
      console.log("modulo progress", progress);
    });
    return () => moduloProgress.removeListener(listener);
  }, [moduloProgress]);
  useEffect(() => {
    const listener = doubleProgress.addListener((progress) => {
      console.log("double progress", progress);
    });
    return () => doubleProgress.removeListener(listener);
  }, [doubleProgress]);

  return ....
}

only "raw progress" is logged, but not the interpolated version

Snack, code example, screenshot, or link to a repository

https://codesandbox.io/s/vibrant-lumiere-6p71s1?file=/src/App.js

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.