Merge branch 'release/1.0' into chore/deps-update

packages/app-harness/src/app/index.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
-import { Button, Image, ScrollView, Text, View } from 'react-native';
-import { Api, isPlatformIos } from '@rnv/renative';
+import React, { useEffect, useState, useRef } from 'react';
+import { Image, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { Api, isPlatformIos, isWebBased, isFactorTv, isTizenwatch, isAndroidwear } from '@rnv/renative';
 import { OrientationLocker, PORTRAIT, LANDSCAPE } from '../components/OrientationLocker';
 import { NewModuleButton } from '../components/NewModuleButton';
 import { useSplashScreen } from '../components/SplashScreen';
@@ -53,19 +53,60 @@ const App = () => (
 );
 
 const AppContent = () => {
+    const orientationBtnRef = useRef<TouchableOpacity>(null);
+    const permissionBtnRef = useRef<TouchableOpacity>(null);
+    const splashBtnRef = useRef<TouchableOpacity>(null);
+    const photoEditorBtnRef = useRef<TouchableOpacity>(null);
+    const nativeModuleBtnRef = useRef<TouchableOpacity>(null);
     const [showVideo, setShowVideo] = useState(false);
+    const [logsFocused, setLogsFocused] = useState(false);
     const { logDebug, logs } = useLoggerContext();
     const { SplashScreen } = useSplashScreen();
+    const focusableRefs = [nativeModuleBtnRef, orientationBtnRef, permissionBtnRef, splashBtnRef, photoEditorBtnRef];
+    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
 
     useEffect(() => {
         SplashScreen.hide();
         addNotificationListeners(handleNotification);
-
+        if (isWebBased && isFactorTv && focusableRefs[0]?.current) {
+            focusableRefs[0].current.focus();
+            setFocusedIndex(0);
+        }
         return () => {
             removeNotificationListeners(handleNotification);
         };
     }, []);
 
+    useEffect(() => {
+        if (!isFactorTv || !isWebBased) return;
+        const handleKeyDown = (event: KeyboardEvent) => {
+            const currentIndex = focusableRefs.findIndex((ref) => ref.current === document.activeElement);
+
+            if (currentIndex === -1) return;
+            const moveFocus = (newIndex: number) => {
+                const newFocusedRef = focusableRefs[newIndex]?.current;
+                if (newFocusedRef) {
+                    newFocusedRef.focus();
+                    setFocusedIndex(newIndex);
+                }
+            };
+            const keyActions: { [key: string]: () => void } = {
+                ArrowUp: () => currentIndex > 0 && moveFocus(currentIndex - 1),
+                ArrowDown: () => currentIndex < focusableRefs.length - 1 && moveFocus(currentIndex + 1),
+            };
+            const action = keyActions[event.key];
+
+            if (action) {
+                action();
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [focusableRefs]);
+
     const handleNotification: NotificationCallback = (message) => logDebug(message);
 
     const handleRequestPermissions = async () => {
@@ -102,22 +143,47 @@ const AppContent = () => {
                         backgroundColor: 'white',
                         padding: 10,
                     }}
+                    onTouchStart={() => {
+                        setLogsFocused(false);
+                    }}
                 >
                     <TestCase id={1} title="Hermes support ">
                         <Text style={styles.text}>{`hermes: ${
                             typeof HermesInternal === 'object' && HermesInternal !== null ? 'yes' : 'no'
                         }`}</Text>
                     </TestCase>
                     <TestCase id={2} title="Native call">
-                        <NewModuleButton />
+                        <NewModuleButton
+                            ref={nativeModuleBtnRef}
+                            onFocus={() => setFocusedIndex(0)}
+                            onBlur={() => setFocusedIndex(null)}
+                            style={[
+                                styles.button,
+                                { backgroundColor: '#841584' },
+                                focusedIndex === 0 && styles.buttonFocused,
+                                isWebBased && isFactorTv && { outline: 'none' },
+                            ]}
+                        />
                     </TestCase>
                     <TestCase id={3} title="Orientation support ">
                         <OrientationLocker
                             orientation={PORTRAIT}
                             onChange={(orientation) => logDebug(`onChange ${orientation}`)}
                             onDeviceChange={(orientation) => logDebug(`onDeviceChange ${orientation}`)}
                         />
-                        <Button title="Toggle Video" onPress={() => setShowVideo(!showVideo)} />
+                        <TouchableOpacity
+                            ref={orientationBtnRef}
+                            onPress={() => setShowVideo(!showVideo)}
+                            style={[
+                                styles.button,
+                                focusedIndex === 1 && styles.buttonFocused,
+                                isWebBased && isFactorTv && { outline: 'none' },
+                            ]}
+                            onFocus={() => setFocusedIndex(1)}
+                            onBlur={() => setFocusedIndex(null)}
+                        >
+                            <Text style={styles.buttonTitle}>Toggle Video</Text>
+                        </TouchableOpacity>
                         {showVideo && (
                             <View>
                                 <OrientationLocker orientation={LANDSCAPE} />
@@ -128,7 +194,19 @@ const AppContent = () => {
                         )}
                     </TestCase>
                     <TestCase id={4} title="Permissions">
-                        <Button onPress={handleRequestPermissions} title="Request permissions" />
+                        <TouchableOpacity
+                            ref={permissionBtnRef}
+                            onPress={handleRequestPermissions}
+                            style={[
+                                styles.button,
+                                focusedIndex === 2 && styles.buttonFocused,
+                                isWebBased && isFactorTv && { outline: 'none' },
+                            ]}
+                            onFocus={() => setFocusedIndex(2)}
+                            onBlur={() => setFocusedIndex(null)}
+                        >
+                            <Text style={styles.buttonTitle}>Request permissions</Text>
+                        </TouchableOpacity>
                     </TestCase>
                     <TestCase id={5} title="Image Support">
                         <Image source={ICON_LOGO} style={{ width: 100, height: 100 }} />
@@ -146,17 +224,38 @@ const AppContent = () => {
                                 On iOS there is a package issue that prevents splash screen from showing
                             </Text>
                         )}
-                        <Button onPress={() => SplashScreen.show()} title="Show SplashScreen" />
+                        <TouchableOpacity
+                            ref={splashBtnRef}
+                            onPress={() => SplashScreen.show()}
+                            style={[
+                                styles.button,
+                                focusedIndex === 3 && styles.buttonFocused,
+                                isWebBased && isFactorTv && { outline: 'none' },
+                            ]}
+                            onFocus={() => setFocusedIndex(3)}
+                            onBlur={() => setFocusedIndex(null)}
+                        >
+                            <Text style={styles.buttonTitle}>Show SplashScreen</Text>
+                        </TouchableOpacity>
                     </TestCase>
                     <TestCase id={8} title="PhotoEditor">
-                        <PhotoEditorButton />
+                        <PhotoEditorButton
+                            ref={photoEditorBtnRef}
+                            onFocus={() => setFocusedIndex(4)}
+                            onBlur={() => setFocusedIndex(null)}
+                            style={[
+                                styles.button,
+                                focusedIndex === 4 && styles.buttonFocused,
+                                isWebBased && isFactorTv && { outline: 'none' },
+                            ]}
+                        />
                     </TestCase>
                 </ScrollView>
             </View>
             <ScrollView
                 style={{
                     backgroundColor: '#EEEEEE',
-                    maxHeight: '20%',
+                    maxHeight: (isTizenwatch() || isAndroidwear()) && logsFocused ? '50%' : '20%',
                     width: '100%',
                     borderTopWidth: 1,
                     borderTopColor: 'black',
@@ -165,11 +264,21 @@ const AppContent = () => {
                 contentContainerStyle={{
                     paddingBottom: 10,
                 }}
+                onTouchStart={() => {
+                    setLogsFocused(true);
+                }}
             >
-                <Text style={[styles.dynamicText, { fontWeight: 'bold' }]}>{`Logs: `}</Text>
+                <Text style={[styles.dynamicText, { fontWeight: 'bold', paddingHorizontal: 25 }]}>{`Logs: `}</Text>
                 {logs
                     ? logs.map((it, idx) => (
-                          <Text key={idx} style={styles.dynamicText}>
+                          <Text
+                              key={idx}
+                              style={[
+                                  styles.dynamicText,
+                                  { paddingHorizontal: 25 },
+                                  idx === logs.length - 1 && { paddingBottom: 80 },
+                              ]}
+                          >
                               {it}
                           </Text>
                       ))

packages/app-harness/src/components/NewModuleButton/index.native.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
-import { NativeModules, Button } from 'react-native';
+import React, { forwardRef } from 'react';
+import { NativeModules, TouchableOpacityProps, TouchableOpacity, Text } from 'react-native';
 import { useLoggerContext } from '../../context';
+import styles from '../../styles';
 
-export const NewModuleButton = () => {
+interface ButtonProps extends TouchableOpacityProps {}
+export const NewModuleButton = forwardRef<TouchableOpacity, ButtonProps>(({ onBlur, onFocus, style }, ref) => {
     const { TestNativeModule } = NativeModules;
     const { logDebug } = useLoggerContext();
     const callback = (error: any, result: string) => {
@@ -19,5 +21,9 @@ export const NewModuleButton = () => {
             logDebug('NativeModules not supported for this platform');
         }
     };
-    return <Button title="Click to invoke native module!" color="#841584" onPress={onPress} />;
-};
+    return (
+        <TouchableOpacity ref={ref} onPress={onPress} onFocus={onFocus} onBlur={onBlur} style={style}>
+            <Text style={styles.buttonTitle}>Click to invoke native module!</Text>
+        </TouchableOpacity>
+    );
+});

packages/app-harness/src/components/NewModuleButton/index.tsx

@@ -1,11 +1,17 @@
-import React from 'react';
-import { Button } from 'react-native';
+import React, { forwardRef } from 'react';
+import { TouchableOpacityProps, TouchableOpacity, Text } from 'react-native';
 import { useLoggerContext } from '../../context';
+import styles from '../../styles';
 
-export const NewModuleButton = () => {
+interface ButtonProps extends TouchableOpacityProps {}
+export const NewModuleButton = forwardRef<TouchableOpacity, ButtonProps>(({ onBlur, onFocus, style }, ref) => {
     const { logDebug } = useLoggerContext();
     const onPress = () => {
         logDebug('NativeModules not supported in web');
     };
-    return <Button title="Click to invoke native module!" color="#841584" onPress={onPress} />;
-};
+    return (
+        <TouchableOpacity ref={ref} onPress={onPress} onFocus={onFocus} onBlur={onBlur} style={style}>
+            <Text style={styles.buttonTitle}>Click to invoke native module!</Text>
+        </TouchableOpacity>
+    );
+});

packages/app-harness/src/components/PhotoEditor/index.mobile.tsx → packages/app-harness/src/components/PhotoEditor/index.mobile.native.tsx

@@ -1,12 +1,14 @@
-import React, { useEffect } from 'react';
-import { Button, Image } from 'react-native';
+import React, { forwardRef, useEffect } from 'react';
+import { Text, Image, TouchableOpacity, TouchableOpacityProps } from 'react-native';
 import { RNPhotoEditor } from 'react-native-photo-editor';
 import RNFS from 'react-native-fs';
 import RNFetchBlob from 'rn-fetch-blob';
 import { useLoggerContext } from '../../context';
 import { ICON_LOGO } from '../../config';
+import styles from '../../styles';
 
-export const PhotoEditorButton = () => {
+interface ButtonProps extends TouchableOpacityProps {}
+export const PhotoEditorButton = forwardRef<TouchableOpacity, ButtonProps>(({ onBlur, onFocus, style }, ref) => {
     const { logDebug } = useLoggerContext();
     const photoPath = RNFS.DocumentDirectoryPath + ICON_LOGO;
     useEffect(() => {
@@ -36,5 +38,9 @@ export const PhotoEditorButton = () => {
             },
         });
     };
-    return <Button onPress={handlePhotoEditor} title="Show PhotoEditor" />;
-};
+    return (
+        <TouchableOpacity ref={ref} onPress={handlePhotoEditor} onFocus={onFocus} onBlur={onBlur} style={style}>
+            <Text style={styles.buttonTitle}>Show PhotoEditor</Text>
+        </TouchableOpacity>
+    );
+});

packages/app-harness/src/components/PhotoEditor/index.tsx

@@ -1,13 +1,18 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { useLoggerContext } from '../../context';
-import { Button } from 'react-native';
+import { Text, TouchableOpacity, TouchableOpacityProps } from 'react-native';
+import styles from '../../styles';
 
-export const PhotoEditorButton = () => {
+interface ButtonProps extends TouchableOpacityProps {}
+export const PhotoEditorButton = forwardRef<TouchableOpacity, ButtonProps>(({ onBlur, onFocus, style }, ref) => {
     const { logDebug } = useLoggerContext();
-
     const handlePhotoEditor = () => {
         logDebug('PhotoEditor not supported on this platform');
     };
 
-    return <Button onPress={handlePhotoEditor} title="Show PhotoEditor" />;
-};
+    return (
+        <TouchableOpacity ref={ref} onPress={handlePhotoEditor} onFocus={onFocus} onBlur={onBlur} style={style}>
+            <Text style={styles.buttonTitle}>Show PhotoEditor</Text>
+        </TouchableOpacity>
+    );
+});

packages/app-harness/src/styles/index.ts

@@ -1,4 +1,4 @@
-import { isPlatformIos, isFactorMobile, isFactorWatch } from '@rnv/renative';
+import { isPlatformIos, isFactorMobile, isFactorWatch, isFactorTv, isWebBased } from '@rnv/renative';
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
@@ -43,6 +43,20 @@ const styles = StyleSheet.create({
         color: 'black',
         fontSize: isFactorWatch ? 10 : 14,
     },
+    button: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#2196F3',
+        paddingVertical: isFactorTv && isWebBased ? 16 : 10,
+    },
+    buttonFocused: {
+        opacity: 0.6,
+    },
+    buttonTitle: {
+        fontSize: isFactorWatch ? 10 : 16,
+        color: '#FFFFFF',
+        fontWeight: '500',
+    },
 });
 
 export default styles;

packages/config-templates/renative.templates.json

@@ -61,10 +61,10 @@
             "engine": "engine-rn"
         },
         "androidtv": {
-            "engine": "engine-rn"
+            "engine": "engine-rn-tvos"
         },
         "firetv": {
-            "engine": "engine-rn"
+            "engine": "engine-rn-tvos"
         },
         "tvos": {
             "engine": "engine-rn-tvos"
@@ -3492,7 +3492,17 @@
         },
         "react-native-web": {
             "version": "0.19.12",
-            "supportedPlatforms": ["web", "tizen", "webos", "macos"],
+            "supportedPlatforms": [
+                "web",
+                "tizen",
+                "webos",
+                "macos",
+                "linux",
+                "windows",
+                "chromecast",
+                "kaios",
+                "tizenwatch"
+            ],
             "pluginDependencies": {
                 "react": "source:rnv"
             },

packages/core/src/configs/buildConfig.ts

@@ -7,7 +7,7 @@ import {
     fsExistsSync,
     formatBytes,
     mkdirSync,
-    writeFileSync,
+    writeFileSync
 } from '../system/fs';
 import { chalk, logDefault, logWarning, logDebug } from '../logger';
 import { getContext } from '../context/provider';
@@ -49,7 +49,6 @@ export const generateBuildConfig = () => {
     logDebug('generateBuildConfig');
 
     const c = getContext();
-
     const extraPlugins = getEnginesPluginDelta();
 
     const mergePathsPublic = [
@@ -109,7 +108,6 @@ export const generateBuildConfig = () => {
 
 const _generateBuildConfig = (mergePaths: string[], mergeFiles: Array<object | undefined>) => {
     const c = getContext();
-
     const cleanPaths = mergePaths.filter((v) => v);
     const existsPaths = cleanPaths.filter((v) => {
         const exists = fsExistsSync(v);