react-navigation / react-navigation/react-navigation

How to change stack of bottom tab navigator on click of button?

Open
#8,786 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug package:bottom-tabs
Dominant language
TypeScript
Stars
24.5k
Forks
5.1k
Avg merge
1d 5h
Merged PRs (30d)
18

Description

I have 3 tab in my bottom tab Tab1,Tab2 and Tab3 and each tab have it's own stack like

const Stack1 = createStackNavigator({
key1: {
screen:Screen1,
},
});

const Stack2 = createStackNavigator({
key2: {
screen:Screen2,
},
});

const Stack3 = createStackNavigator({
key3: {
screen:Screen3,
},
});

const AnimatedCircleNavigation_Chat = createBottomTabNavigator(
{
Stack1,
Stack2,
Stack3
},
{
initialRouteName: 'Stack1'
},
);

now i want to navigate from Tab3 to Tab2 on click of button from Tab3. So how can i achieve that ?

I'm using following packages.
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "^2.6.2",

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the React Navigation v4 bottom-tab and nested-stack documentation, using the shown AnimatedCircleNavigation_Chat navigator and the Tab3 button as entry points. Trace how navigation between Stack3 and Stack2 is intended to work; done means the button reliably opens Tab2 from Tab3 with the listed package versions.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.