Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react native how to check if Component current show in screen

In my React native' project i need to check when component is shown in screen to update UI by background thread.

I have look around component props specs and try componentWillUnmount,componentWillMount but it not working in my case.

I have try using navigator.getCurrentRoutes() too, but it return empty object.

Please help me solve this case!.

like image 322
QViet Avatar asked Aug 23 '16 07:08

QViet


People also ask

How do you check if element is visible on screen React Native?

Summary. Use the getBoundingClientRect() method to get the size of the element and its relative position to the viewport. Compare the position of the element with the viewport height and width to check if the element is visible in the viewport or not.

How do you get current position of element in React Native?

To get the position of an element with React Native, we can get it from the View 's onLayout callback. to add a View with the onLayout prop set to a function that gets the position values from the event. nativeEvent. layout property.

How do you check if React component is rendered?

There's a checkbox well hidden in the React DevTools settings that allows you to visually highlight the components that rerendered. To enable it, go to "Profiler" >> click the "Cog wheel" on the right side of the top bar >> "General" tab >> Check the "Highlight updates when components render." checkbox.

How do I get the current window in React?

Use the window object to get the current URL in React, e.g. window. location. href returns a string containing the whole URL. If you need to access the path, use window.


1 Answers

If you use react-navigation you can try useFocusEffect useFocusEffect

But if you don't use it, you can subscribe to the event onLayout of a View. It will trigger whenever your component is mount or your screen's layout change. React Native onLayout

like image 174
Thinh Trinh Avatar answered Oct 25 '22 16:10

Thinh Trinh