Skip to content

check if it is active #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JairajJangle merged 2 commits into from
Apr 26, 2025
Merged

check if it is active #33

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
13bb87c
check if it is active
gideaoms Apr 22, 2025
d60a411
fix: incorrect visibility state on initial render - fixes #30
JairajJangle Apr 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions src/VisibilitySensor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,11 @@ const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
});
const [lastValue, setLastValue] = useState<boolean | undefined>(undefined);
const [active, setActive] = useState<boolean>(false);
const hasMeasuredRef = useRef(false);

const measureInnerView = () => {
/* Check if the sensor is active to prevent unnecessary measurements
This avoids running measurements when the sensor is disabled or stopped */
if (!active) return;

localRef.current?.measure(
Expand Down Expand Up @@ -88,6 +91,9 @@ const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
rectDimensions.rectHeight !== dimensions.rectHeight
) {
setRectDimensions(dimensions);
/* Set hasMeasuredRef to true to indicate that a valid measurement has been taken
This ensures visibility checks only proceed after initial measurement */
hasMeasuredRef.current = true;
}
}
);
Expand All @@ -100,7 +106,12 @@ const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
}, [active]);

const stopWatching = useCallback(() => {
if (active) setActive(false);
if (active) {
setActive(false);
/* Reset measurement state when stopping to ensure fresh measurements
when the sensor is reactivated */
hasMeasuredRef.current = false;
}
}, [active]);

useEffect(() => {
Expand All @@ -114,6 +125,11 @@ const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
}, [disabled, startWatching, stopWatching]);

useEffect(() => {
/* Ensure visibility checks only run when the sensor is active and
at least one measurement has been completed. This prevents
premature visibility calculations with invalid or stale dimensions */
if (!active || !hasMeasuredRef.current) return;

const window: ScaledSize = Dimensions.get('window');
const isVisible: boolean =
rectDimensions.rectTop + (threshold.top || 0) <= window.height && // Top edge is within the bottom of the window
Expand All @@ -129,7 +145,7 @@ const VisibilitySensor = forwardRef<VisibilitySensorRef, VisibilitySensorProps>(
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [rectDimensions, lastValue]);
}, [rectDimensions, lastValue, active]);

return (
<View ref={localRef} {...rest}>
Expand Down