CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-stack
koSiukaS
koSiukaS

Reputation: 11

How to access default parameters from react navigation stack configuration?

I want to set default parameters inside stack navigator configuration based on the route so I could reuse a single component and keep all the values in the same place.

I have been trying to follow the documentation and implement default parameters inside stack navigator configuration, but they don't seem to get passed.

const SuggestionsStack = createStackNavigator(
  {
    Suggestions: {
      screen: SuggestionsScreen,
      params: {
        linkUrl: `${UrlConstants.REST_URL}`,
        screenType: `${SuggestionsType.ALL_SUGGESTIONS}`,
      },
    },
    Suggestion: SuggestionScreen,
    SuggestionCreate: SuggestionCreateScreen,
  },
);

However when I try to access the params from the screen:

console.log(this.props.navigation.state);

Console output:

[16:12:43] Object {
[16:12:43]   "key": "id-1546956760520-1",
[16:12:43]   "params": Object {
[16:12:43]     "handleCleanAsync": undefined,
[16:12:43]     "refreshList": undefined,
[16:12:43]   },
[16:12:43]   "routeName": "Suggestions",
[16:12:43] }

The params stated inside of the configuration are nowhere to be found. What am I doing wrong?

this.props.navigation.state

Was used to check the whole available output in the current screen and as we can see, the "linkUrl" and "screenType" params, which were specified in the configuration, are not available.

Upvotes: 1

Views: 733

Answers (2)

Afraz Hussain
Afraz Hussain

Reputation: 2423

@sdkcy's answer should serve the purpose, but you can also include the default params in your component as follows:

const linkUrl = this.props.navigation.getParam("linkUrl", `${UrlConstants.REST_URL}`);

You can read more about this here.

Upvotes: 1

sdkcy
sdkcy

Reputation: 3548

const linkUrl = this.props.navigation.getParam(“linkUrl”);

So, you can reach your passed value.

Upvotes: 0

Related Questions