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();
}

score 2 · Accepted Answer · answered May 06 '17 at 22:34

2

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();

answered May 06 '17 at 22:34

airmiha

161
1
2

Thanks you! I forgot to read the `navigateBack()` function from props – Sebastian Auberger May 06 '17 at 23:13

score 1 · Answer 2 · answered May 07 '17 at 00:33

I can see that airmiha's answer is what you're looking for, but I just wanted to add onto it.

You can also use hasHistory to set up your @shoutem/ui NavigationBar (if you're using it) with a simple back button that utilises navigateBack().

<NavigationBar
  styleName="no-border"
  hasHistory
  title="The Orange Tabbies"
  share={{
    link: 'http://the-orange-tabbies.org',
    text: 'I was underwhelmed by The Orange Tabbies, but then I looked at that 
          sweet, sweet back button on the Nav Bar. 
          #MakeNavBarsGreatAgain',
    title: 'Nevermind the cats, check the Nav Bar!',
  }}
/>

You can find more examples with the NavigationBar component here.

React Native/Shoutem: navigateBack() not working

2 Answers2