@applicaster/zapp-react-native-ui-components 15.0.0-rc.7 → 15.0.0-rc.9

package/Components/Screen/TV/hooks/useInitialFocus.ts

@@ -10,6 +10,8 @@ import {
   setFocusOnMenu,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux";
 
+import { waitUntilScreenRevealManagerIsReady } from "@applicaster/zapp-react-native-ui-components/Components/ScreenRevealManager/utils";
+
 type Return =
   | {
       onContent: true;
@@ -57,14 +59,22 @@ export const useInitialFocus = (): void => {
   React.useEffect(() => {
     const initialFocus = getInitialFocus(focusOnContent, isNavBarVisible);
 
-    if (initialFocus.onContent) {
-      setFocusOnContent(currentRoute);
+    if (initialFocus.onMenu) {
+      setFocusOnMenu(currentRoute);
 
       return;
     }
 
-    if (initialFocus.onMenu) {
-      setFocusOnMenu(currentRoute);
+    if (initialFocus.onContent) {
+      const subscription = waitUntilScreenRevealManagerIsReady().subscribe(
+        () => {
+          setFocusOnContent(currentRoute);
+        }
+      );
+
+      return () => {
+        subscription.unsubscribe();
+      };
     }
   }, []);
 };

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`<Screen Component /> when the navbar should be hidden renders correctly 1`] = `
 <View
+  importantForAccessibility="yes"
   style={
     {
       "backgroundColor": "blue",
@@ -34,6 +35,7 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
 
 exports[`<Screen Component /> when the navbar should show renders correctly 1`] = `
 <View
+  importantForAccessibility="yes"
   style={
     {
       "backgroundColor": "blue",

package/Components/Screen/index.tsx

@@ -1,6 +1,6 @@
 /// <reference types="@applicaster/applicaster-types" />
 import React from "react";
-import { View } from "react-native";
+import { AccessibilityInfo, findNodeHandle, View } from "react-native";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
@@ -12,6 +12,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import {
   useCurrentScreenData,
+  useIsScreenActive,
   useNavbarState,
   useNavigation,
   useRoute,
@@ -57,8 +58,8 @@ export function Screen(_props: Props) {
   const hasMenu = shouldNavBarDisplayMenu(currentRiver, plugins);
 
   const navBarProps = React.useMemo<MobileNavBarPluginProps | null>(
-    getNavBarProps(currentRiver, pathname, title),
-    [currentRiver, pathname]
+    () => getNavBarProps(currentRiver, pathname, title),
+    [currentRiver, pathname, title]
   );
 
   const NavBar = React.useMemo(
@@ -89,13 +90,29 @@ export function Screen(_props: Props) {
     [theme.app_background_color, backgroundColor]
   );
 
-  // Set ready state when screen is rotated to desired orientation
+  const isActive = useIsScreenActive();
+
+  const ref = React.useRef(null);
   const isReady = useWaitForValidOrientation();
 
+  React.useEffect(() => {
+    if (ref.current && isActive && isReady) {
+      const nodeHandle = findNodeHandle(ref.current);
+
+      if (nodeHandle != null) {
+        AccessibilityInfo.setAccessibilityFocus(nodeHandle);
+      }
+    }
+  }, [isActive, isReady]);
+
   // We prevent rendering of the screen until UI is actually rotated to screen desired orientation.
   // This saves unnecessary re-renders and user will not see distorted aspect screen.
   return (
-    <View style={style}>
+    <View
+      ref={ref}
+      style={style}
+      importantForAccessibility={!isActive ? "no-hide-descendants" : "yes"}
+    >
       {isReady ? (
         <>
           {navBarProps ? <NavBar {...navBarProps} hasMenu={hasMenu} /> : null}

package/Components/ScreenRevealManager/utils/index.ts

@@ -0,0 +1,23 @@
+import { ReplaySubject } from "rxjs";
+import { pairwise, filter, first } from "rxjs/operators";
+
+// we are interested in last 2 events, because we wait transition from <false> to <true>
+const screenRevealManagerSubject$ = new ReplaySubject<boolean>(2);
+
+export const emitScreenRevealManagerIsReadyToShow = () => {
+  screenRevealManagerSubject$.next(true);
+};
+
+export const emitScreenRevealManagerIsNotReadyToShow = () => {
+  screenRevealManagerSubject$.next(false);
+};
+
+export const waitUntilScreenRevealManagerIsReady = () => {
+  return screenRevealManagerSubject$.pipe(
+    pairwise(), // emit consecutive pairs: [prev, curr]
+    filter(
+      ([previousIsReady, currentIsReady]) => !previousIsReady && currentIsReady
+    ), // detect transition from not_ready to ready
+    first()
+  );
+};

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -5,6 +5,10 @@ import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils"
 import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
 
 import { ScreenRevealManager } from "./ScreenRevealManager";
+import {
+  emitScreenRevealManagerIsReadyToShow,
+  emitScreenRevealManagerIsNotReadyToShow,
+} from "./utils";
 
 const flex = platformSelect({
   tvos: 1,
@@ -43,6 +47,14 @@ export const withScreenRevealManager = (Component) => {
       () => new Animated.Value(HIDDEN)
     );
 
+    React.useEffect(() => {
+      if (!isReadyToShow) {
+        emitScreenRevealManagerIsNotReadyToShow();
+      } else {
+        emitScreenRevealManagerIsReadyToShow();
+      }
+    }, [isReadyToShow]);
+
     React.useEffect(() => {
       if (isReadyToShow) {
         Animated.timing(opacityRef.current, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-rc.7",
+  "version": "15.0.0-rc.9",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-rc.7",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.7",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.7",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.7",
+    "@applicaster/applicaster-types": "15.0.0-rc.9",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.9",
+    "@applicaster/zapp-react-native-redux": "15.0.0-rc.9",
+    "@applicaster/zapp-react-native-utils": "15.0.0-rc.9",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"