CODEWITHSUNDEEP
react-nativereact-navigationreact-native-navigationviewpage
Eric Ahn
Eric Ahn

Reputation: 401

A way to randomly navigate to specific screen without unmounting that is created(pushed) multiple times

I need to know whether it is able to achieve the behavior I want using react-native.

I am trying to find a way to navigate to specific screen that is created multiple times from one statically defined screen. First multiple screens are created by following:

   this.props.navigation.push('tabScreen') // option 1

   this.props.navigation.navigate({routeName: 'tabScreen', params: {}, key: uuid()}) // option 2

I am able to successfully create multiple same screen using stackNavigator, but the problem is that I need to be able to navigate or 'jump(not just going back to previous screen)' to any of the screens created without having to unmount the created screens.

so for example if I have Screen 1, Screen 2, Screen 3, Screen 4, Screen 5 I should be able to jump , or navigate

Screen 1 -> Screen 4
Screen 4 -> Screen 2
Screen 2 -> Screen 5

and so on without having to unmount the screens when navigating (exact behavior of tab feature in mobile browsers).

React-naivgation's stack navigator uses stack, so from what I understand it pops all the screens before navigating to a screen and therefore unmounts the screen.

Is such behavior achievable in navigation libraries in react-native?

If not where or how should I look into solving the problem?

Thanks

Upvotes: 0

Views: 723

Answers (1)

Bhagwat K
Bhagwat K

Reputation: 3142

You can use the ViewPager to achieve this behavior for this: Plase refer ViewPager for example

For your tabs, you should have to create the array of the tabs and on that basis, you can manage your tabs as views inside the view-pager using iteration or any other mechanism.

For dynamic addition of view, you can add the new tabs to an array and can re-render the view-pager component.

For Navigation, you can use different event handling API methods like onPageScrollStateChanged, onPageScroll to manage your tabs switching and another stuff.

I hope this will answer your questions.

Upvotes: 1

Related Questions