Support infinite tabs natively

[satya164]

We should support infinite tabs in the library, so user can swipe in either direction infinitely.

Considerations

• The length of the routes array is unknown upfront, and routes can be added both to the beginning of the array and the end of the array
• We can't keep all of the pages rendered, otherwise there'll be issues with memory usage

How we want to implement it

Currently the tabview works like this: if the index changes, we animate the tab change. For infinite pages, the index won't be stable, as pages could be added to the beginning of the routes array which will change the index even if the focused route is the same.

A more reliable approach would be to check the key of the focused route. Each route has a unique key property. Even if the index changed, if route.key of the focused route didn't change, then we shouldn't do an animated transition. We'll still need to adjust the translation value of the pages, but it should without an animation so that the user doesn't notice that and it happens transparently.

Test code

User should be able to write the following code to render infinite pages:

function InfiniteTabsExample() {
  const [state, dispatch] = React.useReducer(
    (state, action) => {
      switch (action.type) {
        case 'CHANGE_INDEX': {
          const startIndex =
            action.index < state.index
              ? state.routes[0].index - 1
              : state.routes[1].index;

          return {
            index: state.index,
            routes: [startIndex, startIndex + 1, startIndex + 2].map(i => ({
              key: String(i),
              index: i,
            })),
          };
        }
        default:
          return state;
      }
    },
    {
      index: 1,
      routes: [
        { key: '0', index: 0 },
        { key: '1', index: 1 },
        { key: '2', index: 2 },
      ],
    }
  );

  return (
    <TabView
      renderTabBar={() => null}
      renderScene={({ route }) => (
        <View style={styles.page}>
          <Text style={styles.label}>{route.key}</Text>
        </View>
      )}
      navigationState={state}
      onIndexChange={index => dispatch({ type: 'CHANGE_INDEX', index })}
    />
  );
}

[Naturalclar]

Hi :) I'd like to tackle on this issue.

[satya164]

@Naturalclar feel free

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[darkbasic]

@satya164 @Naturalclar any news on this?
I need to implement an infinite scrolling calendar, so I could give it a try. Currently I preload the days, but anything more than a dozen has terrible performance despite lazy loading.

[darkbasic]

Did the transition to react-native-pager-view make this feature any easier to achieve?

[MkNiloufar]

Did you find any solution?

[darkbasic]

I moved to a different library.

[crzycoder]

@darkbasic can you tell us which library you are using from support infinity numbers of top tabs ?

[ht19]

@darkbasic can you tell us which library you are using from support infinity numbers of top tabs ?

Have you solve this?

[crzycoder]

@ht19 Not yet