react-native, pass params to DrawerNavigator

Question

Actually i have this drawerNavigator

const MyDrawerNavigator = DrawerNavigator(
  {...
    CreditsPage: { screen: CreditsPage },       
    TermsOfUsePage: { screen: TermsOfUsePage },
    LegalNoticePage: { screen: LegalNoticePage },        
  },
  {...}
);

CreditsPage , TermsOfUsePage , LegalNoticePage components just displays a webView , so only the source url change. StaticWebView is a component i created to factorise the webView code but i have to copy past the following code inside multiples files, no clean. I change only the config in each file

const config = {
  title: "Credits",
  icon: "copyright",
  url: "https://mysite.fr/credits"
}
import React from "react";
import { View } from "react-native";
import IconFeather from "react-native-vector-icons/Feather";
import Icon from "react-native-vector-icons/FontAwesome";
import StaticWebView from "project/src/page/StaticWebView.js"
import I18n from 'project/src/i18n/i18n';

export default class test extends React.PureComponent {
  static navigationOptions = ({ navigation }) => {
    return {
      title: I18n.t(config.title),
      headerLeft: <View style={{ padding: 10, alignItems: "center" }}>
        <IconFeather name="arrow-left" size={25} color='black'
          onPress={() => { navigation.goBack(); navigation.navigate("DrawerToggle"); }} />
      </View>,
      drawerLabel: I18n.t(config.title),
      drawerIcon: ({ tintColor }) => <Icon name={config.icon} size={20} color={tintColor} />
    };
  };
  render() {
    return (
      <StaticWebView url={config.url} />
    )
  }
}

I cannot find any how to pass parameters to drawerNavigator. For example like this :

const MyDrawerNavigator = DrawerNavigator(
  {...
    CreditsPage: { screen: staticWebView , config:{ url :"...."} },       
    TermsOfUsePage: { screen: staticWebView , config:{ url :"...."} }, 
    LegalNoticePage: { screen: staticWebView , config:{ url :"...."} },      
  },
  {...}
);

any tips ?

Answer 1

You can pass parameters to Drawernavigator using props like below

const MyDrawerNavigator = DrawerNavigator(
  {...
    CreditsPage: { screen: props => <StaticWebView {...props} url="...." /> },
    TermsOfUsePage: { screen: props => <StaticWebView {...props} url="...." /> },
    LegalNoticePage: { screen: props => <StaticWebView {...props} url="...." /> },      
  },
  {...}
);

And you can access the props in StaticWebView component as below

const URL = this.props.url;