Sending onAnimatedValueUpdate with no listeners registered warning when swiping back using ios gesture. JS Stack Navigator

[bryanltobing]

Current behavior

This is only happening on JS Stack Navigator

I keep getting warning that says "Sending onAnimatedValueUpdate with no listeners registered" every time i'm swiping back to the previous screen using ios gesture.

I'm not sure why since i'm following the installation and setup in the docs correctly.

Screenshot

Video

Screen.Recording.2023-08-28.at.14.45.02.mov

Expected behavior

There should not be warning for gesture back behavior. This is sometimes really annoying when debugging or developing my apps.

Reproduction

https://github.com/bryanltobing/rnav-test

specific commit react-navigation setup feat: setup react navigation

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-tab-view

Environment

• [] I've removed the packages that I don't use

package	version
@react-navigation/native	6.1.7
@react-navigation/stack	6.3.17
react-native-safe-area-context	4.6.3
react-native-screens	3.22.0
react-native-gesture-handler	2.12.0
react-native	0.72.4
expo	49.0.8
node	20.3.1
npm or yarn	yarn 1.22.19

[cyberkaidev]

I have the same problem when I use:

    navigation.dispatch(
        CommonActions.reset({
            index: 1,
            routes: [{ name: 'TabsRoutes' }],
        }),
    );

[DDM16]

same problem on me.

i get warn after upgrading react version to 0.72.

[watislaf]

same problem.

[matterwin]

Problem still occurring here

[ViljamHaanpaa]

yep having the exact same problem

[hwangJi-dev]

I migrated to React Native 0.72 and the same problem occurs.

[GuidoGagliardini]

same issue here

    "@react-navigation/drawer": "^6.6.5",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/stack": "^6.3.20",
    "expo": "~49.0.13",
    "react": "18.2.0",

[xaiamov]

This simple patch helped me.

     "react-native": "0.72.3",
     "@react-navigation/bottom-tabs": "^6.5.8",
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/stack": "^6.3.17",

Duplicate #7839

[GuidoGagliardini]

This simple patch helped me.

     "react-native": "0.72.3",
     "@react-navigation/bottom-tabs": "^6.5.8",
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/stack": "^6.3.17",

Duplicate #7839

Yes, I have tested it and it works but I think it is correct to report that the error still exists. Thanks anyway and best regards!

[Ero-pixel]

  <RestaurantStack.Screen name="Restaurants" component={RestaurantsScreen}  options={{ title: 'Restaurants' }}/>

Just add options={{ title: 'Restaurants' }} and that's it.

[CTOverton]

This simple patch helped me.

     "react-native": "0.72.3",
     "@react-navigation/bottom-tabs": "^6.5.8",
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/stack": "^6.3.17",

Duplicate #7839

Would love to see some movement on this ticket. While this patch does work it seems like something that should be updated in the repo itself.

@Ero-pixel Adding the title for me did not resolve my issue sadly.

[MarlonAEC]

  <RestaurantStack.Screen name="Restaurants" component={RestaurantsScreen}  options={{ title: 'Restaurants' }}/>

Just add options={{ title: 'Restaurants' }} and that's it.

This worked for me. Thanks!

[sato-daiki]

same

[tbagskk]

Ce simple patch

Ca a fonctionné pour moi aussi !

[ahmadkhalaf1]

no update on this? nothing from above is working , ios

[wanderhungerbuhler]

  <RestaurantStack.Screen name="Restaurants" component={RestaurantsScreen}  options={{ title: 'Restaurants' }}/>

Just add options={{ title: 'Restaurants' }} and that's it.

Add options={{ title: ... }} resolved for me.

[MariuzM]

Same issue when using const Tab = createMaterialTopTabNavigator(); and swiping left to edge of screen i get this warning

[therbta]

Same issue here.

WARN SendingonAnimatedValueUpdate with no listeners registered.

<Stack.Screen
          name="Chat"
          component={Conversation}
          options={{
            headerShown: false,
            presentation: 'fullScreenModal'
          }}
        />

[esmailbenmoussa]

  <RestaurantStack.Screen name="Restaurants" component={RestaurantsScreen}  options={{ title: 'Restaurants' }}/>

Just add options={{ title: 'Restaurants' }} and that's it.

Add options={{ title: ... }} resolved for me.

This did not work for me..

[FancyLobster]

Any update on this? None of the fixes above worked for me. Here are my dependencies:

"react": "18.2.0",
"react-native": "0.73.6",
"@react-navigation/material-top-tabs": "^6.6.13",
"@react-navigation/native": "^6.1.17",
"@react-navigation/stack": "^6.3.29",
"react-native-gesture-handler": "^2.15.0",
"react-native-reanimated": "^3.8.1",

[rocalex]

same issue

[Danu-rxone]

You can find solution at the following link:
https://stackoverflow.com/a/76465300/12285105
I placed the code in the App.tsx file.

[FancyLobster]

You can find solution at the following link: https://stackoverflow.com/a/76465300/12285105 I placed the code in the App.tsx file.

Thank you for the solution, but this did not work for me. I tried placing a listener in various places in my index.js, App.js, and Home.js and I still get the warning after I swipe between pages. I even added listeners for all my Animated and Shared Values that I use throughout the app and it still did not fix it. I also tried the other solutions in that post and they did not work.

Has anyone solved this issue with a method that differs from the solutions proposed in this thread or the referenced StackOverflow post?

[bmg817]

Experiencing this as well when I use navigation within an app to go back to the main screen

[JeffGuKang]

  <RestaurantStack.Screen name="Restaurants" component={RestaurantsScreen}  options={{ title: 'Restaurants' }}/>

Just add options={{ title: 'Restaurants' }} and that's it.

I fixed this issue with above solution. But options should be option.

[ReiDx]

any update?

same issue

[dannybit]

Same issue, none of the above solutions fixed the issue.

[voxlz]

I have the same issue

[rodrigodiasf1984]

same issue on the react-native 0.74.1

"react-native": "0.74.1",
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
"@react-navigation/stack": "^6.3.29",

the options={{title: 'screen title'}} and this : `import { Animated } from "react-native";

const av = new Animated.Value(0);
av.addListener(() => {return});`

Doesn't work to me

[FancyLobster]

any update?

same issue

Still no fix, I am just ignoring the warning until it is fixed.

This only prevents it from popping up over the UI, but still does not prevent it from showing in the console log:

// index.js
import { LogBox } from 'react-native';
LogBox.ignoreLogs(['Sending `onAnimatedValueUpdate` with no listeners registered.']);

Funny enough, I thought the issue somehow stemmed from our app's complex/nested navigation setup, but that turns out to not be the case. I have been debugging in a test build environment with only 1 navigator and 2 pages and I am still getting the warning when navigating between those 2 pages. Maybe they need to just comment out the warning in the source code? I don't have time to look through it, but it is still quite annoying for it to be showing up in my console log.

[colaquecez]

Same here using @react-navigation/material-top-tabs

  "@react-navigation/native": "^6.1.9",
  "@react-navigation/native-stack": "^6.9.17",
  "@react-navigation/material-top-tabs": "^6.6.11",

[emilje]

Same.

    "@react-navigation/bottom-tabs": "^6.5.20",
    "@react-navigation/elements": "^1.3.30",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@react-navigation/stack": "^6.3.29",

[hoangphucnst]

same issue on the react-native 0.74.1

"react-native": "0.74.1",
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
"@react-navigation/stack": "^6.3.29",

the options={{title: 'screen title'}} and this : `import { Animated } from "react-native";

const av = new Animated.Value(0); av.addListener(() => {return});`

Doesn't work to me

Me too