When using the Tab.Navigator component, it is important to note that only the Tab.Screen component can be a direct child component.
Is there a way in Typescript to convert or cast the Tab.Screen Type to the TabButton function?
const App = () => {
return (
<NavigationContainer>
<Tab.Navigator tabBarOptions={{
...>
<Tab.Screen name={'name1'} component={component1} />
<Tab.Screen name={'Add Photos'} component={FeedScreen}
options={{
tabBarButton: ...
/>
<TabButton title={'Setting'} component={SettingScreen} imageSrc={'./icons/accountDark.png'}/>
}
This is what I am attempting to achieve:
type TabButtonProps = {
title: string,
component: any,
imageSrc: string,
}
const TabButton = ({title, component, imageSrc}: TabButtonProps) => {
return (
<Tab.Screen name={title} component={component} options={{
tabBarIcon: ({focused}) => (
<View style={{alignItems: 'center', justifyContent: 'center', top: 10}}>
<Image source={imageSrc as ImageSourcePropType}
resizeMode='contain'
style={{width: 25, height: 25, tintColor: focused ? '#999999' : '#dddddd'}}
/>
</View>
)}}/>
)
}
Current issue:
Error: A navigator can only contain 'Screen' components as its direct children (found 'TabButton'). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.