How do you create dynamic/update-able routes?

[GollyJer]

The following is a duplicate of a question posted to stack overflow.
Cross-posting here in hopes of getting in front of the right eyeballs. Thanks.

---

I have the following component. It works great to create the initial set of tabs.

import * as React from 'react';
import { TabBar, TabView } from 'react-native-tab-view';
import { CollectionList } from './components';

const renderTabBar = (props) => <TabBar {...props} scrollEnabled />;

const RarityTabs = ({ collectionId, rarities }) => {
  const rarityRoutes = rarities.map((rarity) => ({
    key: rarity.variant,
    title: rarity.quality,
    rarity,
  }));

  const [index, setIndex] = React.useState(0);
  const [routes, setRoutes] = React.useState(rarityRoutes);

  return (
    <TabView
      lazy
      navigationState={{ index, routes }}
      renderScene={({ route }) => (
        <CollectionList collectionId={collectionId} selectedRarity={route.rarity} />
      )}
      renderTabBar={renderTabBar}
      onIndexChange={setIndex}
    />
  );
};

export default RarityTabs;

However, rarities can change and I'd like to make the tab route creation respond accordingly.
When I try useEffect to to fire setRoutes it locks up the app.

How can do you create a way for routes to be dynamic? Thanks!

---

Running Expo v40 with...

react-native: 0.63
react-native-tab-view: 3.0.1
react-native-pager-view: 5.1.3

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-tab-view
• react-native-pager-view

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[crzycoder]

Hi there Is it possible to add dynamic tabs ??