Add possibility to change tab label dynamically

[valeriakononenko]

I need to update tab label on the fly.

Code works fine until labels changed, after that blank view appears.

Example:

const MyScreen = ({route}: Props) => {
  const context = useContext();

  return (
    <TabsProvider>
      <Tabs>
        <TabScreen label={labels[context].tab1}>
          <Tab1 />
        </TabScreen>
        <TabScreen label={labels[context].tab2}>
          <Tab2 />
        </TabScreen>
      </Tabs>
    </TabsProvider>
  );
};

const labels = {
  context1: {tab1: "1", tab2: "2"},
  context2: {tab1: "10", tab2: "20"},
  context3: {tab1: "100", tab2: "200"},
};

I guess, a blank screen appears because you use label as a key.

Additionally, now label can only be a string. What about React Element? I don't want to rerender the whole screen, but only elements, where label is rendered.

Proposing code:

const MyScreen = ({route}: Props) => {
  const context = useContext();

  return (
    <TabsProvider>
      <Tabs>
        <TabScreen key={'tab1'} label={<Text>{labels[context].tab1}</Text>}>
          <Tab1 />
        </TabScreen>
        <TabScreen key={'tab2'} label={<Text>{labels[context].tab2}</Text>}>
          <Tab2 />
        </TabScreen>
      </Tabs>
    </TabsProvider>
  );
};

const labels = {
  context1: {tab1: "1", tab2: "2"},
  context2: {tab1: "10", tab2: "20"},
  context3: {tab1: "100", tab2: "200"},
};

[RichardLindhout]

Can you provide snack?

[valeriakononenko]

Sorry, can't play the problem as a snack. I tried, tabs are updated correctly, but appeared another bugs. I'll try another dependencies' versions, cause Expo Snack doesn't allow to use the latest ones. I'll keep you posted if I find what's the problem or close the issue.

[valeriakononenko]

My app works fine in Expo Snack.

Expo Snack uses "expo": "~49.0.18" with this version dynamic tab labels work fine - labels change when context is changed, tab view is shown

I used "expo": "^50.0.4" labels change, but current tab view is blank, tab view updates only when you swipe tabs forward-backward.