Allow POP to refresh the previous scene using React-Native-Router-Flux in IgniteJS

1

This post is talk about how to allow the NavigationActions.pop() command of the react-native-router-flux library https://github.com/aksonov/react-native-router-flux refresh the props of the previous scene.

The situation is when user went from the Screen1 to Screen2, and user press “Back button” on the Navigation bars of Screen2 back to Screen1. Here is the way to notified Screen1 about this return.

NavItems.js

function popScreen(){  
  NavigationActions.pop({refresh:{}});  
}export default {  
  backButton () {  
    return (  
      <TouchableOpacity onPress={popScreen}>  
        <Icon name='angle-left'  
          size={Metrics.icons.medium}  
          color={Colors.snow}  
          style={styles.navButtonLeft}  
        />  
      </TouchableOpacity>  
    )  
  },...Screen1.js  
  
Add the following function tocomponentWillReceiveProps(props){  
    console.log('component: componentWillReceiveProps');  
    console.log(props);  
  }NavigationRouter.jsclass NavigationRouter extends Component {  
  render () {  
    return (  
        
          
            
            ...  
              
            
          
        
    )  
  }  
}The console.log show as follows.component: componentWillReceiveProps  
Screen1.js:29 Object {navigationState: Object, name: "Screen1", sceneKey: "Screen1", parent: "drawerChildrenWrapper", type: "REACT_NATIVE_ROUTER_FLUX_PUSH"…}  
Screen1.js:33 component: shouldComponentUpdate  
Screen1.js:38 component: componentWillUpdate  
Screen1.js:42 component: componentDidUpdate