CODEWITHSUNDEEP
react-nativereact-navigation
Gus Nando
Gus Nando

Reputation: 416

Re Render Tab Navigator onPress React Navigation

when i'm using stack navigator only. the screen get re render every time when i navigate to another screen. so how to do the same thing with tab navigator? every time i press the tab menu(favorite)?

Screenshot: enter image description here

Code:

const RootStack = StackNavigator(


{
    Home: {
      screen: Home,
      navigationOptions: {
        header: null
      }
    },
    Menu: {
      screen: Menu,
      navigationOptions: {
        header: null
      }
    },
  }
);

export default TabNavigator(
  {
    Home: { screen: RootStack },
    Favorite: { screen: Favorite },
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `home`;
        } else if (routeName === 'Favorite') {
          iconName = `heart`;
        }

    return <Icon name={iconName} size={25} color={tintColor} />;
  },
}),
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
tabBarOptions: {
  activeTintColor: '#00a6ed',
  inactiveTintColor: '#9e9e9e',
  style: {
      backgroundColor: '#FFFFFF',
  },
},
animationEnabled: false,
swipeEnabled: false,


}
);

Thanks in advance!

Upvotes: 1

Views: 6198

Answers (3)

Saeed Rohani
Saeed Rohani

Reputation: 3024

I recommend using Hooks to re-render for the screen when it changes focus, The library exports a useIsFocused hook to make this easier
isFocused is method lets us check whether the screen is currently focused. Returns true if the screen is focused and false otherwise. 

import { useIsFocused } from '@react-navigation/native';
import { Text } from '@react-native';

function Home() {
  const isFocused = useIsFocused();

  return <Text>{isFocused ? 'focused' : 'unfocused'}</Text>;
}

If you are using class component you can wrap your class component in a function component

import { useIsFocused } from '@react-navigation/native';

class Home extends React.Component {
  render() {
    // Get it from props
    const { isFocused } = this.props;
  }
}

// Wrap and export
export default function(props) {
  const isFocused = useIsFocused();

  return <Home {...props} isFocused={isFocused} />;
}

Upvotes: 2

Aniruddha Shevle
Aniruddha Shevle

Reputation: 4919

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

Upvotes: 2

bennygenel
bennygenel

Reputation: 24680

react-navigation supports listeners which you can use to detect focus or blur state of screen.

addListener - Subscribe to updates to navigation lifecycle

React Navigation emits events to screen components that subscribe to them:

  • willBlur - the screen will be unfocused
  • willFocus - the screen will focus
  • didFocus - the screen focused (if there was a transition, the transition completed)
  • didBlur - the screen unfocused (if there was a transition, the transition completed)

Example from the docs

const didBlurSubscription = this.props.navigation.addListener(
  'didBlur',
  payload => {
    console.debug('didBlur', payload);
  }
);
// Remove the listener when you are done
didBlurSubscription.remove();

// Payload
{
  action: { type: 'Navigation/COMPLETE_TRANSITION', key: 'StackRouterRoot' },
  context: 'id-1518521010538-2:Navigation/COMPLETE_TRANSITION_Root',
  lastState: undefined,
  state: undefined,
  type: 'didBlur',
};

Upvotes: 0

Related Questions