How can i render app screen again after componentdidMount - reactjs

Question

I have 3 screens in my react native app:
Settings - [button ()=>this.props.navigation.navigate("Payments) ]
Payments - In this screen I fetch data from API with componentDidMount and I API sends back credit card info it will be rendered in screen, it no data came back [Button ()=>this.props.navigation.navigate("Add Credit Card")
Add Credit Card : In this screen users adds credit cards and sent it to server and goes back to Payments screen.
Here is the issue:
When I go from screen 1 to 2 (2 renders and does API call in componentDidMount), but when I go back from screen 3 to 2 (2 does not render and does not do any API call in componentDidMount)
In order to render the newly added credit card I need to go from Screen 3 to 1 then to 2.
How can I render screen 2?
Here is my screen 2 componentDidMount:
componentDidMount() {
this.setState({ ...this.state, activity: true });
Axios.get(GETCARDLIST_API, {
headers: {
appversion: 1.4,
apisecret: this.props.api_secret
}
})
.then(response => {
this.setState({ ...this.state, activity: false });
if (response.status == 200 && response.data.cards != null) {
this.setState({
...this.state,
showCards: true,
cards: response.data.cards,
isCardPresent: true
//numberOfCards: response.data.cards.length
});
} else {
}
console.log(response);
})
.catch(error => {
console.log({ error });
this.setState({ ...this.state, activity: false });
Alert.alert("Support", error.response.data.error);
});
}
I am using Stack Navigator to switch between screens.

Answer 1

You can listen when the second screen is focused, call the API and render the contents:
componentDidMount() {
this.listener = this.props.navigation.addListener('didFocus', this.getData)
}
componentWillUnmout() {
this.listener.remove();
}
getData = () => {
this.setState({ ...this.state, activity: true });
Axios.get(GETCARDLIST_API, {
headers: {
appversion: 1.4,
apisecret: this.props.api_secret
}
})
.then(response => {
this.setState({ ...this.state, activity: false });
if (response.status == 200 && response.data.cards != null) {
this.setState({
...this.state,
showCards: true,
cards: response.data.cards,
isCardPresent: true
//numberOfCards: response.data.cards.length
});
} else {
}
console.log(response);
})
.catch(error => {
console.log({ error });
this.setState({ ...this.state, activity: false });
Alert.alert("Support", error.response.data.error);
});
}

Answer 2

You could use unmountInactiveRoutes prop:
const stackNavigator = createStackNavigator(
{
stack1: {
screen: Somescreen,
},
stack2: {
screen: Somescreen2,
},
},
{
headerMode: 'none',
initialRouteName: 'stack1',
unmountInactiveRoutes: true,
},
);

Answer 3

componentDidMount(). This method is called once all our children Elements and our Component instances are mounted onto the Native UI and it is only called one time.(run the initial fetch)
if you need to fetch again you should use componentDidUpdate as below
componentDidUpdate(prevProps,prevState) {
if (prevProps.params.id !== this.props.params.id) {
// functon
}
}
Or call the function inside the constructor as below
constructor(props) {
super(props)
this.state = {
};
this.navigationWillFocusListener = props.navigation.addListener('willFocus', async ()=> {
// fetch()
});
}
Feel free for doubts

Answer 4

Your API call is Async function, componentdidMount call your API but your render function invoke before the response of API result. If you put a break-point on componentdidMount function and render function (view), you see the working of these functions.
Solution: you call your API method on screen 3 after adding card before to navigate Screen 2 and store your data in a global variable and render it. please also read react-native official docs, here is the link: https://reactnative.dev/docs/network#using-fetch