@granite-js/react-native 0.1.31 → 0.1.32

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @granite-js/react-native
 
+## 0.1.32
+
+### Patch Changes
+
+- 74b2223: fix(react-native): VisibilityChangedProvider only provider
+- 7572713: bump version up babel
+- Updated dependencies [74b2223]
+- Updated dependencies [7572713]
+  - @granite-js/native@0.1.32
+  - @granite-js/plugin-core@0.1.32
+  - @granite-js/style-utils@0.1.32
+  - @granite-js/image@0.1.32
+  - @granite-js/mpack@0.1.32
+  - @granite-js/cli@0.1.32
+  - @granite-js/jest@0.1.32
+  - @granite-js/lottie@0.1.32
+
 ## 0.1.31
 
 ### Patch Changes

package/dist/visibility/VisibilityProvider.d.ts

@@ -7,8 +7,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

package/dist/visibility/useVisibilityChanged.d.ts

@@ -3,8 +3,7 @@ import { PropsWithChildren, ReactElement } from 'react';
  * @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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "description": "The Granite Framework",
   "bin": {
     "granite": "./bin/cli.js"
@@ -88,10 +88,10 @@
     "*.d.ts"
   ],
   "devDependencies": {
-    "@babel/core": "^7.24.9",
-    "@babel/preset-env": "^7.24.8",
-    "@babel/preset-typescript": "^7.24.7",
-    "@granite-js/native": "0.1.31",
+    "@babel/core": "7.28.5",
+    "@babel/preset-env": "7.28.5",
+    "@babel/preset-typescript": "7.28.5",
+    "@granite-js/native": "0.1.32",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
@@ -99,7 +99,7 @@
     "@types/node": "^22.10.2",
     "@types/react": "18.3.3",
     "@types/react-dom": "^18",
-    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/coverage-v8": "^4.0.12",
     "esbuild": "0.25.8",
     "eslint": "^9.7.0",
     "jsdom": "^25.0.1",
@@ -108,7 +108,7 @@
     "react-native": "0.72.6",
     "tsup": "^8.5.0",
     "typescript": "5.8.3",
-    "vitest": "^2.1.8",
+    "vitest": "^4.0.12",
     "zod": "^4.1.12"
   },
   "peerDependencies": {
@@ -118,13 +118,13 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/cli": "0.1.31",
-    "@granite-js/image": "0.1.31",
-    "@granite-js/jest": "0.1.31",
-    "@granite-js/lottie": "0.1.31",
-    "@granite-js/mpack": "0.1.31",
-    "@granite-js/plugin-core": "0.1.31",
-    "@granite-js/style-utils": "0.1.31",
+    "@granite-js/cli": "0.1.32",
+    "@granite-js/image": "0.1.32",
+    "@granite-js/jest": "0.1.32",
+    "@granite-js/lottie": "0.1.32",
+    "@granite-js/mpack": "0.1.32",
+    "@granite-js/plugin-core": "0.1.32",
+    "@granite-js/style-utils": "0.1.32",
     "@standard-schema/spec": "^1.0.0",
     "es-toolkit": "^1.39.8",
     "react-native-url-polyfill": "3.0.0"

package/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>
   );

package/src/visibility/useVisibilityChanged.tsx

@@ -1,5 +1,4 @@
-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);
 
@@ -7,8 +6,7 @@ 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>;
 }
 
 /**