I am currently working with a custom tab component that allows navigation between tabs in a specific format. One of the tabs contains buttons that are also intended to navigate to these other tabs (even though I cannot modify the content).
Here is an example illustrating how the navigator is being utilized:
const [selectedRoute, setSelectedRoute] = useState<string>("TabOne");
const [idle, setIdle] = useState<boolean>(true);
useEffect(() => {
// Perform actions
}, [idle]);
useEffect(() => {
// Although there is no action needed here, it must be defined to handle changes
// Debug logs indicate that this function is being executed and the route is being altered
}, [selectedRoute]);
return(
<SideNavTabsNavigator
selectedRoute={selectedRoute} // Current tab being displayed
selectRoute={setSelectedRoute} // Function to switch tabs (this one functions correctly)
resetTimer={() => setIdle(false)} // Function to reset automatic logout timer (also functioning correctly)
routeProps={{
TabOne: {
screen:
<TabOne
resetTimer={() => setIdle(false)}
selectRoute={setSelectedRoute}
/>,
icon: "refresh",
iconLabel: "Tab One",
},
TabTwo: {
screen:
<TabTwo
resetTimer={() => setSelectedRoute}
selectRoute={setSelectedRoute}
/>,
icon: "arrow-down-bold-box",
iconLabel: "Tab Two",
},
}}
/>
);
A callback is being passed to the tabs so that when a button is clicked, the selected route will change accordingly. Despite the fact that the callback modifies the selected route and triggers the useEffect, the component is not re-rendering, thus failing to switch the tab.
Here is a brief overview of what the SideNavTabsNavigator returns and its structure:
<SideNavTabs>
<SideNavTabs.Tab>
<SideNavTabs.Icon />
<TabComponent />
</SideNavTabs.Tab>
</SideNavTabs>
Navigating between tabs works perfectly fine within SideNavTabs, but encounters issues when interacting with routeProps. I have attempted various solutions, but remain uncertain as to why it is not functioning at this point. Any assistance or clarification would be greatly appreciated.
I am contemplating switching to an entirely new navigator component due to my inability to resolve this issue, but creating a new instance seems highly inefficient.