React Native Reload Screen A In Back action - ios

Question

I Have ScreenA To Click Next ScreenB Then back To Screen A Not Call Function componentWillMount()
ScreenA -> Next -> ScreenB -> Back() -> ScreenA
How to Reload Rout Screen in Back Action
Class ScreenA
import React from "react";
import { Button, Text, View } from "react-native";
class ScreenA extends Component {
constructor(props){
super(props)
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
})
}
}
componentWillMount() {
fetch(MYCLASS.DEMAND_LIST_URL, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
userId:'17'})
})
.then((response) => response.json())
.then((responseData) => {
if (responseData.status == '1') {
var data = responseData.data
this.setState({
dataSource: this.state.dataSource.cloneWithRows(data),
});
}
})
.done();
}
onPress = () => {
this.props.navigate("ViewB");
};
render() {
return (
<View>
<Text>test</Text>
<Button title="Next" onPress={this.onPress} />
</View>
);
}
}
Class ScreenB
import React from "react"
import { Button } from "react-native"
class ScreenB extends Component {
render() {
const {goBack} = this.props.navigation;
return(
<Button title="back" onPress={goBack()} />
)
}
}

Answer 1

Class ScreenA
import React from "react";
import { Button, Text, View } from "react-native";
class ScreenA extends Component {
constructor(props){
super(props)
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
})
}
}
componentWillMount() {
this.getData()
}
getData() {
fetch(MYCLASS.DEMAND_LIST_URL, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
userId:'17'})
})
.then((response) => response.json())
.then((responseData) => {
if (responseData.status == '1') {
var data = responseData.data
this.setState({
dataSource: this.state.dataSource.cloneWithRows(data),
});
}
})
.done();
}
onPress = () => {
this.props.navigate("ViewB", { onSelect: this.onSelect, getData: () => this.getData() });
};
render() {
return (
<View>
<Text>test</Text>
<Button title="Next" onPress={this.onPress} />
</View>
);
}
}
Class ScreenB
class ScreenB extends Component {
componentWillUnmount() {
this.props.navigation.state.params.getData()
}
render() {
const {goBack} = this.props.navigation;
return(
<Button title="back" onPress={goBack()} />
)
}
}

Answer 2

As react-navigation using stack. When we navigate to another screen, current screen remain as we have, another screen show on current screen. That means competent is still there. Component will reload (recycle) only if component creating again but at this point component will not change. We can reload data and re-render data.
By default react navigation not providing any api for onBack event. But we can achieve our goal by some tricks.
Way 1
use one function to handle onBack event and pass it to navigated screen
class ScreenA extends Component {
onBack() {
// Back from another screen
}
render() {
const { navigation } = this.props
return (
<Button title="Open ScreenB" onPress={() => navigation.navigate('ScreenB', { onBack: this.onBack.bind(this) })} />
)
}
}
// In this ScreenB example we are calling `navigation.goBack` in a function and than calling our onBack event
// This is not a safest as if any device event emmit like on android back button, this event will not execute
class ScreenB extends Component {
goBack() {
const { navigation } = this.props
navigation.goBack()
navigation.state.params.onBack(); // Call onBack function of ScreenA
}
render() {
return (
<Button title="Go back" onPress={this.goBack.bind(this)} />
)
}
}
// In this ScreenB example we are calling our onBack event in unmount event.
// Unmount event will call always when ScreenB will destroy
class ScreenB extends Component {
componentWillUnmount() {
const { navigation } = this.props
navigation.state.params.onBack();
}
render() {
return (
<Button title="Go back" onPress={() => this.props.navigation.goBack()} />
)
}
}
Way 2
Try react-navigation listener https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle
We have some limitation in this. We have blur and focus event. You can put your logic on focus. Whenever you will back from another screen, ScreenA will focus and we can execute our logic. But there is one issue, this will execute every time when we got focus whatever first time or we minimize and reopen application.
Way 3
https://github.com/satya164/react-navigation-addons#navigationaddlistener
I'm not sure about this way, I didn't tried.