How to use Stack in a Tab Navigator

Question

I'm new to react native. May I know how can I use Stack Navigator in Tab Navigator? I'm trying to hide the 'Add Budget' class component and insert into 'Budget' component but I tried this way it doesn't work it shows TypeError: undefined is not an object (evaluating 'route.key')

<NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Add Budget" component={addBudget}/>
        </Stack.Navigator> 
      <Tab.Navigator>
        <Tab.Screen name="Home" component={getTransaction} />
        
        <Tab.Screen name="Budget" component={budget} />
        
        <Tab.Screen name="Register" component={register} />
        <Tab.Screen name="Login" component={login} />
        <Tab.Screen name="TransactionDetails" component={transactionDetails} />
        <Tab.Screen name="Profile" component={profile} />
        <Tab.Screen name="CSV" component={exportToCSV} />
        
      </Tab.Navigator>
    </NavigationContainer>

in budget page when tap the FAB it should navigate to 'add budget' page instead of manually tapping the 'add budget'page from the bottom navigation

<FAB
   style={styles.fab}
   icon="plus"
   color="#5FC5FF"
   onPress={() => this.props.navigation.navigate("Add Budget")}
/>

How to use Stack in a Tab Navigator

0 Answers0