web-ridge / react-native-paper-tabs

Smooth and fast cross platform Material Design Tabs for React Native Paper
https://reactnativepapertabs.com
MIT License
189 stars 34 forks source link

Dynamic tabs, label bug, cryptic prop-passing behavior #63

Closed cyrilchapon closed 5 months ago

cyrilchapon commented 7 months ago

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 :

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.

How to reproduce?

Here's a full reproduction https://snack.expo.dev/@chimanos/props-passing

Preview

Capture d’écran 2023-12-04 à 12 32 52

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

software version
ios 17.0.1
android N/A
react-native 0.72.7
react-native-paper 5.11.3
node v18.18.0
npm or yarn 1.22.19
expo sdk 49.0.21
RichardLindhout commented 5 months ago

This should work, are you on latest version?