CODEWITHSUNDEEP
react-nativereact-navigation
sanders
sanders

Reputation: 10898

Reactnavigation with parameters

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?

Upvotes: 0

Views: 315

Answers (2)

Marcel Kirchhoff
Marcel Kirchhoff

Reputation: 108

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);

Upvotes: 1

Ashwin Mothilal
Ashwin Mothilal

Reputation: 2532

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

Upvotes: 1

Related Questions