Not able to navigate to tab while using a custom tab when a new tab/screen is dynamically added at random intervals

akashgupta17 commented 2 weeks ago

Current behavior

Here's my code :

import React, { useEffect, useState } from 'react';
import { Animated, SafeAreaView, StyleSheet, TouchableOpacity, View } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

function MyTabBar({ state, descriptors, navigation, position }) {
    return (
        <View style={{ flexDirection: 'row' }}>
            {state.routes.map((route, index) => {
                const { options } = descriptors[route.key];
                const label =
                    options.tabBarLabel !== undefined
                        ? options.tabBarLabel
                        : options.title !== undefined
                        ? options.title
                        : route.name;

                const isFocused = state.index === index;

                const onPress = () => {
                    const event = navigation.emit({
                        type: 'tabPress',
                        target: route.key,
                        canPreventDefault: true,
                    });

                    if (!isFocused && !event.defaultPrevented) {
                        navigation.navigate(route.name, route.params);
                    }
                };

                const onLongPress = () => {
                    navigation.emit({
                        type: 'tabLongPress',
                        target: route.key,
                    });
                };

                const inputRange = state.routes.map((_, i) => i);
                const opacity = position.interpolate({
                    inputRange,
                    outputRange: inputRange.map((i) => (i === index ? 1 : 0)),
                });

                return (
                    <TouchableOpacity
                        accessibilityRole="button"
                        accessibilityState={isFocused ? { selected: true } : {}}
                        accessibilityLabel={options.tabBarAccessibilityLabel}
                        testID={options.tabBarTestID}
                        onPress={onPress}
                        onLongPress={onLongPress}
                        style={{
                            flex: 1,
                            height: 50,
                            backgroundColor: 'green',
                            alignItems: 'center',
                            justifyContent: 'center',
                        }}
                    >
                        <Animated.Text>{label}</Animated.Text>
                    </TouchableOpacity>
                );
            })}
        </View>
    );
}

const HomeScreen = () => {
    return <View style={{ backgroundColor: 'yellow', flex: 1 }}></View>;
};

const SettingsScreen = () => {
    return <View style={{ backgroundColor: 'red', flex: 1 }}></View>;
};

const NewScreen = () => {
    return <View style={{ backgroundColor: 'pink', flex: 1 }}></View>;
};

function MyTabs() {
    const [state, setstate] = useState([
        { name: 'Home', component: HomeScreen },
        { name: 'Settings', component: SettingsScreen },
    ]);
    useEffect(() => {
        setTimeout(() => {
            const newState = state.slice();
            newState.splice(1, 0, { name: 'New Screen', component: NewScreen });
            setstate(newState);
        }, 15000);
    }, []);
    return (
        <Tab.Navigator tabBar={(props) => <MyTabBar {...props} />}>
            {state.map((item) => {
                return <Tab.Screen key={item.name} name={item.name} component={item.component} />;
            })}
        </Tab.Navigator>
    );
}

const App = () => {
    return (
        <SafeAreaView style={{ flex: 1 }}>
            <NavigationContainer>
                <MyTabs />
            </NavigationContainer>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    sectionContainer: {
        marginTop: 32,
        paddingHorizontal: 24,
    },
    sectionTitle: {
        fontSize: 24,
        fontWeight: '600',
    },
    sectionDescription: {
        marginTop: 8,
        fontSize: 18,
        fontWeight: '400',
    },
    highlight: {
        fontWeight: '700',
    },
});

export default App;

https://github.com/react-navigation/react-navigation/assets/132350838/852b7971-b023-48b1-869b-e3d4d4f2c8a9

Expected behavior

It should navigate to the tab which is being selected in the video

Reproduction

Create a tab while by a state and add another tab to the state after some time -> while this happens stay on the last tab -> after the new tab is added before the index of the current focused tab -> try to navigate to the newly added tab by not SWIPING but clicking on the tab name in custom tab bar

Platform

[ ] Android
[X] iOS
[ ] Web
[ ] Windows
[ ] MacOS

Packages

[ ] @react-navigation/bottom-tabs
[ ] @react-navigation/drawer
[x] @react-navigation/material-top-tabs
[ ] @react-navigation/stack
[ ] @react-navigation/native-stack
[x] react-native-tab-view