CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
0xgareth
0xgareth

Reputation: 621

React Native: Re-Render Component When Tab is Click

I am using React Navigation and am trying to force a re-render of a component (and a getData() function) when I click on the tab.

I tried to follow this but no luck.

Router

export const Tabs = TabNavigator(
  {
  Progress: {
    screen: ProgressStack,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: 'Progress',
      tabBarIcon: ({ tintColor }) =>
      <Icon name="trending-up" size={25} color={tintColor} />
    }),
  },
export const ProgressStack = StackNavigator({
  Progress: {
    screen: ProgressScreen,
    navigationOptions: ({ navigation }) => ({
      title: 'Progress',
    }),
  },
});

Progress Component

componentWillReceiveProps() {
  console.log('rerender!');
  this.getData();
}

Upvotes: 1

Views: 3048

Answers (1)

agmcleod
agmcleod

Reputation: 13621

Not something i've tried, but I think this might be the right approach: https://reactnavigation.org/docs/with-navigation-focus.html

Use that high order component to pass a isFocusedProp then use componentDidUpdate to call getData

componentDidUpdate (previousProps) {
  if (!previousProps.isFocused && this.props.isFocused) {
    this.getData()
  }
}

There is also an onPress button event you can use: https://reactnavigation.org/docs/tab-navigator.html#tabbaronpress, but that would require a way to trigger the data call you're doing. If you're using redux, you would need to pass dispatch or the bound action function through the route params.

Upvotes: 2

Related Questions