Webtvs implementation for template

packages/create/src/components/FlashList/index.tsx

@@ -1,5 +1,5 @@
 import React, { ForwardedRef, useEffect, useRef, useState } from 'react';
-import { View as RNView } from 'react-native';
+import { View as RNView, Platform } from 'react-native';
 import { FlashList as FlashListComp, ListRenderItemInfo, CellContainer } from '@flexn/shopify-flash-list';
 import BaseScrollComponent from '@flexn/recyclerlistview/dist/reactnative/core/scrollcomponent/BaseScrollComponent';
 import Grid from '../../focusManager/model/grid';
@@ -167,7 +167,7 @@ const FlashList = (props: FlashListProps<any>) => {
                             model.remeasureSelfAndChildrenLayouts(children);
                         }
                     }}
-                    CellRendererComponent={ItemContainer}
+                    CellRendererComponent={Platform.OS === 'web' ? undefined : ItemContainer}
                     overrideProps={{
                         ...scrollViewProps,
                         ref: (ref: BaseScrollComponent) => {

packages/create/src/focusManager/model/screen.ts

@@ -178,6 +178,8 @@ class Screen extends FocusModel {
     }
 
     public onViewRemoved(model: View): void {
+        // If layout was not yet measured and view removed, we must also remove it from pending layout map
+        this.removeComponentFromPendingLayoutMap(model.getId());
         this._unmountingComponents++;
 
         setTimeout(() => {
@@ -191,12 +193,13 @@ class Screen extends FocusModel {
             if (model.getId() === this._precalculatedFocus?.getId()) {
                 this._precalculatedFocus = null;
             }
-            if (this._unmountingComponents <= 0 && !this._currentFocus && this.isInBackground()) {
+            if (this._unmountingComponents <= 0 && !this._currentFocus) {
                 const view = this.getFirstFocusableOnScreen();
 
                 if (view) {
                     this.setFocus(view);
-                } else {
+                } else if (CoreManager.getScreens()[this.getId()]) {
+                    // If there is no elements wait while first appears
                     // If there is no elements wait while first appears
                     this._interval = setInterval(() => {
                         const view = this.getFirstFocusableOnScreen();

packages/template-starter/package.json

@@ -60,7 +60,8 @@
         "watch": "tsc --watch --preserveWatchOutput --noEmit"
     },
     "dependencies": {
-        "@lightningjs/sdk": "5.2.0"
+        "@lightningjs/sdk": "5.2.0",
+        "raf": "3.4.1"
     },
     "devDependencies": {
         "@flexn/assets-create-outline": "0.3.3",

packages/template-starter/renative.json

@@ -212,25 +212,21 @@
         "web": {
             "engine": "engine-rn-next",
             "webpackConfig": {
-                "nextTranspileModules": [
-                    "lodash-es"
-                ]
+                "nextTranspileModules": ["lodash-es"]
             }
         },
         "chromecast": {
             "engine": "engine-rn-next",
             "webpackConfig": {
-                "nextTranspileModules": [
-                    "lodash-es"
-                ]
+                "nextTranspileModules": ["lodash-es"]
             }
         },
         "tizen": {
-            "engine": "engine-lightning",
+            "engine": "engine-rn-web",
             "target": "es5"
         },
         "webos": {
-            "engine": "engine-lightning"
+            "engine": "engine-rn-web"
         },
         "tvos": {
             "engine": "engine-rn-tvos",
@@ -239,9 +235,7 @@
         },
         "macos": {
             "engine": "engine-rn-electron",
-            "excludedPlugins": [
-                "react-native-linear-gradient"
-            ]
+            "excludedPlugins": ["react-native-linear-gradient"]
         },
         "windows": {
             "engine": "engine-rn-electron"

packages/template-starter/src/components/menu.tv.web.tsx

@@ -0,0 +1,3 @@
+import menu from './menu.tv.native';
+
+export default menu;

packages/template-starter/src/navigation/index.tv.native.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
-import { disableTVMenuKey, enableTVMenuKey, View } from '@flexn/create';
+import { disableTVMenuKey, enableTVMenuKey, setFocusManagerEnabled, View } from '@flexn/create';
+import { isPlatformTizen, isPlatformWebos } from '@rnv/renative';
 import { enableScreens } from 'react-native-screens';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Dimensions } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import {
     NavigationContainer,
@@ -18,6 +19,9 @@ import Menu from '../components/menu';
 import { ROUTES } from '../config';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
+const { height } = Dimensions.get('window');
+
+setFocusManagerEnabled(true);
 enableScreens();
 
 const createTVSideNavigator = createNavigatorFactory(Navigator);
@@ -50,13 +54,13 @@ function Navigator({ initialRouteName, children, screenOptions, drawerContent, .
             <ScreenContainer style={styles.main}>
                 {state.routes.map((route, i) => {
                     const isFocused = state.index === i;
+                    const style =
+                        isPlatformTizen || isPlatformWebos
+                            ? { opacity: isFocused ? 1 : 0 }
+                            : [StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }];
 
                     return (
-                        <Screen
-                            key={route.key}
-                            style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]}
-                            active={isFocused ? 1 : 0}
-                        >
+                        <Screen key={route.key} style={style} active={isFocused ? 1 : 0}>
                             {descriptors[route.key].render()}
                         </Screen>
                     );
@@ -99,6 +103,7 @@ const styles = StyleSheet.create({
         zIndex: 2,
         opacity: 1,
         position: 'absolute',
+        ...((isPlatformTizen || isPlatformWebos) && { height }),
     },
     content: { flex: 1 },
     main: { flex: 1 },

packages/template-starter/src/navigation/index.tv.web.tsx

@@ -1,42 +1,3 @@
-import React, { useContext } from 'react';
-import { createStackNavigator, CardStyleInterpolators } from '@react-navigation/stack';
-import { NavigationContainer } from '@react-navigation/native';
-import ScreenHome from '../screens/home';
-import ScreenCarousels from '../screens/carousels';
-import ScreenDetails from '../screens/details';
-import ScreenModal from '../screens/modal';
-import { ROUTES, ThemeContext } from '../config';
+import navigation from './index.tv.native';
 
-const ModalStack = createStackNavigator();
-const Stack = createStackNavigator();
-
-const CarouselsStack = () => (
-    <Stack.Navigator>
-        <Stack.Screen name={ROUTES.CAROUSELS} component={ScreenCarousels} />
-        <Stack.Screen name={ROUTES.DETAILS} component={ScreenDetails} />
-    </Stack.Navigator>
-);
-
-const App = () => {
-    // eslint-disable-next-line
-    const { theme } = useContext(ThemeContext);
-
-    return (
-        <NavigationContainer>
-            <ModalStack.Navigator
-                // headerMode="none"
-                initialRouteName="carousels"
-                // mode="modal"
-                screenOptions={{
-                    cardStyleInterpolator: CardStyleInterpolators.forScaleFromCenterAndroid,
-                }}
-            >
-                <ModalStack.Screen name={'home'} component={ScreenHome} />
-                <ModalStack.Screen name={ROUTES.MODAL} component={ScreenModal} />
-                <ModalStack.Screen name={ROUTES.CAROUSELS} component={CarouselsStack} />
-            </ModalStack.Navigator>
-        </NavigationContainer>
-    );
-};
-
-export default App;
+export default navigation;

packages/template-starter/src/screens/details.tsx

@@ -5,8 +5,10 @@ import { ThemeContext, ROUTES } from '../config';
 import { usePop, useReplace } from '../hooks';
 import { DataItem, getRandomItem, testProps } from '../utils';
 import Screen from './screen';
+import { useWindowDimensions } from 'react-native';
 
 const ScreenDetails = ({ route, navigation, router }: { navigation?: any; router?: any; route?: any }) => {
+    const { height } = useWindowDimensions();
     const replace = useReplace({ navigation });
     const pop = usePop({ navigation });
     const [item, setItem] = useState<DataItem>();
@@ -28,7 +30,7 @@ const ScreenDetails = ({ route, navigation, router }: { navigation?: any; router
     }
 
     return (
-        <Screen style={[theme.styles.screen]} focusOptions={{ focusKey: 'page' }}>
+        <Screen style={[theme.styles.screen, { minHeight: height }]} focusOptions={{ focusKey: 'page' }}>
             <ImageBackground source={{ uri: item.backgroundImage }} style={{ flex: 1 }} resizeMode="cover">
                 <ScrollView contentContainerStyle={theme.styles.center}>
                     <View style={theme.styles.detailsInfoContainer}>

packages/template-starter/src/screens/home.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import { ScrollView as RNScrollView } from 'react-native';
+import { ScrollView as RNScrollView, useWindowDimensions } from 'react-native';
 import { Text, View, ScrollView, TouchableOpacity, Image, ANIMATION_TYPES, AnimatorBackground } from '@flexn/create';
 import { Api } from '@rnv/renative';
 import Icon from 'react-native-vector-icons/FontAwesome';
@@ -10,6 +10,7 @@ import Screen from './screen';
 import packageJson from '../../package.json';
 
 const ScreenHome = ({ navigation }: { navigation?: any }) => {
+    const { height } = useWindowDimensions();
     const swRef = useRef<RNScrollView>() as React.MutableRefObject<RNScrollView>;
     const navigate = useNavigate({ navigation });
     const openURL = useOpenURL();
@@ -24,7 +25,10 @@ const ScreenHome = ({ navigation }: { navigation?: any }) => {
     };
 
     return (
-        <Screen style={theme.styles.screen} focusOptions={{ verticalWindowAlignment: 'low-edge', focusKey: 'page' }}>
+        <Screen
+            style={[theme.styles.screen, { minHeight: height }]}
+            focusOptions={{ verticalWindowAlignment: 'low-edge', focusKey: 'page' }}
+        >
             <ScrollView
                 style={{ backgroundColor: theme.static.colorBgPrimary }}
                 ref={swRef}