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:

main chat screen for chats or posts
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.

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.

oh, if you get it please tell here, but liked how you responded in 29 seconds. — GD- Ganesh Deshmukh, Jan 10 '20 at 05:43
found helpful article, and Implementing that for my problem from here: link https://medium.com/@dblazeski/react-navigation-call-screen-method-on-tab-bar-press-or-focus-5b93d844e18e — GD- Ganesh Deshmukh, Jan 10 '20 at 06:47
Solved by this reference link, https://medium.com/@dblazeski/react-navigation-call-screen-method-on-tab-bar-press-or-focus-5b93d844e18e — GD- Ganesh Deshmukh, Jan 10 '20 at 07:52
Please check this answer for the exact solution [click here](https://stackoverflow.com/a/71238408/11974466) — Suyash Vashishtha, Feb 23 '22 at 14:08

score 6 · Answer 1 · edited Mar 09 '22 at 12:34

6

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}
/>

edited Mar 09 '22 at 12:34

Rafael Tavares

5,678
4
32
48

answered Mar 04 '22 at 01:56

Raul Melo

131
2
2

score 3 · Answer 2 · answered Jan 10 '20 at 14:25

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);

Ok thanks Sushant . I will check it. Actually it worked from one reference whose link I shared in comment. — GD- Ganesh Deshmukh, Jan 10 '20 at 14:27

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

2 Answers2