Got both 'component' and 'children' props for the screen 'Search'. You must only pass one of them

Question

I work on a react-native app and this project used react-navigation 4.x to navigate around the app. I recently upgraded the project to 5.x of react-navigation and while trying to upgrade I ran into a problem. The problem is that my project has both a FooterNavigator and a DrawerNavigator, they both call on the same component.

We already figured out a way to fix the problem in react-navigation 4.x but the new version of react-navigation requires a name and a component for each Screen. Is there any way for me to have both the navigators at the same time or is it better to downgrade?

Image of the error

This is my FooterNavigator

const Tab = createBottomTabNavigator();

    export const FooterNavigator = () => {
        return (
                <Tab.Navigator>
                    <Tab.Screen name="Search" component={Search}>
                        <Button>
                                <Icon name="magnify" type="MaterialCommunityIcons"/>
                              <Text style={footerStyle.footerText}>Zoeken</Text>
                        </Button>
                    </Tab.Screen>
                    <Tab.Screen name="Count" component={Count}>
                        <Button>
                                <Icon name="counter" type="MaterialCommunityIcons"/>
                                <Text style={footerStyle.footerText}>Tellen</Text>
                        </Button>
                    </Tab.Screen>
                    <Tab.Screen name="Identify" component={Identify}>
                        <Button>
                                <Icon name="file-question" type="MaterialCommunityIcons"/>
                                <Text style={footerStyle.footerText}>Herken</Text>
                        </Button>
                    </Tab.Screen>
                    <Tab.Screen name="Program" component={Program}>
                        <Button>
                                <Icon name="chip" type="MaterialCommunityIcons"/>
                                <Text style={footerStyle.footerText}>Wijzig</Text>
                        </Button>
                    </Tab.Screen>
                </Tab.Navigator>
        )
    }

And this is my DrawerNavigator

export const RootNavigator = () => {
    let DrawerScreens = [];
    Routes.forEach(function (route) {
        DrawerScreens.push(<Drawer.Screen name={route.name} component={route.component}/>)
    });
    return (

        <Drawer.Navigator>
            {DrawerScreens}
        </Drawer.Navigator>
    )
}

They are both called and rendered in my Layout.js

render() {
        return (
            <NavigationContainer>
                <RootNavigator />
                <FooterNavigator/>
            </NavigationContainer>
        )
    }

Many thanks in advance !!

Answer 1

use this

<Stack.Screen name="Home" component={HomeScreen} />

instead of this

<Stack.Screen name="Home" component={HomeScreen}> </Stack.Screen>

solve your problem

  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen}/>
      <Stack.Screen name="Details" component={DetailScreen} />
    </Stack.Navigator>
  </NavigationContainer>

Answer 2

Just remove component prop from stack screen. if you are passing custom values through navigation stack

Answer 3

I get this error when I use a <Stack.Screen> and provide a component and a child to it, as the error mentions.

<Stack.Screen name="Home" component={Home}>
        {props => <Home {...props} sampleProperty="XXXXXXXX" />}
</Stack.Screen>

removing this bit component={Home} on line1 fixes the error.