How to call a function right after clicking on the back button of router-flux?

Question

I am using react-native-router-flux version 3.38.0. When I click on the back button on the router-header, I need to call an action creator or a function. How can I do that?

Answer 1

You can easily use renderBackButton props on your router flux Scene component. With this props, you have to call a closure / function to implement your custom back button.

import LeftButton from '...';

...

<Scene
  key="yourSceneKey"
  component={YourSceneComponent}
  title="Your Scene Title"
  renderBackButton={() => 
    <LeftButton 
      leftButtonIcon={"arrow-back"} 
      onLeft={() => Actions.pop()} 
      leftButtonColor={"white"} 
      leftButtonIconSize={30} 
    />
  }
/>

Ref: https://github.com/aksonov/react-native-router-flux/blob/v3/docs/API_CONFIGURATION.md