[MOO-1469] react native upgrade to 0.73.8

.github/workflows/NativePipeline.yml

@@ -192,7 +192,7 @@ jobs:
         uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3
         with:
           repository: mendix/native-template
-          ref: master
+          ref: feat/react-native-upgrade-to-73.8
           path: native-template
       - name: "Check out code"
         uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3
@@ -241,7 +241,7 @@ jobs:
         uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3
         with:
           repository: mendix/native-template
-          ref: master
+          ref: feat/react-native-upgrade-to-73.8
           path: native-template
       - name: "Check out code"
         uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c # v3

configs/e2e/native_dependencies.json

@@ -1,7 +1,7 @@
 {
     "react-native-maps": "0.31.1",
     "react-native-geocoder": "0.5.0",
-    "react-native-device-info": "8.7.1",
+    "react-native-device-info": "11.1.0",
     "react-native-action-button": "2.8.5",
     "react-native-material-menu": "1.2.0",
     "react-native-linear-gradient": "2.5.6",

package.json

@@ -46,6 +46,7 @@
     "@commitlint/config-conventional": "^15.0.0",
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@testing-library/jest-native": "^5.4.1",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/react-native": "^11.5.1",
     "@types/big.js": "^6.0.2",
     "@types/concurrently": "^6.3.0",
@@ -57,7 +58,6 @@
     "@types/node": "^16.11.19",
     "@types/react": "~18.0.0",
     "@types/react-dom": "~18.0.0",
-    "@types/react-native": "0.72.7",
     "@types/react-native-vector-icons": "^6.4.9",
     "@types/react-test-renderer": "~18.0.0",
     "@types/shelljs": "^0.8.9",
@@ -66,6 +66,7 @@
     "deepmerge": "^4.2.2",
     "detox": "^19.13.0",
     "eslint": "^7.20.0",
+    "eslint-plugin-prettier": "4.2.1",
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
     "image-js": "^0.33.0",
@@ -90,14 +91,14 @@
     "node": ">=20"
   },
   "resolutions": {
-    "@mendix/pluggable-widgets-tools": "9.24.0",
+    "@mendix/pluggable-widgets-tools": "9.24.1",
     "@types/react": "^18",
-    "@types/react-native": "0.72.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.72.7",
+    "react-native": "0.73.8",
     "typescript": "^4.9.5",
-    "ts-node": "^10.9.1"
+    "ts-node": "^10.9.1",
+    "@prettier/plugin-xml": "2.2.0"
   },
   "packageManager": "[email protected]"
 }

packages/jsActions/mobile-resources-native/CHANGELOG.md

@@ -6,11 +6,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [8.0.0] Native Mobile Resources - 2024-07-30
+
+### BREAKING
+
+-   We have upgraded React Native to version 0.73.8.
+
 ## [7.0.0] Native Mobile Resources - 2024-07-08
 
 -   We have fixed an issue with checking blocked permissions on iOS
 -   We have fixed an issue with `useNavigation` support in widgets.
 
+### BREAKING
+
+-   We have upgraded React Native Device Info to version 11.1.0.
+
 ## [6.1.0] Native Mobile Resources - 2024-05-28
 
 ### Changed

packages/jsActions/mobile-resources-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mobile-resources-native",
   "moduleName": "Native Mobile Resources",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "license": "Apache-2.0",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "repository": {
@@ -32,7 +32,7 @@
     "fbjs": "3.0.4",
     "mime": "3.0.0",
     "react-native-blob-util": "0.16.2",
-    "react-native-device-info": "8.7.1",
+    "react-native-device-info": "11.1.0",
     "react-native-file-viewer": "2.1.5",
     "react-native-image-picker": "5.0.1",
     "react-native-inappbrowser-reborn": "3.4.0",

packages/pluggableWidgets/bottom-sheet-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   We have upgraded React Native Device Info to version 11.1.0.
+
 ## [3.2.2] - 2023-5-24
 
 ### Fixed

packages/pluggableWidgets/bottom-sheet-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bottom-sheet-native",
   "widgetName": "BottomSheet",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
     "@mendix/piw-native-utils-internal": "*",
     "@mendix/piw-utils-internal": "*",
     "react-native-actionsheet": "^2.4.2",
-    "react-native-device-info": "8.7.1",
+    "react-native-device-info": "11.1.0",
     "react-native-modal": "^11.5.4",
     "react-native-reanimated": "^1.0.1",
     "reanimated-bottom-sheet": "^1.0.0-alpha.19"

packages/pluggableWidgets/bottom-sheet-native/src/__tests__/__snapshots__/BottomSheet.spec.tsx.snap

@@ -1,14 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Bottom sheet renders a custom bottom action sheet for ios (Basic modal) with custom style 1`] = `
-<Modal
-  animationType="none"
-  hardwareAccelerated={false}
-  onRequestClose={[Function]}
-  transparent={true}
-  visible={false}
-/>
-`;
+exports[`Bottom sheet renders a custom bottom action sheet for ios (Basic modal) with custom style 1`] = `null`;
 
 exports[`Bottom sheet renders a custom modal 1`] = `
 <View

packages/pluggableWidgets/bottom-sheet-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="BottomSheet" version="3.2.2" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="BottomSheet" version="3.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="BottomSheet.xml" />
         </widgetFiles>

packages/pluggableWidgets/gallery-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   We have upgraded React Native Device Info to version 11.1.0.
+
 ### Fixed
 
 -   We've resolved an issue where the loading indicator was triggered when pulling down the list, even in the absence of a pull-down event.

packages/pluggableWidgets/gallery-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gallery-native",
   "widgetName": "Gallery",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "A flexible gallery widget that renders columns, rows and layouts.",
   "copyright": "© Mendix Technology BV 2022. All rights reserved.",
   "license": "Apache-2.0",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@mendix/piw-utils-internal": "*",
-    "react-native-device-info": "8.7.1"
+    "react-native-device-info": "11.1.0"
   },
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "^9.0.0",

packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx

@@ -127,6 +127,7 @@ export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElem
                 keyExtractor={item => item.id}
                 ListEmptyComponent={renderEmptyPlaceholder}
                 onEndReached={onEndReached}
+                scrollEventThrottle={50}
                 renderItem={renderItem}
                 style={props.style.list}
                 testID={`${props.name}-list`}

packages/pluggableWidgets/gallery-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Gallery" version="1.0.3" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Gallery" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Gallery.xml" />
         </widgetFiles>

packages/pluggableWidgets/intro-screen-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   We have upgraded React Native Device Info to version 11.1.0.
+
 ## [3.2.3] - 2023-5-24
 
 ### Fixed

packages/pluggableWidgets/intro-screen-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intro-screen-native",
   "widgetName": "IntroScreen",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
     "@mendix/piw-native-utils-internal": "*",
     "@mendix/piw-utils-internal": "*",
     "@react-native-community/async-storage": "1.12.1",
-    "react-native-device-info": "8.7.1"
+    "react-native-device-info": "11.1.0"
   },
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "^9.0.0",

packages/pluggableWidgets/intro-screen-native/src/SwipeableContainer.tsx

@@ -328,6 +328,7 @@ export const SwipeableContainer = (props: SwipeableContainerProps): ReactElement
                 style={styles.flatList}
                 renderItem={renderItem}
                 onMomentumScrollEnd={onMomentumScrollEnd}
+                scrollEventThrottle={50}
                 extraData={width}
                 onLayout={onLayout}
                 keyExtractor={(_: any, index: number) => "screen_key_" + index}

packages/pluggableWidgets/intro-screen-native/src/__tests__/__snapshots__/IntroScreen.notch.spec.tsx.snap

@@ -780,10 +780,4 @@ exports[`Intro Screen renders with active slide attribute 1`] = `
 </Modal>
 `;
 
-exports[`Intro Screen renders with async storage identifier 1`] = `
-<Modal
-  hardwareAccelerated={false}
-  transparent={false}
-  visible={false}
-/>
-`;
+exports[`Intro Screen renders with async storage identifier 1`] = `null`;

packages/pluggableWidgets/intro-screen-native/src/__tests__/__snapshots__/IntroScreen.spec.tsx.snap

@@ -780,10 +780,4 @@ exports[`Intro Screen renders with active slide attribute 1`] = `
 </Modal>
 `;
 
-exports[`Intro Screen renders with async storage identifier 1`] = `
-<Modal
-  hardwareAccelerated={false}
-  transparent={false}
-  visible={false}
-/>
-`;
+exports[`Intro Screen renders with async storage identifier 1`] = `null`;

packages/pluggableWidgets/intro-screen-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="IntroScreen" version="3.2.3" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="IntroScreen" version="3.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="IntroScreen.xml" />
         </widgetFiles>

packages/pluggableWidgets/listview-swipe-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   We have upgraded React Native Gesture Handler to version 2.16.2.
+
 ## [3.0.0] - 2023-3-28
 
 ## BREAKING

packages/pluggableWidgets/listview-swipe-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "listview-swipe-native",
   "widgetName": "ListViewSwipe",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@mendix/piw-native-utils-internal": "*",
     "@mendix/piw-utils-internal": "*",
-    "react-native-gesture-handler": "1.10.3"
+    "react-native-gesture-handler": "2.16.2"
   },
   "devDependencies": {
     "@mendix/pluggable-widgets-tools": "^9.0.0",

packages/pluggableWidgets/listview-swipe-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="ListViewSwipe" version="3.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="ListViewSwipe" version="3.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="ListViewSwipe.xml" />
         </widgetFiles>

packages/pluggableWidgets/progress-circle-native/src/__tests__/__snapshots__/ProgressCircle.spec.tsx.snap

@@ -21,6 +21,7 @@ exports[`ProgressCircle renders 1`] = `
       bbHeight={100}
       bbWidth={100}
       collapsable={false}
+      fill="none"
       focusable={false}
       height={100}
       style={
@@ -39,7 +40,14 @@ exports[`ProgressCircle renders 1`] = `
       }
       width={100}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={null}
+        propList={
+          [
+            "fill",
+          ]
+        }
+      >
         <RNSVGPath
           d="M50 2.5
           A47.5 47.5 0 0 1 50.00000000000001 97.5"

packages/pluggableWidgets/rating-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### BREAKING
+
+-   We made the widget compatible with React Native 0.73.8
+
 ## [4.0.0] - 2023-01-24
 
 ## BREAKING

packages/pluggableWidgets/rating-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rating-native",
   "widgetName": "Rating",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

packages/pluggableWidgets/rating-native/src/lib/StarRating.tsx

@@ -2,7 +2,7 @@
 // has an outdated dependency (react-native-vector-icons) that we now managed here in this widget.
 import { ClassicComponentClass, Component, createElement } from "react";
 import { View, StyleSheet, ViewStyle } from "react-native";
-import { AnimatableProperties, View as AnimatableView } from "react-native-animatable";
+import { AnimatableProps, View as AnimatableView } from "react-native-animatable";
 import type { StarRatingProps } from "react-native-star-rating";
 
 import StarButton, { iconSets } from "./StarButton";
@@ -67,7 +67,7 @@ interface AnimationProps {
 
 class StarRating extends Component<Props> {
     static defaultProps: typeof defaultProps;
-    starRef: Array<ClassicComponentClass<AnimatableProperties<ViewStyle>> & AnimationProps>;
+    starRef: Array<ClassicComponentClass<AnimatableProps<ViewStyle>> & AnimationProps>;
 
     constructor(props: Props) {
         super(props);
@@ -128,9 +128,7 @@ class StarRating extends Component<Props> {
                     key={i}
                     ref={node => {
                         if (node) {
-                            this.starRef[i] = node as unknown as ClassicComponentClass<
-                                AnimatableProperties<ViewStyle>
-                            > &
+                            this.starRef[i] = node as unknown as ClassicComponentClass<AnimatableProps<ViewStyle>> &
                                 AnimationProps;
                         }
                     }}

packages/pluggableWidgets/rating-native/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Rating" version="4.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Rating" version="5.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Rating.xml" />
         </widgetFiles>