How to pass parent function to child screen in React Navigation 5?

YellowBox is deprecated in react-native > 0.6. Use the following code and also remember this is not the main error. this is only a warning

import { LogBox } from 'react-native';
  'Non-serializable values were found in the navigation state',

Oh. know its gone. Thank you

Note: And the above question is passed the setState const variable to the screen via initialParams. So we can't pass the functions or any other executable modules via initialParams and this is only pass the string type of data. So please use the following code for pass the functions, setvariables, etc...

const [HeaderRightName,setHeaderRightName] = React.useState('');
<Tabs.Screen name="tab-a" options={{ headerShown: false }} >
           {(props) => (
                <TabA setHeaderRightName={setHeaderRightName} {...props}/>

The documentation page the link in the warning is pointing to says:

If you don't use state persistence or deep link to the screen which accepts functions in params, then you can ignore the warning. To ignore it, you can use YellowBox.ignoreWarnings.

So, in my case, I can ignore this warning and pass functions thought route params safely.

  'Non-serializable values were found in the navigation state',

or for react native 0.63 and higher:

  'Non-serializable values were found in the navigation state',

class MainScreen extends React.Component {
  constructor(props) {
    this.state = {
      title: null

    this.updateTitle = this.updateTitle.bind(this);

  updateTitle(title) {
    this.setState({title: title});

  render() {
    return (
            headerShown: true,
            headerTitle: this.state.title
            {(props) => <NewScreen  {...props} updateTitle={this.updateTitle}/>}