Merge pull request #1838 from flexn-io/feat/update_RN_0.76.5

Feat/update rn 0.76.5

Author: ElenaDiachenko

.github/workflows/rnvUnitTest.yml

@@ -8,10 +8,23 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [18.x]
+                node-version: [20.x, 22.x]
 
         steps:
             - uses: actions/checkout@master
+
+            - name: install system dependencies for canvas
+              run: |
+                  sudo apt-get update
+                  sudo apt-get install -y \
+                  pkg-config \
+                  libcairo2-dev \
+                  libpango1.0-dev \
+                  libpng-dev \
+                  libjpeg-dev \
+                  libgif-dev \
+                  librsvg2-dev
+
             - name: Use Node.js ${{ matrix.node-version }}
               uses: actions/setup-node@v3
               with:

package.json

@@ -119,12 +119,12 @@
         "typescript-coverage-report": "0.8.0"
     },
     "engines": {
-        "node": ">=18.0.0",
+        "node": "20 || >=22",
         "npm": ">=9.0.0"
     },
     "private": true,
     "resolutions": {
-        "@react-native-community/cli-platform-ios": "12.3.6"
+        "@react-native-community/cli-platform-ios": "15.0.1"
     },
     "title": "ReNative",
     "husky": {

packages/app-harness/Gemfile

@@ -3,7 +3,8 @@ source 'https://rubygems.org'
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
 ruby ">= 2.6.10"
 
-gem 'cocoapods', '~> 1.13', '< 1.15'
-gem 'activesupport', '~> 7.0', '<= 7.0.8'
-gem 'cocoapods-user-defined-build-types'
-
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'
+gem 'cocoapods-user-defined-build-types'

packages/app-harness/Gemfile.lock

@@ -91,9 +91,10 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  activesupport (~> 7.0, <= 7.0.8)
-  cocoapods (~> 1.13, < 1.15)
+  activesupport (>= 6.1.7.5, != 7.1.0)
+  cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
   cocoapods-user-defined-build-types
+  xcodeproj (< 1.26.0)
 
 RUBY VERSION
    ruby 3.0.2p107

packages/app-harness/package.json

@@ -21,12 +21,12 @@
         "build:ios-test": "npx rnv build -p ios -s test -c harness --packageManager yarn --ci -r",
         "build:macos-test": "npx rnv build -p macos -s test -c harness --packageManager yarn --ci -r",
         "build:tvos-test": "npx rnv build -p tvos -s test -c harness --packageManager yarn --ci -r",
-        "e2e:android": "APPIUM_HOME=./ PLATFORM=android JAVA_HOME=$(/usr/libexec/java_home) wdio wdio.conf.cjs",
-        "e2e:androidtv": "APPIUM_HOME=./ PLATFORM=androidtv JAVA_HOME=$(/usr/libexec/java_home) wdio wdio.conf.cjs",
-        "e2e:ios": "APPIUM_HOME=./ PLATFORM=ios wdio wdio.conf.cjs",
-        "e2e:macos": "PLATFORM=macos ENGINE=electron wdio wdio.conf.cjs",
-        "e2e:tvos": "APPIUM_HOME=./ PLATFORM=tvos wdio wdio.conf.cjs",
-        "e2e:web": "PLATFORM=web wdio wdio.conf.cjs",
+        "e2e:android": "APPIUM_HOME=./ PLATFORM=android JAVA_HOME=$(/usr/libexec/java_home) wdio wdio.conf.js",
+        "e2e:androidtv": "APPIUM_HOME=./ PLATFORM=androidtv JAVA_HOME=$(/usr/libexec/java_home) wdio wdio.conf.js",
+        "e2e:ios": "APPIUM_HOME=./ PLATFORM=ios wdio wdio.conf.js",
+        "e2e:macos": "PLATFORM=macos ENGINE=electron wdio wdio.conf.js",
+        "e2e:tvos": "APPIUM_HOME=./ PLATFORM=tvos wdio wdio.conf.js",
+        "e2e:web": "PLATFORM=web wdio wdio.conf.js",
         "report": "yarn report:generate && yarn report:open",
         "report:generate": "npx allure generate --clean reporting/allure-results -o reporting/allure-report",
         "report:open": "npx allure open reporting/allure-report",
@@ -42,6 +42,7 @@
     "dependencies": {
         "@lightningjs/cli": "2.13.0",
         "@lightningjs/sdk": "5.5.1",
+        "@react-native-community/cli": "15.0.1",
         "@react-native-community/push-notification-ios": "1.11.0",
         "@react-native-firebase/app": "20.0.0",
         "@rnv/renative": "1.10.0-rc.0",
@@ -51,17 +52,17 @@
         "react": "18.3.1",
         "react-art": "18.3.1",
         "react-dom": "18.3.1",
-        "react-native": "0.73.4",
+        "react-native": "0.76.5",
         "react-native-carplay": "2.3.0",
         "react-native-fs": "2.20.0",
-        "react-native-gesture-handler": "2.16.2",
-        "react-native-google-cast": "4.8.0",
+        "react-native-gesture-handler": "2.21.2",
+        "react-native-google-cast": "4.8.3",
         "react-native-orientation-locker": "1.7.0",
-        "react-native-permissions": "4.1.5",
+        "react-native-permissions": "5.2.1",
         "react-native-photo-editor": "github:AppGyver/react-native-photo-editor#v0.1.2",
-        "react-native-safe-area-context": "4.10.3",
+        "react-native-safe-area-context": "5.0.0",
         "react-native-splash-screen": "3.3.0",
-        "react-native-tvos": "0.73.6-0",
+        "react-native-tvos": "0.76.5-0",
         "react-native-web": "0.19.12",
         "rn-fetch-blob": "0.12.0"
     },

packages/app-harness/renative.json

@@ -88,6 +88,7 @@
             }
         },
         "android": {
+            "enableJetifier": true,
             "templateAndroid": {
                 "build_gradle": {
                     "buildscript": {
@@ -163,38 +164,7 @@
             }
         },
         "react-native-photo-editor": {
-            "android": {
-                "templateAndroid": {
-                    "AndroidManifest_xml": {
-                        "tag": "manifest",
-                        "children": [
-                            {
-                                "tag": "uses-permission ",
-                                "android:name": "android.permission.WRITE_EXTERNAL_STORAGE",
-                                "children": []
-                            },
-                            {
-                                "tag": "application",
-                                "android:name": ".MainApplication",
-                                "children": [
-                                    {
-                                        "tag": "activity",
-                                        "android:name": "com.ahmedadeltito.photoeditor.PhotoEditorActivity",
-                                        "children": []
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                },
-                "package": "ui.photoeditor.RNPhotoEditorPackage"
-            },
-            "androidtv": {
-                "package": "ui.photoeditor.RNPhotoEditorPackage"
-            },
-            "firetv": {
-                "package": "ui.photoeditor.RNPhotoEditorPackage"
-            },
+            "supportedPlatforms": ["ios"],
             "ios": {
                 "podName": "iOSPhotoEditor",
                 "git": "https://github.com/prscX/photo-editor",
@@ -217,9 +187,6 @@
                     }
                 }
             },
-            "tvos": {
-                "disabled": true
-            },
             "pluginDependencies": null,
             "version": "github:AppGyver/react-native-photo-editor#v0.1.2"
         },

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

@@ -54,11 +54,11 @@ 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 orientationBtnRef = useRef<React.ElementRef<typeof TouchableOpacity>>(null);
+    const permissionBtnRef = useRef<React.ElementRef<typeof TouchableOpacity>>(null);
+    const splashBtnRef = useRef<React.ElementRef<typeof TouchableOpacity>>(null);
+    const photoEditorBtnRef = useRef<React.ElementRef<typeof TouchableOpacity>>(null);
+    const nativeModuleBtnRef = useRef<React.ElementRef<typeof TouchableOpacity>>(null);
     const [showVideo, setShowVideo] = useState(false);
     const [logsFocused, setLogsFocused] = useState(false);
     const { logDebug, logs } = useLoggerContext();
@@ -72,10 +72,7 @@ const AppContent = () => {
         if (isWebBased && isFactorTv && focusableRefs[0]?.current) {
             focusableRefs[0].current.focus();
             setFocusedIndex(0);
-        } else if (!isWebBased) {
-            // Set the initial AndroidTV and tvOS focus to be on the button
-            focusableRefs[0]?.current?.setNativeProps({ hasTVPreferredFocus: true });
-        }
+        } 
         return () => {
             removeNotificationListeners(handleNotification);
         };
@@ -161,6 +158,7 @@ const AppContent = () => {
                                 focusedIndex === 0 && styles.buttonFocused,
                                 isWebBased && isFactorTv && { outline: 'none' },
                             ]}
+                            hasTVPreferredFocus={!isWebBased && isFactorTv}
                         />
                     </TestCase>
                     <TestCase id={3} title="Orientation support ">

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

@@ -5,28 +5,30 @@ import styles from '../../styles';
 import { testProps } from '../../config';
 
 type ButtonProps = TouchableOpacityProps;
-export const NewModuleButton = forwardRef<TouchableOpacity, ButtonProps>(({ onBlur, onFocus, style }, ref) => {
-    const { TestNativeModule } = NativeModules;
-    const { logDebug } = useLoggerContext();
-    const callback = (error: any, result: string) => {
-        if (error) {
-            logDebug(error);
-        } else {
-            logDebug(result);
-        }
-    };
-    const onPress = () => {
-        if (TestNativeModule) {
-            TestNativeModule.createTestEvent('testName', 'testLocation', callback);
-        } else {
-            logDebug('NativeModules not supported for this platform');
-        }
-    };
-    return (
-        <TouchableOpacity ref={ref} onPress={onPress} onFocus={onFocus} onBlur={onBlur} style={style}>
-            <Text style={styles.buttonTitle} {...testProps('app-harness-home-native-call-button')}>
-                Click to invoke native module!
-            </Text>
-        </TouchableOpacity>
-    );
-});
+export const NewModuleButton = forwardRef<React.ElementRef<typeof TouchableOpacity>, ButtonProps>(
+    ({ onBlur, onFocus, style,hasTVPreferredFocus }, ref) => {
+        const { TestNativeModule } = NativeModules;
+        const { logDebug } = useLoggerContext();
+        const callback = (error: any, result: string) => {
+            if (error) {
+                logDebug(error);
+            } else {
+                logDebug(result);
+            }
+        };
+        const onPress = () => {
+            if (TestNativeModule) {
+                TestNativeModule.createTestEvent('testName', 'testLocation', callback);
+            } else {
+                logDebug('NativeModules not supported for this platform');
+            }
+        };
+        return (
+            <TouchableOpacity ref={ref} onPress={onPress} onFocus={onFocus} onBlur={onBlur} style={style} hasTVPreferredFocus={hasTVPreferredFocus}>
+                <Text style={styles.buttonTitle} {...testProps('app-harness-home-native-call-button')}>
+                    Click to invoke native module!
+                </Text>
+            </TouchableOpacity>
+        );
+    }
+);

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

@@ -5,16 +5,18 @@ import styles from '../../styles';
 import { testProps } from '../../config';
 
 type ButtonProps = TouchableOpacityProps;
-export const NewModuleButton = forwardRef<TouchableOpacity, ButtonProps>(({ onBlur, onFocus, style }, ref) => {
-    const { logDebug } = useLoggerContext();
-    const onPress = () => {
-        logDebug('NativeModules not supported in web');
-    };
-    return (
-        <TouchableOpacity ref={ref} onPress={onPress} onFocus={onFocus} onBlur={onBlur} style={style}>
-            <Text style={styles.buttonTitle} {...testProps('app-harness-home-native-call-button')}>
-                Click to invoke native module!
-            </Text>
-        </TouchableOpacity>
-    );
-});
+export const NewModuleButton = forwardRef<React.ElementRef<typeof TouchableOpacity>, ButtonProps>(
+    ({ onBlur, onFocus, style }, ref) => {
+        const { logDebug } = useLoggerContext();
+        const onPress = () => {
+            logDebug('NativeModules not supported in web');
+        };
+        return (
+            <TouchableOpacity ref={ref} onPress={onPress} onFocus={onFocus} onBlur={onBlur} style={style}>
+                <Text style={styles.buttonTitle} {...testProps('app-harness-home-native-call-button')}>
+                    Click to invoke native module!
+                </Text>
+            </TouchableOpacity>
+        );
+    }
+);

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

@@ -0,0 +1,48 @@
+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';
+
+type ButtonProps = TouchableOpacityProps;
+export const PhotoEditorButton = forwardRef<React.ElementRef<typeof TouchableOpacity>, ButtonProps>(
+    ({ onBlur, onFocus, style }, ref) => {
+        const { logDebug } = useLoggerContext();
+        const photoPath = RNFS.DocumentDirectoryPath + ICON_LOGO;
+        useEffect(() => {
+            const fetchAndMovePhoto = async () => {
+                const binaryFile = Image.resolveAssetSource(ICON_LOGO);
+                try {
+                    const resp = await RNFetchBlob.config({ fileCache: true }).fetch('GET', binaryFile.uri);
+                    if (await RNFS.exists(photoPath)) {
+                        await RNFS.unlink(photoPath);
+                    }
+                    await RNFS.moveFile(resp.path(), photoPath);
+                    logDebug('FILE WRITTEN!');
+                } catch (error) {
+                    logDebug(`${error}`);
+                }
+            };
+            fetchAndMovePhoto();
+        }, []);
+        const handlePhotoEditor = () => {
+            RNPhotoEditor.Edit({
+                path: photoPath,
+                onDone: () => {
+                    logDebug('on done');
+                },
+                onCancel: () => {
+                    logDebug('on cancel');
+                },
+            });
+        };
+        return (
+            <TouchableOpacity ref={ref} onPress={handlePhotoEditor} onFocus={onFocus} onBlur={onBlur} style={style}>
+                <Text style={styles.buttonTitle}>Show PhotoEditor</Text>
+            </TouchableOpacity>
+        );
+    }
+);