How to isolate a React Navigation Tab in standalone comopnent? - react-native

Question

I want to separate my navigation tabs into an isolated folder called tabs.
The first tab called HomeTab:
import React from 'react';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/AntDesign';
import {Home} from '../../../screens';
const Tab = createBottomTabNavigator();
const HomeTab = () => (
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({color, size}) => (
<Icon name="home" color={color} size={size} />
),
}}
/>
);
export {HomeTab};
I imported my HomeTab and nested with TabNavigator:
import * as React from 'react';
import {HomeTab} from './Tabs/Home';
import {NavigationContainer} from '#react-navigation/native';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
const TabNavigation = () => (
<NavigationContainer>
<Tab.Navigator>
<HomeTab />
</Tab.Navigator>
</NavigationContainer>
);
export default TabNavigation;
But I got this error:
However, when I move the HomeTab code inside the TabNavigator, it works as expected.
const TabNavigation = () => (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({color, size}) => (
<Icon name="home" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);

Answer 1

Direct children of any react-navigation parent must be a Group, a Screen or a Fragment, consider doing this:
const TabNavigation = () => (
<NavigationContainer>
<HomeTab />
</NavigationContainer>
);
const HomeTab = () => (
<Tab.Navigator>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({color, size}) => (
<Icon name="home" color={color} size={size} />
),
}}
/>
{* any other tab *}
</Tab.Navigator>
);