Initial route params not passed to tab navigator #1647

zash80 · 2017-05-23T09:41:05Z

Having a StackNavigator with 'initialRouteName' and 'initalRouteParams' where the initial route routes to a TabNavigator with tabs relying on the initial route parameter, this initial route parameter is not passed down to the tabs.

If the StackNavigator is re-configured to pass parameter via navigate action to the screen containing the TabNavigator all is working fine, means parameter is passed down to the tabs.

Current Behavior

The parameters defined in StackNavigator 'initalRouteParams' are not passed down to a nested TabNavigator.

Expected Behavior

The parameters defined in StackNavigator 'initalRouteParams' should be passed down to a nested TabNavigator.

Code

const SampleStack = StackNavigator({
  Screen1: {
    screen: SimpleScreen
  },
  Screen2: {
    screen: TabScreen
  }
}, {
  initialRouteName: 'Screen2',
  initialRouteParams: { name: 'value' }
});

const TabScreen = TabNavigator({
  Tab1: {
    screen: SimpleTab
  },
  Tab2: {
    screen: TabRelyingOnParameters
  }
}, {
  tabBarPosition: 'bottom',
  tabBarComponent: MyTabBar
});

TabRelyingOnParameters.navigationOptions =
  ({ navigation, navigation: { state: { params: { name } } } }) => ({
    header: (
      <Header>
        <Left>
          <Button onPress={() => navigation.goBack(null)} transparent>
            <Icon name='arrow-back' />
          </Button>
        </Left>
        <Body>
          <Title>{name}</Title>
        </Body>
        <Right />
      </Header>
    )
  }
);

Environment

software	version
react-navigation	1.0.0-beta.10
react-native	0.44.0

…b navigators initial navigation action

…vigation action (react-navigation#1647)

MrHubble · 2017-06-13T04:19:46Z

What about adding the initialRouteParams as a config option to the TabRouter as per the StackRouter?

StackRouter:

TabRouter:

and then we could have initialRouteParams specific to TabNavigator:

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
  initialRouteParams: { foo: 'bar' }
});

skevy · 2017-06-23T03:45:28Z

@zash80 I think @MrHubble has a good point. Any reason you didn't go with that approach in #1648?

dswbx · 2017-10-18T11:32:43Z

Faced the same issue, this is what worked for me (sample code from my project, not matching your variable names and stuff - just to show its logic):

const Routes = {/*...*/};
const stackNavigatorDefaultNavigationOptions = {/*...*/};

export default class AuthNavigator extends React.Component
{
    static propTypes = {
        initialRouteName: PropTypes.string
    };

    static defaultProps = {
        initialRouteName: "Login"
    };

    componentWillMount()
    {
        this.Navigator = StackNavigator({
            Login: {
                screen: Routes.Login.screen
            },
            Register: {
                screen: Routes.Register.screen
            }
        }, {
            ...stackNavigatorDefaultNavigationOptions,
            initialRouteName: this.props.initialRouteName
        });
    }

    render()
    {
        const Navigator = this.Navigator;
        return <Navigator />
    }
}

So you can use this navigator like this:

<AuthNavigator initialRouteName="Register" />

kelset · 2017-11-04T08:48:43Z

Pinging OP @zash80 since this issue is quite old and related to an old version of the lib. If no answer I'll close in 7 days.

kelset · 2017-11-12T10:24:36Z

Hi there @zash80 ,

In an effort to cleanup this project and prioritize a bit, since this issue had no follow up since my last comment I'm going to close it.

If you are still having the issue with the latest version (especially if it's a bug report) please check the current open issues, and if you can't find a duplicate, open a new one that uses the new Issue Template to provide some more details to help us solve it.

zash80 added a commit to zash80/react-navigation that referenced this issue May 23, 2017

react-navigation#1647: pass initial state params down to routes on ta…

4effd7d

…b navigators initial navigation action

zash80 mentioned this issue May 23, 2017

#1647: pass initial state params down to routes on tab navigators ini… #1648

Closed

zash80 added a commit to zash80/react-navigation that referenced this issue May 23, 2017

pass initial state params down to routes on tab navigators initial na…

f61d52d

…vigation action (react-navigation#1647)

kelset added needs more info 7 days countdown labels Nov 4, 2017

kelset closed this as completed Nov 12, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Initial route params not passed to tab navigator #1647

Initial route params not passed to tab navigator #1647

zash80 commented May 23, 2017

MrHubble commented Jun 13, 2017

skevy commented Jun 23, 2017 •

edited

Loading

dswbx commented Oct 18, 2017

kelset commented Nov 4, 2017

kelset commented Nov 12, 2017

Initial route params not passed to tab navigator #1647

Initial route params not passed to tab navigator #1647

Comments

zash80 commented May 23, 2017

Current Behavior

Expected Behavior

Code

Environment

MrHubble commented Jun 13, 2017

skevy commented Jun 23, 2017 • edited Loading

dswbx commented Oct 18, 2017

kelset commented Nov 4, 2017

kelset commented Nov 12, 2017

skevy commented Jun 23, 2017 •

edited

Loading