Source:  Twitter logo

I am using stackNavigator for navigating between screens. I am calling two API's in componentDidMount() function in my second activity. When i load it first time, it gets loaded successfully. Then i press back button to go back to first activity. Then, if i am again going to second activity, the APIs are not called and I get render error. I am not able to find any solution for this. Any suggestions would be appreciated.

If anyone coming here in 2019, try this:

import {NavigationEvents} from 'react-navigation';

Add the component to your render:

<NavigationEvents onDidFocus={() => console.log('I am triggered')} />

Now, this onDidFocus event will be triggered every time when the page comes to focus despite coming from goBack() or navigate.

52 users liked answer #0dislike answer #052
Jithesh Kt profile pic
Jithesh Kt

If the upvoted syntax that uses NavigationEvents component is not working, you can try with this:

// no need to import anything more

// define a separate function to get triggered on focus
onFocusFunction = () => {
  // do some stuff on every screen focus

// add a focus listener onDidMount
async componentDidMount () {
  this.focusListener = this.props.navigation.addListener('didFocus', () => {

// and don't forget to remove the listener
componentWillUnmount () {
17 users liked answer #1dislike answer #117
vitosorriso profile pic

The React-navigation documentation explicitly described this case:

Consider a stack navigator with screens A and B. After navigating to A, its componentDidMount is called. When pushing B, its componentDidMount is also called, but A remains mounted on the stack and its componentWillUnmount is therefore not called.

When going back from B to A, componentWillUnmount of B is called, but componentDidMount of A is not because A remained mounted the whole time.

Now there is 3 solutions for that:

Subscribing to lifecycle events


React Navigation emits events to screen components that subscribe to them. There are four different events that you can subscribe to: willFocus, willBlur, didFocus and didBlur. Read more about them in the API reference.

Many of your use cases may be covered with the withNavigationFocus higher-order-component, the <NavigationEvents /> component, or the useFocusState hook.

  1. the withNavigationFocus higher-order-component
  2. the <NavigationEvents /> component
  3. the useFocusState hook (deprecated)

withNavigationFocus higher-order-component

import React from 'react';
import { Text } from 'react-native';
import { withNavigationFocus } from 'react-navigation';

class FocusStateLabel extends React.Component {
  render() {
    return <Text>{this.props.isFocused ? 'Focused' : 'Not focused'}</Text>;

// withNavigationFocus returns a component that wraps FocusStateLabel and passes
// in the navigation prop
export default withNavigationFocus(FocusStateLabel);

<NavigationEvents /> component

import React from 'react';
import { View } from 'react-native';
import { NavigationEvents } from 'react-navigation';

const MyScreen = () => (
      onWillFocus={payload => console.log('will focus', payload)}
      onDidFocus={payload => console.log('did focus', payload)}
      onWillBlur={payload => console.log('will blur', payload)}
      onDidBlur={payload => console.log('did blur', payload)}
      Your view code

export default MyScreen;

useFocusState hook

First install library yarn add react-navigation-hooks

import { useNavigation, useNavigationParam, ... } from 'react-navigation-hooks'

function MyScreen() {   const focusState = useFocusState();   return <Text>{focusState.isFocused ? 'Focused' : 'Not Focused'}</Text>; }

Here is my personal solution, using onDidFocus() and onWillFocus() to render only when data has been fetched from your API:

import React, { PureComponent } from "react";
import { View } from "react-native";
import { NavigationEvents } from "react-navigation";

class MyScreen extends PureComponent {
  state = {
    loading: true

  componentDidMount() {

  _doApiCall = () => {
    myApiCall().then(() => {
      /* Do whatever you need */
    }).finally(() => this.setState({loading: false}));

  render() {
    return (
              onWillFocus={() => this.setState({loading: true})}
        {!this.state.loading && /*
        Your view code

export default MyScreen;
8 users liked answer #2dislike answer #28
Kruupös profile pic

React-navigation keeps the component mounted even if you navigate between screens. You can use the component to react to those events :

  onDidFocus={() => console.log('hello world')}

More info about this component here.

4 users liked answer #3dislike answer #34
SebLambla profile pic

Solution for 2020 / React Navigation v5

Inside your screen's ComponentDidMount

componentDidMount() {
    this.props.navigation.addListener('focus', () => {
      console.log('Screen.js focused')

Alternatively: Put the addListener method in constructor instead to prevent duplicated calls

4 users liked answer #4dislike answer #44
williamsi profile pic

According to react-navigation docs we can use as below

componentDidMount () {
  this.unsubscribe= this.props.navigation.addListener('focus', () => {
    //Will execute when screen is focused

componentWillUnmount () {

Similar to vitosorriso`s answer but should changed didFocus to focus according to docs

2 users liked answer #5dislike answer #52
ViduraPrasangana profile pic

You want to perform something after every time navigating to a component using drawernavigator or stacknavigator ; for this purpose NavigationEvents fits better than componentDidMount .

import {NavigationEvents} from "react-navigation";
<NavigationEvents onDidFocus={()=>alert("Hello, I'm focused!")} />

Note : If you want to do the task every time after focusing on a component using drawer navigation or stack navigation then using NavigationEvents is better idea. But if you want to do the task once then you need to use componenetDidMount .

1 users liked answer #6dislike answer #61
Taohidul Islam profile pic
Taohidul Islam
//na pagina que você quer voltar
import {NavigationEvents} from 'react-navigation';

async atualizarEstado() {
  number: await AsyncStorage.getItem('count'),

render() {
return (
  <View style={styles.container}>
    <NavigationEvents onDidFocus={() => this.atualizarEstado()} />
1 users liked answer #7dislike answer #71
Danrley Silva profile pic
Danrley Silva

useEffect(() => {       
    const unsubscribe = props.navigation.addListener('focus', () => {
        // do something
        // Your apiCall();

return unsubscribe;
}, [props.navigation]);
0 users liked answer #8dislike answer #80
Keshav Gera profile pic
Keshav Gera

I have face this issue, the problem is when you navigate a page, the first time it call constructor, componentWillmount, render componentDidmount, but in second time when navigate to the same page it only call render, so if you do any API call or something from componentDidmount it would not be called,

and also componentWillunmount never called.

You can use this method, if you are using react-navigation 5.x with class component, it can solve your problem.

for every class component page add this method and call this method once from the constructor

constructor(props) {
    this.state = {
    this.navigationEventListener(); // call the function

navigationEventListener = () => { // add this function
        let i = 0;
        const initialState = this.state;
        this.props.navigation.addListener('focus', () => {
            if (i > 0) {
                this.setState(initialState, () => {
                    //this.UNSAFE_componentWillMount(); // call componentWillMount 
                    this.componentDidMount(); // call componentDidMount
        this.props.navigation.addListener('blur', () => {
            this.componentWillUnmount();  //call componentWillUnmount
0 users liked answer #9dislike answer #90
Subhodip Pal profile pic
Subhodip Pal

In React, componentDidMount is called only when component is mounted.I think what you are trying to do is call your API on going back in StackNavigator. You can pass a callback function as parameter when you call navigate like this on Parent Screen:

  navigate("Screen", {
     onNavigateBack: this.handleOnNavigateBack
  handleOnNavigateBack = () => {//do something};

And on Child Screen

-1 users liked answer #10dislike answer #10-1
Suyog K.C profile pic
Suyog K.C

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).