WARN Sending `onAnimatedValueUpdate` with no listeners registered

Question

I got stuck. I am developing a mobile application with React Native CLI & React Navigation 6.x Then when i use material top tabs navigator, swiping through left to right or right to left. It always send a warn

I've tried useFocusEffect, addListeners

import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import React, {useEffect} from 'react';
import AScreen from '../screens/Home/AScreen';
import BScreen from '../screens/Home/BScreen';

const Tab = createMaterialTopTabNavigator();
const HomeStack = () => {
  useEffect(() => {
    console.log('HomeStack');
  }, []);

  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: '#fff',
        tabBarStyle: {
          borderTopWidth: 0.2,
          borderTopColor: '#ccc',
        },
        tabBarIndicatorStyle: {
          backgroundColor: '#fff',
        },
        lazy: true,
      }}
      initialRouteName="A"
      shouldRasterizeIOS>
      <Tab.Screen name="A" component={AScreen} />
      <Tab.Screen name="B" component={BScreen} />
    </Tab.Navigator>
  );
};

export default HomeStack;

B SCREEN

const BScreen: React.FC = ({navigation}: any) => {
  const [refreshing, setRefreshing] = useState(false);

  useFocusEffect(
    useCallback(() => {
      const function = async () => {
        console.log('function useFocusEffect');
        await function2({pageParam: 0});
      };

      function();

    }, [navigation]),
  );

  const function2 = async ({pageParam = 0}) => {
    const limit = 10;
    const offset = pageParam * limit;

    ... DATA Handling

    if (error) {
      throw error;
    }

    if (data.length === 0) {
      return {data, nextPage: false};
    }
    return {data, nextPage: pageParam + 1};
  };

THIS IS A Screen

import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {VirtualizedList, ActivityIndicator, Text, View} from 'react-native';
import {hook} from '../../hooks/hook';
import MyITEM from '...';
import {useIsFocused} from '@react-navigation/native';

const AScreen: React.FC = () => {
  useEffect(() => {
    console.log('AScreen Initalized');
  }, []);

  const isFocused = useIsFocused();
  useEffect(() => {
    console.log('AScreen isFocused: ', isFocused ? 'true' : 'false');
  }, [isFocused]);

  const [refreshing, setRefreshing] = useState(false);

  ...data fetching with react-query (infinite query)

  const renderFooter = useCallback(() => {
    if (isFetchingNextPage || hasNextPage) {
      return <ActivityIndicator />;
    }
    return null;
  }, [isFetchingNextPage, hasNextPage]);

  const renderItem = useCallback(
    ({item}: any) => (
      <MyITEM />
    ),
    [],
  );

  const getItem = useCallback((data, index) => data[index], []);

  const getItemCount = useCallback(data => data.length, []);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    refetch();
    setRefreshing(false);
  }, [refetch]);

  const posts = useMemo(
    () => data?.pages?.flatMap(page => page.data) || [],
    [data?.pages],
  );

  if (status === 'loading') {
    return <ActivityIndicator />;
  }

  if (status === 'error') {
    return <Text>Error A</Text>;
  }

  return (
    <View style={{flex: 1}}>
      <VirtualizedList
        data={posts}
        renderItem={renderItem}
        keyExtractor={(item, index) => index.toString()}
        ListFooterComponent={renderFooter}
        getItem={getItem}
        getItemCount={getItemCount}
        onRefresh={onRefresh}
        refreshing={refreshing}
        onEndReached={() => {
          if (hasNextPage && !isFetchingNextPage) {
            console.log('onEndReached');
            fetchNextPage();
          }
        }}
        onEndReachedThreshold={0.5}
      />
    </View>
  );
};

export default AScreen;

I dont want to getting this error. Can anyone help me?

Answer 1

This worked for me. I don't actually need the listener to do anything.

import { Animated } from "react-native";

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

Answer 2

I found the solution, it works for me just pass initialRouteName={routes.sellerHome} on your drawer stack screen initial screen name

<Drawer.Navigator
    initialRouteName={routes.sellerHome}
    drawerStyle={{backgroundColor: theme.colors.dark}}
    drawerContent={(props) => <DrawerContent {...props} />}
>
    <Drawer.Screen name={routes.sellerHome} component={sellerHome} />
    <Drawer.Screen name={routes.updateProfileScreen} component={UpdateProfile} />
</Drawer.Navigator>

Answer 3

in my case i had this line causing the issue:

navigation.navigate('Home', { scannedBarcode: scanResult.data }); 

Instead i tried this solution :

navigation.removeListener
navigation.navigate('Home', { scannedBarcode: scanResult.data }); 

Calling navigation.removeListener before navigating solved the issue for me.

Answer 4

Following worked for me with the same error:

<Tab.Navigator
  initialRouteName={"A"}
  screenOptions={{
    tabBarActiveTintColor: '#fff',
    tabBarStyle: {
      borderTopWidth: 0.2,
      borderTopColor: '#ccc',
    },
    tabBarIndicatorStyle: {
      backgroundColor: '#fff',
    },
    lazy: true,
  }}
  initialRouteName="A"
  shouldRasterizeIOS>
  <Tab.Screen name="A" component={AScreen} />
  <Tab.Screen name="B" component={BScreen} />
</Tab.Navigator>