How to reset navigation stack state in nested navigator in react native

Question

My code is similar to following. suppose currently my navigation stack history is:

Screen A> Screen B> Screen D.

From screen D on a button press I want to reset my navigation stack state/history like the follwing: Screen A> Screen F

But I am getting this error:

  The action 'RESET' with payload {"index":1,"routes":[{"name":"Screen A"},{"name":"Screen F"}]} was not handled by any navigator.

<Stack.Navigator>
  <Stack.Screen name="TabNavigator" component={TabNavigator} />
  <Stack.Screen name="Screen E" component={ScreenE} />
  <Stack.Screen name="Screen F" component={ScreenF} />
  <Stack.Screen name="Screen G" component={ScreenG} />
</Stack.Navigator>
<Tab.Navigator>
  <Tab.Screen name="Screen A" component={ScreenA} />
  <Tab.Screen name="Screen B" component={ScreenB} />
  <Tab.Screen name="Screen C" component={ScreenC} />
  <Tab.Screen name="Screen D" component={ScreenC} />
</Tab.Navigator>

const ScreenD=({navigation})=>{ <Button title="reset stack" onPress={()=> navigation.reset({
        index: 1,
         routes: [{ name: "Screen A" }, { name: "Screen F" }],
       })} /> }

Answer 1

use CommonActions.reset() from here https://reactnavigation.org/docs/navigation-actions

This Worked well.