DEV Community

Jafaru Emmanuel for Cudium

Posted on

React Native Error: A navigator cannot contain multiple 'Screen' components with the same name ...

Have you ever come across this error in the React Native journey? Here's a quick explanation and a resolution concept, then a basic approach with this concept to resolve this error.

React Native duplicate screen error on iOS emulator

1 understanding the error message and the source of the error...

Interestingly, this error logs a vivid description of what the problem is and a list of possible locations that caused this problem. It's like a nested tree to the path for this very error.
React Native duplicate screen error

Notice the error message in the terminal and see the explicit message.

 ERROR  Error: A navigator cannot contain multiple 'Screen' components with the same name (found duplicate screen named 'Message')
Enter fullscreen mode Exit fullscreen mode

React Native duplicate screen error

For my own case study, the screen duplicated is the "Message" screen. Follow the texts marked with red

And the source is the BottomTabNavigation. Follow the text marked with blue.

This is the same approach to understanding the errors you find, just read the error messages a little more, and this is the case with a ton of other errors.

2 What is this error saying?

Simply, that a particular screen is created twice in the navigation.

3 Investigating

search through your root cause, for me, you've guessed it right, the BottomTabNavigation component.

code snippet for BottomTabNavigation

4 Fixing

At this point, ** remove the duplicate ** and hurrah!!!.
You're done.
Problem solved.

Stay tuned for more articles like this, as we go through and debug some bugs and some errors in our day to day development. Both simple and complex bugs.
Cheers!!😊

Top comments (0)