How to re render a screen and it all compoent after moving from one tab to another and back to first tab?

Question

I am trying get re render a screen every time the user presses a tab or moving from one tab to another and then to first tab. I also placed a custom header in the screen. Same header on all the other tabs too getting some state from Asynchronous storage but it is also not refreshing once the screen has loading. I am using react navigation. Is there any method in navigation which will be called whenever tab is focused.

const AppStack = createBottomTabNavigator(
        {
            Search: SearchScreen,
            Saved: SavedScreen,
            Explore: ExploreStack,
            Offers: OffersScreen,
            Profile: ProfileScreen,
        },
        {
            initialRouteName: 'Explore',
            navigationOptions: ({navigation})=>({
                tabBarIcon: ({focused, tintColor})=>{
                    const { routeName } = navigation.state;
                    let iconName, iconSize;
                    switch(routeName) {
                                case "Search":
                                    iconName = `ios-search${focused ? '' : '-outline'}`;
                                    break;
                                case "Saved":
                                    iconName = `ios-heart${focused ? '' : '-outline'}`;
                                    break;
                                case "Explore":
                                    iconName = `ios-navigate${focused ? '' : '-outline'}`;
                                    break;
                                case "Offers":
                                    iconName = `ios-pricetag${focused ? '' : '-outline'}`;
                                    break;
                                case "Profile":
                                    iconName = `ios-person${focused ? '' : '-outline'}`;
                                    break;
                                default:
                                    break;
                                }
                    return <Icon name={iconName} color={tintColor} />;
                },
            }),
            tabBarOptions: {
                activeTintColor: 'black',
                inactiveTintColor: 'grey',
                activeBackgroundColor: '#abaf9b',
                labelStyle: {
                    fontSize: 15,
                },
                // style for tabbar
                style: {
                    backgroundColor: '#ffffff',
                    height: 60,
                    justifyContent: 'space-around',
                    alignContent: 'center',
                    alignItems: 'center',
                },
                // style for tab
                tabStyle: {
                    paddingTop: 7,
                    paddingBottom: 7
                }
            },
        }
    )

This is one of the tab. Other tabs a very similar using same component but the different apis.

import React, { Component } from 'react';
import { View, Image, ActivityIndicator, TouchableWithoutFeedback, TouchableHighlight, AsyncStorage  } from 'react-native';
import HeaderComponent from '../components/Header';
import SomeComponent from '../components/Some';
import { Container, Content, Icon, Spinner} from 'native-base';

class FirstScreen extends Component{
    
    constructor(props){
		super(props)
		this.state = { 
            somelist: [],
            name: '',
            userId: '',
            isloading: true,
            location: ''
        };
        this.getUser();
    }

    componentDidMount(){
        this.getLocation();
    }

    getLocation = async() => {
        const result = await AsyncStorage.getItem('location');
        console.log("Location " +result)
        this.setState({location: result});
    }
    
    getUser = async() => {
        const result = await AsyncStorage.getItem('user');
        const data = JSON.parse(result);
        console.log("data : "+data)
        this.setState({name: data.name, userId: data.userId})
    }

    componentWillMount(){
        console.log("Component will mount")
        //For demo
        fetch('http://someapi.co/api/listing')
            .then(response => response.json())
            .then(data => {
                this.setState({ somelist: data, isloading: false }, function(){console.log(this.state.somelist, this.state.isloading)})
            })
            .catch(function(error){
                console.log("Error : "+error);
            });

        //console.log(this.state.barlist);
    }

    renderComponent(){

        if(this.state.isloading == true){
            return (
                <View style={{ flex: 1, justifyContent: 'center', height: 300 }}>
                    <ActivityIndicator size="large" color="#0000ff" />
                </View>
            );
        }
        return this.state.somelist.map(  user=>
            <SomeComponent key={user.id} 
                onPress={()=>this.props.navigation.navigate('OtherScreen', {'Id': user.id, 'userId': this.state.userId})} 
   
                image={user.image[0].imageName}
            />
        );
    }

    render(){
        console.log(this.state.userId)
        return (
            <Container>
                <HeaderComponent 
                    profilePress={()=>this.props.navigation.navigate('Profile')} 
                    seachPress={()=>this.props.navigation.navigate('SearchSetting')}
                    // location={this.state.location}
                />
                    <TouchableHighlight  
                        style={{position: 'absolute', bottom: 20, zIndex:999999, right: 20 }}
                        onPress={()=>this.props.navigation.navigate('Map')}
                    >
                        <Image source={require('../images/navigation_icon.png')}  style={{height: 50, width: 50}}/>
                    </TouchableHighlight>
                    <Content>
                        <View style={{padding: 0, margin: 0}}>
                            {this.renderComponent()}
                        </View>
                    </Content>
            </Container>
        );
    }
}

export { SomeScreen };

Answer 1

Please refer the link: https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

There are 2 different ways I found below,

// call when the screen is focused
componentDidMount () {
    this._navListener = this.props.navigation.addListener('didFocus', (payload) => {
      // update based on your requirements
    });
}

OR

import { NavigationEvents } from "react-navigation";
...
class HomeScreen extends React.Component {
  render() {
    return (
      <View>
        <NavigationEvents
          onWillFocus={() => {
            // update based on your requirements!
          }}
        />
        <Text>Home</Text>
      </View>
    );
  }
}

Answer 2

You can access the event listeners in react-navigation as mentioned here

// call when the screen is focused
componentDidMount () {
    this._onFocusListener = this.props.navigation.addListener('didFocus', (payload) => {
      // refresh the component here
      // or update based on your requirements
    });
}