CODEWITHSUNDEEP
reactjsreact-nativenavigationreact-navigation
Firas Abu Fares
Firas Abu Fares

Reputation: 551

react native how to re render refresh screen on tabBarOnPress

the screen do not get the new data until i close the app and open it again

i want to re-render the screen on tab press to refresh the screen and get the new data

Please see my below code

const DashboardTabNavigator = createBottomTabNavigator({

    Home: { screen: Home,
        navigationOptions: {
            tabBarIcon: (
                <Image style={{ width: 30, height: 30,tintColor:'white' }}
                       source={require('./assets/IconBootomTabNavigation/home_icon.png')} />
            )
        }
    },
    Category: { screen: Category,
        navigationOptions: {


            tabBarIcon: (
                <Image style={{ width: 30, height: 30,tintColor:'white' }}
                       source={require('./assets/IconBootomTabNavigation/cat_icon.png')} />
            )
        }
    }

Upvotes: 1

Views: 1487

Answers (1)

user3764429
user3764429

Reputation: 402

I recommend you to place the code responsible for fetching the data inside componentDidMount lifecycle method. This way you can ensure you get the data after the initial render.

If the screens are not being re-rendered, please check this thread. You can use tabBarOnPress prop to call any component method.

You might also try this solution:

static navigationOptions = ({navigation}) => {
  return {
    tabBarOnPress: (tab, jumpToIndex) => {
      if(!tab.focused) {
        jumpToIndex(tab.index);
        navigation.state.params.onFocus()
      }
    },
  }
}

componentDidMount() {
  this.props.navigation.setParams({
    onFocus: your-data-fetching-method
  })
}

Upvotes: 1

Related Questions