@applicaster/zapp-react-native-ui-components 12.0.0-rc.85 → 12.0.0-rc.87

package/Components/BaseFocusable/index.tsx

@@ -71,9 +71,9 @@ export class BaseFocusable<
   }
 
   getId(props?: { id: string; groupId: string }) {
-    const { id, groupId = null } = props || this.props;
+    const { id } = props || this.props;
 
-    return groupId ? `${groupId}-${id}` : id;
+    return id;
   }
 
   getRect() {

package/Components/Layout/TV/__tests__/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Layout TV renders 1`] = `
 <View
   excludeFromFocusSearching={true}
-  id="/river/A1234"
+  id="/river/A1234--0"
   preferredFocus={true}
 >
   <View

package/Components/Navigator/StackNavigator.tsx

@@ -8,6 +8,7 @@ import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 
 import { Screen } from "../Screen/TV/index.web";
+import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -19,21 +20,26 @@ type Props = {
 };
 
 export const StackNavigator = ({ Components }: Props) => {
-  const { mainStack, currentRoute } = useNavigation();
+  const { mainStack } = useNavigation();
 
-  const renderScreen = ({ route, state }) => {
+  const renderScreen = ({ route, state }, index) => {
     const pathAttributes = getPathAttributes({ pathname: route });
 
     if (isEmpty(pathAttributes)) {
       return null;
     }
 
+    // HACK: Adding index to route to avoid conflicts in the navigator.
+    // Startup hooks are all using PUSH navigation action to navigate, but their routes are always like root routes.
+    // This means some hooks can have the same routes, e.g., ["hooks/context-setter", "/hooks/login-plug", "hooks/context-setter"].
+    const routeId = `${route}--${index}`;
+
     return (
       <FocusableGroup
-        id={route}
-        preferredFocus={route === currentRoute}
+        id={routeId}
+        preferredFocus={isLast(index, mainStack.length)}
         excludeFromFocusSearching
-        key={route}
+        key={routeId}
       >
         <ScreenDataContext.Provider value={state}>
           <PathnameContext.Provider value={route}>

package/Components/Screen/TV/index.web.tsx

@@ -42,6 +42,13 @@ const getPluginType = pathOr("unknown_plugin_type", [
   "plugin_type",
 ]);
 
+export const isPresentFullScreen = pathOr(false, [
+  "state",
+  "screen",
+  "module",
+  "presentFullScreen",
+]);
+
 const isPlayerPlugin = (routeState): boolean =>
   getPluginType(routeState) === "player";
 
@@ -150,8 +157,9 @@ export const Screen = ({ route, Components }: Props) => {
 
   const isPlayer = isPlayerPlugin(routeState);
   const isLogin = isLoginPlugin(routeState);
+  const isFullScreen = isPresentFullScreen(routeState);
 
-  const isNavBarVisible = !isPlayer && !isLogin;
+  const isNavBarVisible = !isPlayer && !isLogin && !isFullScreen;
 
   const screenData =
     screenType === "hooks" || isPlayer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.85",
+  "version": "12.0.0-rc.87",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-rc.85",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.85",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.85",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.85",
+    "@applicaster/applicaster-types": "12.0.0-rc.87",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.87",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.87",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.87",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",