0

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

Bhagwat K
  • 2,982
  • 2
  • 23
  • 33
Eric Ahn
  • 391
  • 2
  • 7
  • 18
  • I would rather like to ask you what you finally need to achieve with this kind of behavior, the navigators are written to be behaving like it to represent the lifecycle of the current contextual screen. – Suraj Malviya Jan 08 '20 at 05:42
  • @SurajMalviya Thanks for the comment. The reason is as I mentioned in the context, 'so on without having to unmount the screens when navigating (exact behavior of tab feature in mobile browsers).' I am trying to implement mobile browser with react native. If you try creating and navigating to multiple tabs in any browser (chrome, safari, etc.), they are not unmounted unless you close the tab or close the whole app – Eric Ahn Jan 08 '20 at 05:51
  • @hyuklee I think this is not possible with the react-navigation, while you can achieve this behavior with another control like react-native-viewpager. https://github.com/react-native-community/react-native-viewpager – Bhagwat K Jan 08 '20 at 06:28
  • @Ragnar Thanks for the suggestion. Does viewpager support dynamic view adding? Also, viewPager doesn't seem to have navigation methods – Eric Ahn Jan 08 '20 at 06:34
  • @hyuklee I have written in detail in my answer please have a look. – Bhagwat K Jan 08 '20 at 07:34

1 Answers1

1

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.

Bhagwat K
  • 2,982
  • 2
  • 23
  • 33