@iternio/react-native-auto-play 0.1.3 → 0.1.4

package/lib/hooks/useFocusedEffect.d.ts

@@ -0,0 +1,9 @@
+/**
+ * An effect hook that only runs when the CarPlay/Android Auto screen is visible to the user and dependencies have changed.
+ * It behaves like `useEffect`, but the effect function is only executed if the screen is visible.
+ *
+ * @param moduleName The name of the root module to listen to for focus changes - one of AutoPlayModules or a cluster uuid.
+ * @param effect The effect function to run.
+ * @param deps An array of dependencies for the effect.
+ */
+export declare function useFocusedEffect(moduleName: string, effect: () => void | (() => void), deps: readonly unknown[]): void;

package/lib/hooks/useFocusedEffect.js

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react';
+import { HybridAutoPlay } from '..';
+/**
+ * An effect hook that only runs when the CarPlay/Android Auto screen is visible to the user and dependencies have changed.
+ * It behaves like `useEffect`, but the effect function is only executed if the screen is visible.
+ *
+ * @param moduleName The name of the root module to listen to for focus changes - one of AutoPlayModules or a cluster uuid.
+ * @param effect The effect function to run.
+ * @param deps An array of dependencies for the effect.
+ */
+export function useFocusedEffect(moduleName, effect, deps) {
+    const [isFocused, setIsFocused] = useState(false);
+    const effectRef = useRef(effect);
+    useEffect(() => {
+        effectRef.current = effect;
+    }, [effect]);
+    useEffect(() => {
+        return HybridAutoPlay.addListenerRenderState(moduleName, (state) => {
+            if (state === 'willAppear' || state === 'willDisappear') {
+                // react on actual visibility changes only
+                return;
+            }
+            setIsFocused(state === 'didAppear');
+        });
+    }, [moduleName]);
+    useEffect(() => {
+        if (!isFocused) {
+            return;
+        }
+        return effectRef.current();
+    }, [isFocused, ...deps]);
+}

package/lib/hooks/useIsAutoPlayFocused.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A hook to determine if the CarPlay/Android Auto screen is currently focused (visible).
+ *
+ * @param moduleName The name of the module to listen to.
+ * @returns `true` if the screen is focused, `false` otherwise.
+ */
+export declare function useIsAutoPlayFocused(moduleName: string): boolean;

package/lib/hooks/useIsAutoPlayFocused.js

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { HybridAutoPlay } from '..';
+/**
+ * A hook to determine if the CarPlay/Android Auto screen is currently focused (visible).
+ *
+ * @param moduleName The name of the module to listen to.
+ * @returns `true` if the screen is focused, `false` otherwise.
+ */
+export function useIsAutoPlayFocused(moduleName) {
+    const [isFocused, setIsFocused] = useState(false);
+    useEffect(() => {
+        const remove = HybridAutoPlay.addListenerRenderState(moduleName, (state) => {
+            setIsFocused(state === 'didAppear');
+        });
+        return () => {
+            remove();
+        };
+    }, [moduleName]);
+    return isFocused;
+}

package/lib/index.d.ts

@@ -13,6 +13,7 @@ export declare enum AutoPlayModules {
 }
 export * from './components/SafeAreaView';
 export * from './hooks/useAndroidAutoTelemetry';
+export * from './hooks/useFocusedEffect';
 export * from './hooks/useMapTemplate';
 export * from './hooks/useSafeAreaInsets';
 export * from './hooks/useVoiceInput';

package/lib/index.js

@@ -18,6 +18,7 @@ export var AutoPlayModules;
 })(AutoPlayModules || (AutoPlayModules = {}));
 export * from './components/SafeAreaView';
 export * from './hooks/useAndroidAutoTelemetry';
+export * from './hooks/useFocusedEffect';
 export * from './hooks/useMapTemplate';
 export * from './hooks/useSafeAreaInsets';
 export * from './hooks/useVoiceInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iternio/react-native-auto-play",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Android Auto and Apple CarPlay for react-native",
   "main": "lib/index",
   "module": "lib/index",

package/src/hooks/useFocusedEffect.ts

@@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from 'react';
+import { HybridAutoPlay } from '..';
+
+/**
+ * An effect hook that only runs when the CarPlay/Android Auto screen is visible to the user and dependencies have changed.
+ * It behaves like `useEffect`, but the effect function is only executed if the screen is visible.
+ *
+ * @param moduleName The name of the root module to listen to for focus changes - one of AutoPlayModules or a cluster uuid.
+ * @param effect The effect function to run.
+ * @param deps An array of dependencies for the effect.
+ */
+export function useFocusedEffect(
+  moduleName: string,
+  effect: () => void | (() => void),
+  deps: readonly unknown[]
+) {
+  const [isFocused, setIsFocused] = useState(false);
+  const effectRef = useRef(effect);
+
+  useEffect(() => {
+    effectRef.current = effect;
+  }, [effect]);
+
+  useEffect(() => {
+    return HybridAutoPlay.addListenerRenderState(moduleName, (state) => {
+      if (state === 'willAppear' || state === 'willDisappear') {
+        // react on actual visibility changes only
+        return;
+      }
+
+      setIsFocused(state === 'didAppear');
+    });
+  }, [moduleName]);
+
+  useEffect(() => {
+    if (!isFocused) {
+      return;
+    }
+
+    return effectRef.current();
+  }, [isFocused, ...deps]);
+}

package/src/index.ts

@@ -25,6 +25,7 @@ export enum AutoPlayModules {
 
 export * from './components/SafeAreaView';
 export * from './hooks/useAndroidAutoTelemetry';
+export * from './hooks/useFocusedEffect';
 export * from './hooks/useMapTemplate';
 export * from './hooks/useSafeAreaInsets';
 export * from './hooks/useVoiceInput';