WARN Looks like you're passing an inline function for 'component' prop for the screen 'Home' (e.g. component={() => <SomeComponent />}). Passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour.

[rodolfocassorillo]

I'm doing a Dynamic Drawer Navigator with React Navigation 5, and this warning appears:

WARN Looks like you're passing an inline function for 'component' prop for the screen 'Home' (e.g. component={() => }). Passing an inline function will cause the component state to be lost on re-render and cause perf issues since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour.

The problem is when I try to map() my Screens in the Drawer.Screen.

I tried a lot of things, but doesn't work, my Route Stack Itens:

`import React from 'react';
import Home from '../screens/home/Index';
import ATR from '../screens/atr/Index';

const stackNavigItens = [
  {
    group: 'Home',
    name: 'Home',
    component: Home,
    icon: 'home',
    iconType: 'FontAwesome',
    label: 'Principal',
    hideMenu: false,
    screenComponent: props => {
      return <Home {...props} />;
    },
  },`

Then my Screens:

`import React from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import {DrawerContent} from './DrawerContent';
import {AppStyles, IconStyles} from '../utils/AppStyle';
import {stackNavigItens} from './Routes';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';

class DrawerScreens extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: stackNavigItens,
    };
  }

  render() {
    const {data} = this.state;
    const Drawer = createDrawerNavigator();
    const Stack = createStackNavigator();

    const screenOptions = {
      headerStyle: {
        backgroundColor: AppStyles.color.main,
      },
      headerTintColor: AppStyles.color.headerTintColor,
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    };

    return (
      <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}>
        {data.map(r => {
          return (
            <Drawer.Screen
              key={r.name}
              name={r.name}
              component={({navigation}) => (
                <Stack.Navigator
                  initialRouteName="Home"
                  headerMode="screen"
                  screenOptions={screenOptions}>
                  <Stack.Screen
                    name={r.name}
                    component={r.component}
                    options={{
                      title: r.label,
                      headerLeft: () => (
                        <Icon.Button
                          name="ios-menu"
                          size={IconStyles.size}
                          backgroundColor={AppStyles.color.main}
                          onPress={() => {
                            navigation.openDrawer();
                          }}
                        />
                      ),
                    }}
                    {...this.props}
                  />
                </Stack.Navigator>
              )}
              {...this.props}
            />
          );
        })}
      </Drawer.Navigator>
    );
  }
}

export default DrawerScreens;`

Someone can help me ?

System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
Memory: 8.37 GB / 15.94 GB
Binaries:
Node: 10.18.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.19.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
SDKs:
Android SDK:
API Levels: 19, 22, 26, 27, 28, 29
Build Tools: 28.0.3, 29.0.0, 29.0.2
System Images: android-19 | Intel x86 Atom, android-19 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom
IDEs:
Android Studio: Version 4.0.0.0 AI-193.6911.18.40.6514223
npmPackages:
react: 16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/native

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[satya164]

Please read the error message.

[louiechristie]

This worked for me, from the documentation:

Use a render callback for the screen instead of specifying a component prop:

<Stack.Screen name="Home">
  {props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>

See https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[rajan-keypress]

<Stack.Screen name="Home">
{props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>
work for me

[fukemy]

i got error:
Got an invalid value for 'children' prop for the screen 'Recently'. It must be a function returning a React Element. please helppp

[gavrilikhin-d]

i got error: Got an invalid value for 'children' prop for the screen 'Recently'. It must be a function returning a React Element. please helppp

Same issue on react-native-web. Everything works perfectly in RN