fix(react-native): VisibilityChangedProvider only Provider (#163)

* fix(react-native): VisibilityChangedProvider only Provider

* fix: changeset

Author: gronxb

.changeset/fair-cycles-brake.md

@@ -0,0 +1,6 @@
+---
+'@granite-js/react-native': patch
+'@granite-js/native': patch
+---
+
+fix(react-native): VisibilityChangedProvider only provider

packages/react-native/src/visibility/VisibilityProvider.tsx

@@ -1,6 +1,7 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, useEffect, useState } from 'react';
 import { AppStateProvider } from './useIsAppForeground';
 import { VisibilityChangedProvider } from './useVisibilityChanged';
+import { nativeEventEmitter } from '../native-event-emitter/nativeEventEmitter';
 
 interface Props {
   isVisible: boolean;
@@ -11,8 +12,9 @@ interface Props {
  * @name VisibilityProvider
  * @description
  * A Provider that manages whether a ReactNative view is currently in the foreground state.
+ * It subscribes to the app's `visibilityChanged` event to detect and manage screen visibility.
  * @param {boolean} isVisible - Whether the app is in the foreground state.
- * @param {ReactNode | undefined} children - Child components that observe `AppState`.
+ * @param {ReactNode | undefined} children - Child components that observe `visibilityChanged` and `AppState` event.
  * @returns {ReactElement} - A React Provider component wrapped with `VisibilityChangedProvider`.
  * @example
  * ```typescript
@@ -28,8 +30,20 @@ interface Props {
  * ```
  */
 export function VisibilityProvider({ isVisible, children }: Props): ReactElement {
+  const [visible, setVisible] = useState(isVisible);
+
+  useEffect(() => {
+    const subscription = nativeEventEmitter.addListener('visibilityChanged', (nextVisible) => {
+      setVisible(nextVisible);
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
   return (
-    <VisibilityChangedProvider isVisible={isVisible}>
+    <VisibilityChangedProvider isVisible={visible}>
       <AppStateProvider>{children}</AppStateProvider>
     </VisibilityChangedProvider>
   );

packages/react-native/src/visibility/useVisibilityChanged.tsx

@@ -1,14 +1,12 @@
-import { createContext, PropsWithChildren, ReactElement, useContext, useEffect, useState } from 'react';
-import { nativeEventEmitter } from '../native-event-emitter';
+import { createContext, PropsWithChildren, ReactElement, useContext } from 'react';
 
 const VisibilityChangedContext = createContext<boolean | undefined>(undefined);
 
 /**
  * @name VisibilityChangedProvider
  * @kind function
  * @description
- * A Provider that manages whether a React Native screen is visible.
- * It subscribes to the app's `visibilityChanged` event to detect and manage screen visibility.
+ * A Provider that manages whether a React Native screen is visible provider.
  *
  * @param {ReactNode | undefined} children - Child components that check screen visibility.
  * @param {boolean} isVisible - A boolean value indicating whether the screen is visible.
@@ -28,19 +26,7 @@ export function VisibilityChangedProvider({
   children,
   isVisible,
 }: PropsWithChildren<{ isVisible: boolean }>): ReactElement {
-  const [visible, setVisible] = useState(isVisible);
-
-  useEffect(() => {
-    const subscription = nativeEventEmitter.addListener('visibilityChanged', (nextVisible) => {
-      setVisible(nextVisible);
-    });
-
-    return () => {
-      subscription.remove();
-    };
-  }, []);
-
-  return <VisibilityChangedContext.Provider value={visible}>{children}</VisibilityChangedContext.Provider>;
+  return <VisibilityChangedContext.Provider value={isVisible}>{children}</VisibilityChangedContext.Provider>;
 }
 
 /**