react-navigation, dispatch action to change scene - scene not showing - react-native

Question

I have setup my substeps navigator below, the first scene, PCDrinkingDays works fine. However, when I click to dispatch an action, from that component to change scene:
onDone = () => {
this.props.dispatch(navigate(scenes.PC_HELP_ME_CALCULATE));
};`
The PCHelpMeCalculate, doesn't appear, although I can see it renders in the background by setting breakpoints.
My navigator is below. The other scenes seem ok, its just moving from the first scene that seems to be the problem. Can anyone help? Why isnt the component showing?
import { SubStepsNavigator } from '../../../navigators';
import PCDrinkingDays from '../PCDrinkingDays';
import PCHelpMeCalculate from '../PCHelpMeCalculate';
import PCUnitsCalculatorWhat from '../PCUnitsCalculatorWhat';
import PCUnitsCalculatorSize from '../PCUnitsCalculatorSize';
import PCUnitsCalculatorStrength from '../PCUnitsCalculatorStrength';
import PCUnitsCalculatorDrinksNumber from '../PCUnitsCalculatorDrinksNumber';
import PCUnitsCalculatorTable from '../PCUnitsCalculatorTable';
import * as scenes from '../../../scenes';
const PCDrinkingScenes = {
[scenes.PC_DRINKING_DAYS]: { screen: PCDrinkingDays },
[scenes.PC_HELP_ME_CALCULATE]: { screen: PCHelpMeCalculate },
[scenes.PC_UNITS_CALCULATOR_WHAT]: { screen: PCUnitsCalculatorWhat },
[scenes.PC_UNITS_CALCULATOR_SIZE]: { screen: PCUnitsCalculatorSize },
[scenes.PC_UNITS_CALCULATOR_STRENGTH]: { screen: PCUnitsCalculatorStrength },
[scenes.PC_UNITS_CALCULATOR_DRINKS_NUMBER]: {
screen: PCUnitsCalculatorDrinksNumber,
},
[scenes.PC_UNITS_CALCULATOR_TABLE]: { screen: PCUnitsCalculatorTable },
};
function getStep(routeName) {
switch (routeName) {
case scenes.PC_DRINKING_DAYS:
case scenes.PC_HELP_ME_CALCULATE:
case scenes.PC_UNITS_CALCULATOR_WHAT:
case scenes.PC_UNITS_CALCULATOR_SIZE:
case scenes.PC_UNITS_CALCULATOR_STRENGTH:
case scenes.PC_UNITS_CALCULATOR_DRINKS_NUMBER:
case scenes.PC_UNITS_CALCULATOR_TABLE:
return 1;
default:
console.log(`ERR not found step for route ${routeName}`);
return -1;
}
}
const stepsOptions = {
nSteps: 2,
getStep,
};
const PCDrinkingNavigator = SubStepsNavigator(
PCDrinkingScenes,
{ navigationOptions: { gesturesEnabled: false }, headerMode: 'none' },
stepsOptions
);
export default PCDrinkingNavigator;
I dispatch my action in my component:
class PCDrinkingDays extends Component {
onDone = () => {
this.props.dispatch(navigate(scenes.PC_HELP_ME_CALCULATE));
};
render() {
return (
<SceneSelectNumber
goBack={this.goBack}
onChangeNumber={this.onChangeNumber}
selectedNumberValue={this.props.daysInAweek}
onDone={this.onDone}
sceneConfig={sceneConfig}
/>
);
}
}

Answer 1

You seem to dispatch your action nowhere. You should use
this.props.navigation.dispatch(navigate(scenes.PC_HELP_ME_CALCULATE));
Or you could even use
this.props.navigation.navigate(scenes.PC_HELP_ME_CALCULATE);