Reactnavigation with parameters

Question

I am using React navigation I am looking for a way to pass parameters into my navigation stack as follows. I have actually one screen which I want to use X amount of times. It only needs an url and a title, and based on the url it should do exactly the same for each url.

So i want to create an object like so:

const urls = {
  {title: 'foo', url: 'https://someurl'},
  {title: 'bar', url: 'https://someotherurl'}
}

And now in my Navigation component I would like to do something like:

export default createMaterialTopTabNavigator({
 SomeKey: {
   // Loop here over the urls and create a component and pass props.
 }   
});

My issue is that I can't find in the documentation how to pass the title and url parameter via the navigator to the specific screens.

Any Suggestions?

Ashwin Mothilal · Accepted Answer · 2018-09-09 17:09:11Z

1

I can help you with one part, you can pass variables from Navigator like this

export default createMaterialTopTabNavigator({
 ScreenOne: {
   screen:props=> <ScreenOne {...props} screenProps={yourpropsr}/>
 }   
});

The documentation has example for StackNavigator but I hope this will work for TabNavigator too. Documentation link here

answered Sep 9, 2018 at 17:09

Ashwin Mothilal

2,5321 gold badge20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marcel Kirchhoff · Accepted Answer · 2018-09-09 17:31:11Z

1

I'm doing something similar in my app, but I'm grabbing my array from an API and build my navigation upon that. For each item in my array, I build the same screen setup in a tab navigation and have them all available from a drawer navigator.

You could do something like this:

let NavigatorConfig = {};

urls.forEach(item => {
    NavigatorConfig = {
        ...NavigatorConfig,
        [item.title]: {
            screen: props => <MyComponent {...props} url={item.url} />
        }
    };
});

export default createMaterialTopTabNavigator(NavigatorConfig);

answered Sep 9, 2018 at 17:31

Marcel Kirchhoff

1085 bronze badges

Collectives™ on Stack Overflow

Reactnavigation with parameters

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related