CODEWITHSUNDEEP
react-native
suman j
suman j

Reputation: 6960

react native route flux re-render component on stack pop

How do you re-run React Component Lifecycle methods to determine if a re-render is necessary when transitioning back to previous screens from stack using React Native Router Flux?

Scenario: Scene A -> B -> A Lets say, A is the initial scene and we navigate from A to B with a push i.e Actions.SceneB. From B to A with a Pop. When the stack is popped to show Scene-A, none of the React Component methods are called for Scene-A. How do I determine if a re-render is necessary? I searched the Issues listed on the github repo and many seems to have this problem without a solution. How is this problem addressed?

I have the ugly work around of calling Actions.refresh() with a setTimeout.


Work Around that works! This workaround seems to be hacky. There must be a better way to hook into component lifecycle to determine if a re-render is required. Perhaps a callback into the Component? 

<TouchableHighlight underlayColor='#efefef' onPress={() => { Actions.pop(); setTimeout(()=> Actions.refresh(), 500)}} style={styles.cancel}>

Options that do not work

Actions.pop({type: 'reset'})

          OR

Actions.refresh({"key" : "sceneA"})

Upvotes: 1

Views: 4627

Answers (2)

Sahan Devaka Lokuge
Sahan Devaka Lokuge

Reputation: 9

I was facing the same issue below code gave me required result.

let count = 0;
moveToMainScreen = () => {
    count += 1;
    Actions.pop({ refresh: { test: count } });
};



<Button onPress={this.moveToMainScreen}> Click </Button>

Upvotes: 1

suman j
suman j

Reputation: 6960

Work Around that works! This workaround seems to be hacky. There must be a better way to hook into component lifecycle to determine if a re-render is required. 

<TouchableHighlight underlayColor='#efefef' onPress={() => { Actions.pop(); setTimeout(()=> Actions.refresh(), 500)}} style={styles.cancel}>

This will call shouldComponentUpdate() method which gives an option to determine, if a re-render is required.

Upvotes: 2

Related Questions