react-navigation icon indicating copy to clipboard operation
react-navigation copied to clipboard

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

Open bryanprimus opened this issue 2 years ago • 57 comments

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

image

Video

https://github.com/react-navigation/react-navigation/assets/46083126/b69c46af-49d4-48e5-a605-c5aa9d79685e

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
  • [X] iOS
  • [ ] Web
  • [ ] Windows
  • [ ] MacOS

Packages

  • [ ] @react-navigation/bottom-tabs
  • [ ] @react-navigation/drawer
  • [ ] @react-navigation/material-top-tabs
  • [X] @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

bryanprimus avatar Aug 28 '23 06:08 bryanprimus

I have the same problem when I use:

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

cyberkaidev avatar Sep 24 '23 15:09 cyberkaidev

same problem on me.

i get warn after upgrading react version to 0.72.

DDM16 avatar Oct 08 '23 15:10 DDM16

same problem.

watislaf avatar Oct 25 '23 15:10 watislaf

Problem still occurring here

matterwin avatar Nov 01 '23 05:11 matterwin

yep having the exact same problem

ViljamHaanpaa avatar Nov 06 '23 19:11 ViljamHaanpaa

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

hwangJi-dev avatar Nov 07 '23 01:11 hwangJi-dev

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",

GuidoGagliardini avatar Nov 08 '23 17:11 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

xaiamov avatar Nov 08 '23 18:11 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

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!

GuidoGagliardini avatar Nov 08 '23 19:11 GuidoGagliardini

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

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

Ero-pixel avatar Nov 12 '23 15:11 Ero-pixel

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.

CTOverton avatar Dec 05 '23 05:12 CTOverton

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

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

This worked for me. Thanks!

MarlonAEC avatar Dec 13 '23 02:12 MarlonAEC

same

sato-daiki avatar Dec 14 '23 19:12 sato-daiki

Ce simple patch

Ca a fonctionné pour moi aussi !

tbagskk avatar Dec 21 '23 16:12 tbagskk

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

ahmadkhalaf1 avatar Jan 07 '24 14:01 ahmadkhalaf1

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

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

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

wanderhungerbuhler avatar Jan 13 '24 13:01 wanderhungerbuhler

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

image

MariuzM avatar Feb 15 '24 19:02 MariuzM

Same issue here.

WARN SendingonAnimatedValueUpdate with no listeners registered.

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

therbta avatar Mar 13 '24 20:03 therbta

  <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..

esmailbenmoussa avatar Mar 18 '24 09:03 esmailbenmoussa

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",

FancyLobster avatar Mar 22 '24 20:03 FancyLobster

same issue

rocalex avatar Mar 23 '24 18:03 rocalex

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

Danu-rxone avatar Mar 24 '24 03:03 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.

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?

FancyLobster avatar Mar 25 '24 16:03 FancyLobster

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

bmg817 avatar Apr 21 '24 20:04 bmg817

  <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.

JeffGuKang avatar Apr 22 '24 01:04 JeffGuKang

any update?

same issue

ReiDx avatar May 01 '24 20:05 ReiDx

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

dannybit avatar May 05 '24 16:05 dannybit

I have the same issue

voxlz avatar May 09 '24 16:05 voxlz

same issue on the react-native 0.74.1 image

"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

rodrigodiasf1984 avatar May 14 '24 08:05 rodrigodiasf1984

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.

FancyLobster avatar May 14 '24 15:05 FancyLobster