React-native-reanimated: 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)

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 = () => (

);
const firstTab = {
screen: () => ,
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.