React Native/Shoutem: navigateBack() not working

Question

My Problem is that I would like to navigateBack() from the BountyDetailsScreen to the LoyaltyScreen, but the navigateBack() function call does not trigger any action. When I log the function it says:

The only thing I notice is, that the navigationStack is empty. When I do the same with the navigateTo function it is working, but then I have a messed up navigation stack.

In my LoyaltyScreen.js I am displaying a ListView. It is a RN ListView (not imported from shoutem).

LoyaltyScreen.js

renderRow(bounty) {
  return (
    <ListBountiesView
      key={bounty.id}
      bounty={bounty}
      onDetailPress={this.openDetailsScreen}
      redeemBounty={this.redeemBounty}
    />
  );
}

ListBountiesView.js

The ListBountiesView renders each ListView Row and opens a Detail Screen when clicked on the Row.

render() {
const { bounty } = this.props;

return (      
  <TouchableOpacity onPress={this.onDetailPress}>          
    {bounty.type == 0 ? this.renderInShopBounty() : this.renderContestBounty()}
    <Divider styleName="line" />
  </TouchableOpacity>
);
}

BountyDetailsScreen.js

In the BountyDetailsScreen I display detailed information and would like to navigateBack() to the Loyalty Screen when I press a button.

<Button styleName="full-width" onPress={() => this.onRedeemClick()}>
  <Icon name="add-to-cart" />
  <Text>Einlösen</Text>
</Button>

onRedeemClick() {
  const { bounty, onRedeemPress } = this.props;
  onRedeemPress(bounty);
  navigateBack();
}

Answer 1

navigateBack is an action creator. You need to map it to props and read it from props in your redeemClick function. Just executing the imported action creator won't do anything since it's not connected to Redux.

Here's an example of you map it to props:

export default connect(mapStateToProps, { navigateBack })(SomeScreen));

Here's how you use it:

const { navigateBack } = this.props;

navigateBack();