0

I have already created a react native CLI project. Now every time when user come to my screen I want to update some value. In my home screen, I have three top tabs. When the user clicks on the 3rd tab. I need to update some values every time.

For those three tabs, I am using: ScrollableTabView

import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view';

I used this below code for every time to update the values. But this is calling only for one time:

useEffect(() => {
  alert('i called');
})

Then i tried :

import React, { useEffect, Component } from 'react';


componentWillMount( () => {
    alert('called ');
})

But I am getting error like cant the variable componentWillMount.

How can I solve? Please help.

Thanks.

Marci
  • 129
  • 1
  • 13
kumar barian
  • 139
  • 2
  • 12

2 Answers2

1

It seems like you are using the new React Native way by using hooks and functional components only.

It is not possible to use reacts lifecycle methods anymore - you will have to write your own componentWillMount code. Take a look at the docs or take a look at this answer:

How to use componentWillMount() in React Hooks?

~Faded

yesIamFaded
  • 1,970
  • 2
  • 20
  • 45
  • is there any alternative that evertime to call the some function when i enter in to the screen. I read that componentDidMount will call once . And componentWillMount will call twice. But is there any other alternative that i can do each time when i enter my screen ? – kumar barian Jun 09 '20 at 13:47
  • you can use all lifecycle functions if you use the older syntax.. look into the docs to understand what they do and then if you know what you need you can look up on how to create it as a hook. For example componentWillMount is good for getting the device width or similar. ComponentDidMount is good for API calls that populate your screen. – yesIamFaded Jun 09 '20 at 13:54
1

So, going back to React basics. There are 2 ways of declaring a component: using a Class based component or using a functional component which you are clearly using.

Before React Hooks, we couldn't have state in our functional components, that means that you cannot use the LifeCycle Methods from a Class based Component. I really suggest you to read the documentation. Instead, we can use hooks to get the same behavior.

Now, the useEffect hook will receive 2 parameters: the first one is the callback we are going to execute, and the second is an array of dependencies that will trigger that hook. It means that the hook will watch for changes in the variables you put in your array. Since you are not declaring an array of dependencies, the hook will be executed on every render.

So, what's exactly the problem? The problem is that declaring your tabs with react-native-scrollable-tab-view won't unmount the components for each tab, there are no variations, that's because your alert log is only being logged once. Because there are no more renders, just once.

Looking at the docs, you might be using onChangeTab method, which apparently will be called when changing the tab.

Ian Vasco
  • 1,280
  • 13
  • 17