react native router flux perform save function when header back button is pressed

Question

I've found a way to do this when you launch the Action Page, e.g. Actions.Home({onBack: () => console.log('custom back callback') }); however I do not think this will work for me. Here is a screen mockup for how the client wants the app to be done: where the back button will work as a save button for the data entry page.

I do not believe I can pass in a function when I launch the page that will be able to process the data that they entered.

What I need is to process the data and save it, then continue on to go back to the previous page, or if the data is not valid then I want to say "Stay and make changes, or leave without saving?".

How can I provide that onBack function once I land on the page and have access to the fields they will be working with?

Answer 1

I found the (Or at least a) way to do it. In componentDidMount, you want to refresh the page and supply your onBack function now that you have access to it:

componentDidMount() {
    setTimeout(()=> {
        Actions.refresh({onBack:()=>this.onBack()})
    });
}

EDIT: Google brought me back here (insert Thanos meme if you like) after updating RNRF to 4.1.0-beta.8 and found that the above code did not seem to execute. The fix was to import InteractionManager from react-native and wrap it around the old code like so:

componentDidMount() {

        InteractionManager.runAfterInteractions(()=> {
            Actions.refresh({onBack:()=>{
                this.props.handleReturnedImage({ uri: this.state.uri });
                Actions.pop();
            }});
        })

    }