How do I refresh my component when clicked on tab on bottomTabNavigator in React Native, in React Navigation v3?

Question

I am using react-navigation version 3, I have bottom tab navigator, have 4 tabs.

out of which one is chat-screen, called as Chat, containing two views as:

1. main chat screen for chats or posts

2. if not login then show with buttons for signup and login.

when clicked on signup or login, it will take to respective screen for signing or logging in.

but from login/signin page when I click on bottom-tab navigator on Chat, it should again reload and check whether user is logged in or not?

problem is when I am navigating to signin/login page, from my tab, then It's not refreshing or called again or remounted.

1. my chat component is :

   class ChatScreen extends React.Component {
   constructor(props) {
       super(props);
       this.state = {
           loading: true,
           refreshing: false
       }
       this.onRefresh = this.onRefresh.bind(this);
       let WebViewRef;
   }
   
   componentDidMount() {
       this.didFocusListener = this.props.navigation.addListener(
           'didFocus',
           () => {
               console.log('bottom tab navigator is called');
           },
       );
   
       if (this.props.userInfo) {
           this.get_access_token()
       }
       else {
           console.log("! this.props.userInfo ")
       }
   }
   
   
   render() {
   
       if (this.props.userInfo && this.state.access_token)
           return (
               <SafeAreaView style={{ flex: 1 }}>
                   <ScrollView
                       contentContainerStyle={{ flex: 1 }}
                       refreshControl={<RefreshControl refreshing={this.state.refreshing} onRefresh={this.onRefresh} />}
                   >
                       <View style={{ flex: 1 }}>
   
                           <WebView
                               source={{ uri: 'my-demosite-anywebsite.com?access_token=' + this.state.access_token }}
                               onLoad={() => this.setState({ loading: false })}
                               ref={WebViewRef => (this.WebViewRef = WebViewRef)}
                           />
                       </View>
                   </ScrollView>
               </SafeAreaView>
           )
   
       else if (!this.props.userInfo) {
           return <MyCompanyLogoScreen />
       }
   
       else {
           return <LoadingScreen />
       }
     }
    }
   
   
   class MyCompanyLogoScreen extends React.Component{
    render() {
       return (
           <View style={styles.container}>
               {
                   !this.state.request_to_login ?  
                   <View> <MyCompanyLogoScreenAllComponents/>
   
   
                                  <Button
                                   bgColor="#4cd137"
                                   textColor="#FFFFFF"
                                   secondary
                                   rounded
                                   style={{ alignSelf: 'stretch', marginTop: hp(5), 
                                   width: '35%', marginRight: wp(6) }}
                                   caption={'LOGIN UP'}
                                   onPress={() => 
                                   this.navigateToLoginScreen(redirect_to_signup_or_login 
                                   = "login")
                                   }
                               />
                      </View>
     }
   

my problem is how can I refresh whole component when I tap on tab at bottomTabNavigator as Chat ?

also didFocus is not working.

Answer 1

you can use higher order component which passes the isFocused prop into a wrapped component. example:

import { withNavigationFocus } from 'react-navigation';

class TabLabel extends React.Component {

    componentDidUpdate(prevProps) {
      if (prevProps.isFocused !== this.props.isFocused) {
        //Call any action to update you view
        //fetch data when the component is focused
        //To prevent extra component re-renders, you may need to write some logic in shouldComponentUpdate
        }
      }

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

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

Answer 2

React navigation >= 6

React Native Tab Navigation has an option prop as unmountOnBlur. Set it to true and it will reload the tab screens every time you click on tabs.

<Tab.Screen
  initialParams={{ ...params, article: null }}
  options={{
     title: "HomePage",
     unmountOnBlur: true,
  }}
  name="HomePage"
  component={ResenhaPage}
/>