How to pass props to react navigation in react native app - react-native

Question

I am using HOC to get current user details on login for each route in my react native application using ApolloClient.
Below is my main component App.tsx:
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';
const client = new ApolloClient({
cache,
link: errorLink.concat(authLink.concat(httpLink))
});
const TabStack = createBottomTabNavigator({
Feed: {
screen: Feed
},
Upload: {
screen: Upload
},
Profile: {
screen: Profile
}
})
const MainStack = createStackNavigator(
{
Home: { screen: TabStack },
User: { screen: UserProfile },
Comments: { screen: Comments },
Post: { screen: Post }
},
{
initialRouteName: 'Home',
mode: 'modal',
headerMode: 'none'
}
)
const AppContainer = createAppContainer(MainStack);
//Here I assign HOC to AppContainer
const RootWithSession = withSession(AppContainer);
class App extends PureComponent {
constructor(props) {
super(props);
}
render() {
return (<ApolloProvider client={client}>
<RootWithSession/>
</ApolloProvider>)
}
}
export default App;
Below is HOC withSession.tsx:
export const withSession = Component=>props=>(
<Query query={GET_CURRENT_USER}>
{({data,loading,refetch})=>{
if (loading) {
return null;
}
console.log(data);
return <Component {...props} refetch={refetch}/>;
}}
</Query>
)
I want to pass refetch function to all the components
<Component {...props} refetch={refetch}/>
How to do this? Any help is greatly appreciated.

Answer 1

I was able to pass refetch function to all Components from HOC withSession component using ScreenProps of StackNavigator as below:
export const withSession = Component=>props=>(
<Query query={GET_CURRENT_USER}>
{({data,loading,refetch})=>{
if (loading) {
return null;
}
if(props && props.navigation){
//props.refetch = refetch;
console.log(props)
//props.navigation.refetch = refetch;
props.navigation.setParams({refetch});
}
return <Component screenProps={{refetch}} {...props} refetch={refetch}/>;
}}
</Query>
)
Now, I am able to get refetch method using this.props.screenProps.refetch