In my current use-case which involve dynamically creating tabs, I created a custom component which wraps <TabScreen />. I was experiencing an issue in which I couldn't display the tab label, icon and badge so I dugg to understand.
It turns out the relationship between <Tabs> and <TabScreen> props is behaving in a very cryptic way :
export const CustomTab = ({
tabName,
...props
}) => (
<TabScreen
// ⚠️ NOT spreading props here
// {...props}
// So this should be displayed
label={tabName}
>
<View>
<Text>Hello from inside</Text>
</View>
</TabScreen>
)
const tabs = ['hey', 'ho']
function App() {
return (
<Provider>
<SafeAreaView>
<TabsProvider>
<Tabs showTextLabel>
{tabs.map((tabName) => (
<CustomTab
// TODO: understand why on hell this is displayed
// (props are not spreaded inside !!!!!!!!)
label="outer label"
key={tabName}
myTabName={tabName}
/>
))}
</Tabs>
</TabsProvider>
</SafeAreaView>
</Provider>
);
}
The strange behavior here is "outer label" is displayed without any reason, while it should be set to the passed tabName prop.
If I remove the "outer label", nothing is displayed as a label.
Expected behaviour
I'd expect this to behave like any react component.
Current behaviour
In my current use-case which involve dynamically creating tabs, I created a custom component which wraps
<TabScreen />
. I was experiencing an issue in which I couldn't display the tab label, icon and badge so I dugg to understand.It turns out the relationship between
<Tabs>
and<TabScreen>
props is behaving in a very cryptic way :The strange behavior here is
"outer label"
is displayed without any reason, while it should be set to the passedtabName
prop.If I remove the
"outer label"
, nothing is displayed as a label.Expected behaviour
I'd expect this to behave like any react component.
How to reproduce?
Here's a full reproduction https://snack.expo.dev/@chimanos/props-passing
Preview
What have you tried so far?
I'm totally lost, because that's a behavior I never encountered anywhere, be it in raw react or react native projects.
Your Environment