React Native: navigate between stacks

i'm working on a react native application. In said application you can also use some badges that can be added to your account with a QR Code Reader.

I have a screen that lists all badges with a button to bring up a New Badge Screen. In the new badge screen i have a button to open the scanner and when it detects a card, it brings you back to the New badge Screen where you can set additional info and then save, going back to the List screen (And this works perfectly).

I also have an account screen where you have a button to bring up a modal where you can also see a list of your badges. Here you can choose one to be your passepartout.I wanted to add the possibility to select it also by scanning its code, so i put a button that brings up the QR Code Scanner and sent it a callback to check whether the badge is already in the account or not.If it is i want it to be selected, if not i want to go to the New Badge Screen to save it as brand new. To achieve this i passed the starting screen as a prop in both routes, so that i could pass it to the navigation.navigate() function and freely move around.

Here comes the problem: from the passepartout route, when i bring up the scanner and scan a badge it triggers the callback but straight up ignores the navigation.navigate() function and keeps the scanner open. If i use my phone's back command the goBack() function gets automatically triggered (as per docs) and instead of bringing me back to the last visited screen, it brings me back to the Badge List Screen (completely in the other route).I tried to create two stacks to move with push and pop, but to no avail (It still just does nothing).

This is the stack with the screens on the right of the Flowchart:

const CardsStack = createStackNavigator({    Cards: {        screen: CardsScreen,        navigationOptions: ({navigation}) => headerDrawerNavigationOptions(navigation),    },    NewCard: {        screen: NewCardScreen,        navigationOptions: ({navigation}) => headerNavigationOptions(navigation),    },    CardBarcodeScanner: {        screen: CardBarcodeScannerScreen,        navigationOptions: ({navigation}) => headerNavigationOptions(navigation),    },},config)

This are the screens from the other stack:

const PassepartoutStack = createStackNavigator({        ProfilePassepartout: {            screen: ProfilePassepartoutScreen,            navigationOptions: ({navigation}) => headerNavigationOptions(navigation),        },        CardBarcodeScanner: {            screen: CardBarcodeScannerScreen,            navigationOptions: ({navigation}) => headerNavigationOptions(navigation),        },        NewCard: {            screen: NewCardScreen,            navigationOptions: ({navigation}) => headerNavigationOptions(navigation),        },        ProfilePassepartout2: {            screen: ProfilePassepartoutScreen,            navigationOptions: ({navigation}) => headerNavigationOptions(navigation),        },    },    config)

As you can see i also repeated a screen in the second stack to try to setup directly the whole flow (failing miserably).

This is the line in the QR Code Scanner Screen that 'should' navigate to the starting screen:

this.props.navigation.navigate(this.state.startingScreen, this.state.onDismiss(data)); 

Note: i would also like the goBack() function to bring me back to the previous screen and not to where he wants to, as this breaks the app.

I'm running out of ideas and i find sumerian more readable than react navigation docs (https://reactnavigation.org/docs/getting-started).

Anyone has any idea on why it behaves like it does or on how to solve this? Let me know in the comments if you need anything else.