My application has a complex structure with three levels of nested navigators. I'm facing an issue where I can't navigate to the "Home" screen from the deepest level of navigation, specifically the "AccountDetails" screen. Clicking on the button seems to do nothing, no logs or navigation occurs. It appears to be a potential bug in the library, although I cannot completely rule out the possibility that I may have missed something. Any insights on what might be causing this?
Below is the code snippet:
type RootStackParamList = {
SignIn: undefined;
SignUp: undefined;
Home: undefined;
};
type HomeTabParamList = {
BudgetTab: undefined;
AccountsTab: undefined;
SettingsTab: undefined;
};
type AccountStackParamList = {
Accounts: undefined;
AccountDetails: undefined;
};
const Stack = createNativeStackNavigator<RootStackParamList>();
const Tab = createBottomTabNavigator<HomeTabParamList>();
const AccountStack = createNativeStackNavigator<AccountStackParamList>();
const AccountDetails = ({ navigation }: any) => {
return (
<View>
<Text>Account Details</Text>
<Button
onPress={() => {
navigation.navigate("Home");
}}
>
Go home
</Button>
</View>
);
};
const Accounts = ({ navigation }: any) => {
return (
<View>
<Text>Accounts</Text>
<Button
onPress={() => {
navigation.navigate("AccountDetails");
}}
>
View details
</Button>
</View>
);
};
const BudgetTab = ({ navigation }: any) => {
return (
<View>
<Button
onPress={() => {
navigation.navigate("SettingsTab");
}}
>
Sign Up
</Button>
<Text>Budget</Text>
</View>
);
};
const SettingsTab = () => {
return (
<View>
<Text>Settings</Text>
</View>
);
};
const AccountsTab = () => {
return (
<AccountStack.Navigator>
<AccountStack.Screen name="Accounts" component={Accounts} />
<AccountStack.Screen name="AccountDetails" component={AccountDetails} />
</AccountStack.Navigator>
);
};
const SignIn = () => {
return (
<View>
<Text>Sign In</Text>
</View>
);
};
const SignUp = () => {
return (
<View>
<Text>Sign Up</Text>
</View>
);
};
const HomeTabs = () => {
return (
<Tab.Navigator>
<Tab.Screen name="BudgetTab" component={BudgetTab} />
<Tab.Screen name="AccountsTab" component={AccountsTab} />
<Tab.Screen name="SettingsTab" component={SettingsTab} />
</Tab.Navigator>
);
};
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeTabs} />
<Stack.Screen name="SignIn" component={SignIn} />
<Stack.Screen name="SignUp" component={SignUp} />
</Stack.Navigator>
</NavigationContainer>
);
}