Animated node with ID ${nodeID} already exists

[ArsalanCsquare]

Description

Hi, I'm constantly getting this error, Animated node with ID {nodeID} already exists, the nodeID in my case is 351.

I have a tab bar component built separately in a repo and is symlinked to one of my projects which is using the components in that repo, anyways, everything worked fine before when I first built this tab bar, using react-navigation v4 and react-navigation-tabs v2.7.0 but recently when I switched to my tabs screen it is constantly crashing with the above error.

Consuming side (where the component is being called)

<TabNavigator TabOne={TabOne} tabOneProps={tabOneProps} tabTwoProps={tabTwoProps} // TODO: SHOW-254 Develop/Complete Showing Requests Screen TabTwo={TabTwo} tabOneLabel="My Listings" tabTwoLabel="Showing Requests" />

Component code (Tab Navigator)

import React from 'react'; import { View } from 'react-native'; import PropTypes from 'prop-types'; import CommonPropTypes from '../propTypes'; import { createAppContainer } from 'react-navigation'; import { createMaterialTopTabNavigator } from 'react-navigation-tabs'; import { withStyleSheet } from '../../theme'; import styles from './styles';

function TabNavigatorComponent({ styleSheet, theme, TabOne, TabTwo, tabOneProps, tabTwoProps, tabOneLabel, tabTwoLabel, navigationRef, }) { const firstTabIndicator = () => (

);
const secondTabIndicator = () => (
    <View style={styleSheet.secondTabIndicator} />
);
const firstTab = {
    screen: () => <TabOne navigation={navigationRef} {...tabOneProps} />,
    navigationOptions: {
        title: tabOneLabel,
        tabBarOptions: {
            activeTintColor: theme.palette.white,
            inactiveTintColor: theme.palette.orange,
            style: styleSheet.tabBar,
            tabStyle: styleSheet.tab,
            labelStyle: styleSheet.label,
            renderIndicator: firstTabIndicator,
            upperCaseLabel: false,
            lazy: true,
        },
    },
};

const secondTab = {
    screen: () => <TabTwo navigation={navigationRef} {...tabTwoProps} />,
    navigationOptions: {
        title: tabTwoLabel,
        tabBarOptions: {
            activeTintColor: theme.palette.white,
            inactiveTintColor: theme.palette.orange,
            style: styleSheet.tabBar,
            tabStyle: styleSheet.tab,
            labelStyle: styleSheet.label,
            renderIndicator: secondTabIndicator,
            upperCaseLabel: false,
            lazy: true,
        },
    },
};
const TabNavigator = createMaterialTopTabNavigator({
    FirstTab: { ...firstTab },
    SecondTab: { ...secondTab },
});

const Tabs = createAppContainer(TabNavigator);

return <Tabs />;

}

TabNavigatorComponent.displayName = 'TabNavigatorComponent';

TabNavigatorComponent.propTypes = { // provided through withStyleSheet HOC styleSheet: CommonPropTypes.styleSheet.isRequired, theme: PropTypes.object.isRequired,

// Screen for the first tab
TabOne: PropTypes.object.isRequired,

// Screen for the second tab
TabTwo: PropTypes.object.isRequired,

// Props for the first tab
tabOneProps: PropTypes.object,

// Props for the second tab
tabTwoProps: PropTypes.object,

// Label for the first tab
tabOneLabel: PropTypes.string.isRequired,

// Label for the second tab
tabTwoLabel: PropTypes.string.isRequired,

// current ref of the navigation which can then be used by the tabs
navigationRef: PropTypes.shape({
    navigate: PropTypes.func.isRequired,
}),

};

TabNavigatorComponent.defaultProps = { navigationRef: null, tabOneProps: {}, tabTwoProps: {}, };

export default withStyleSheet(styles)(TabNavigatorComponent);

Package versions

• React: 16.8.6
• React Native: 0.60
• React Native Reanimated: ^1.3.0
• React Native Tabs: ^2.7.0](url)

[jakub-gonet]

Hi @ArsalanCsquare,

could you create a snack with a minimum reproducible code example and format code in the issue? It's hard to pin down issue like that, especially when you use Reanimated with React Native Tabs.

[jakub-gonet]

Closing due to no response.

[thomasgambina]

For people who run across this same issue...

In my case i had Reanimated v1.7.1 in a monorepo as a module and v1.9.0 on my local RN repo. Removing Reanimated from my monorepo and only having one instance of Reanimated worked for me.

[nitinvarda]

check this : https://github.com/software-mansion/react-native-reanimated/issues/1072#issuecomment-836803163