search

hoaphantn7604 / react-native-curved-bottom-bar

A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.
MIT License
469 stars 98 forks source link

Error(Another navigator is already registered for this container.) in Nested Navigator. How can i fix it? #21

Closed Eric0117 closed 2 years ago

Eric0117 commented 2 years ago

Hi. I'm trying to make nested navigators but I have error.

Error: Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting.

my navigator structure is KakaoTalk_Photo_2022-03-20-17-37-44

When i register Home,Feed,Chat,Profile as a Navigator, error is occurred. how can I register multiple Navigators in CurvedBottomBar?

I saw the comments you registered on other issue.

You cannot pass inside a stack of react-navigation. replace by a single component.
Using "const { navigate } = useNavigation()" to navigate inside

Is it means add single component(not navigator) in BottomBars and use navigate(name) to navigate other screen? For example, FeedScreen has list of feed. then FeedDetailScreen is detail of Feed.

then, Where should I register FeedDetailScreen? If i register FeedNavigator in CurvedBottomBar, I can add FeedDetailScreen in FeedNavigator.

And second question is when navigating screens, Sometimes I want to hide or show bottom bar. How can i implement that?

I want hide BottomBar in FeedDetailScreen.

Ultimately, I want implement navigation flow like below KakaoTalk_Photo_2022-03-20-18-01-37

Thank you for library and sorry for my bad english.

hoaphantn7604 commented 2 years ago

Hi @Eric0117 , I will find a solution.

amit-bs23 commented 2 years ago

Is there any solution cause I also faced this issue?

hoaphantn7604 commented 2 years ago

Hi @amit-bs23 , I my solution is to switch between components. Do you have any ideas?

amit-bs23 commented 2 years ago

Do we need to use the react-navigation and register the screens? How about we create a custom tab navigator component so that everyone can use it without any hassle. My idea was to expose another API which would return the custom component with full access.

disizme commented 2 years ago

Any solution? I also need to add stack navigators in each screens of CurvedBottomBar. It works if I add a single stack navigator in one of the screen. When I add another stack navigator in another screen, I get 

Error: Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting
glynnallen1704 commented 2 years ago

I too have this issue and also require multiple stacks. Anyone know if this library can support this or do we have to go back to using plain old bottom tabs?

disizme commented 2 years ago

I too have this issue and also require multiple stacks. Anyone know if this library can support this or do we have to go back to using plain old bottom tabs?

Hi @glynnallen1704 This helped me with my issue, it uses the @react-navigation/bottom-tabs

https://github.com/alex-melnyk/clipped-tabbar

hoaphantn7604 commented 2 years ago

Hi @disizme I am updating the code for this package, will release version 2.0.0 as soon. You can clone from github to test version 2.0.0

hoaphantn7604 commented 2 years ago

Hi, This issue has been resolved. Now add in dependencies: "react-native-curved-bottom-bar": "https://github.com/hoaphantn7604/react-native-curved-bottom-bar". You can refer code to /example. I plan to release version 2.0.0 next week.

hoaphantn7604 commented 2 years ago

Hi, This issue has been resolved in version 2.0.0.