Reactnavigation with parameters - react-native

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?

Answer 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

Answer 2

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