So, I have a Dashboard component which has a custom header. In the Dashboard component I do an API call and set params, which I pass to the header component. I want to pass userName and pgAddress as props to the header component.

​

​

class Dashboard extends React.Component { componentDidMount = async () => { try { const { data } = await client.post('sjsjdldlksd'); console.log(data.HostelName, data.TenantName); this.props.navigation.setParams({ userName: data.TenantName, pgAddress: data.HostelName, }); } catch (e) { console.log(e.message); } }; Dashboard.navigationOptions = { header: (props) => ( <Header navigation={props.navigation} userName={props.navigation.getParam('userName')}//using getParams because state.params doesn't work pgAddress={props.navigation.getParam('pgAddress')} value={2} /> ), }; 

​

​

And I am accessing these two using **props.userName and props.pgAddress**. They both come undefined.

What am I doing wrong here? Thanks.