[DRAFT] Upgrade RN Gallery to 0.83 preview

__tests__/App.test.tsx

@@ -2,7 +2,7 @@
  * @format
  */
 
-import React from 'react';
+import * as React from 'react';
 import {create, act} from 'react-test-renderer';
 import {ButtonExamplePage} from '../src/examples/ButtonExamplePage';
 import {ClipboardExamplePage} from '../src/examples/ClipboardExamplePage';

azure-pipelines.yml

@@ -11,7 +11,7 @@ pool:
 
 steps:
   - checkout: self
-    clean: false
+    clean: true
 
   - task: NuGetToolInstaller@0
     inputs:
@@ -40,20 +40,20 @@ steps:
       verbosityRestore: Detailed
 
   - task: CmdLine@2
-    displayName: Lint and Type Checks
+    displayName: Lint Checks
     inputs:
-      script: yarn tsc | yarn lint
+      script: yarn lint
 
   - task: CmdLine@2
-    displayName: Build project (Release)
-    timeoutInMinutes: 60
+    displayName: Snapshot Tests
     inputs:
-      script: npx react-native run-windows --arch x64 --no-deploy --logging --release --buildLogDirectory $BuildLogDirectory\Debug
+      script: yarn test
 
   - task: CmdLine@2
-    displayName: Snapshot Tests
+    displayName: Build project (Release)
+    timeoutInMinutes: 60
     inputs:
-      script: yarn test
+      script: npx react-native run-windows --arch x64 --no-deploy --logging --release --buildLogDirectory $BuildLogDirectory\Debug
 
   - task: MSBuild@1
     displayName: Build AccessibilityUnitTest

package.json

@@ -14,9 +14,9 @@
   "dependencies": {
     "@react-native-clipboard/clipboard": "^1.16.1",
     "lowlight": "^1.17.0",
-    "react": "19.1.1",
-    "react-native": "0.82.1",
-    "react-native-windows": "0.82.0"
+    "react": "19.2.0",
+    "react-native": "0.83.0-rc.5",
+    "react-native-windows": "0.83.0-preview.2"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -25,22 +25,22 @@
     "@react-native-community/cli": "20.1.2",
     "@react-native-community/cli-platform-android": "20.1.2",
     "@react-native-community/cli-platform-ios": "20.1.2",
-    "@react-native/babel-preset": "0.81.5",
-    "@react-native/eslint-config": "0.81.5",
-    "@react-native/metro-config": "0.81.5",
-    "@react-native/typescript-config": "0.81.5",
-    "@rnx-kit/jest-preset": "^0.1.17",
+    "@react-native/babel-preset": "0.83.0-rc.5",
+    "@react-native/eslint-config": "0.83.0-rc.5",
+    "@react-native/metro-config": "0.83.0-rc.5",
+    "@react-native/typescript-config": "0.83.0-rc.5",
+    "@rnx-kit/jest-preset": "^0.3.1",
     "@types/jest": "^29.5.13",
-    "@types/react": "19.1.0",
+    "@types/react": "19.2.0",
     "@types/react-test-renderer": "19.1.0",
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
     "prettier": "2.8.8",
-    "react-test-renderer": "19.1.0",
+    "react-test-renderer": "19.2.0",
     "typescript": "5.0.4"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=22"
   },
   "jest": {
     "preset": "react-native",

src/App.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
+import * as React from 'react';
 import {
   View,
   StyleSheet,

src/AppContext.js

@@ -1,4 +1,4 @@
 // AppContext.js
-import React from 'react';
+import * as React from 'react';
 const AppContext = React.createContext();
 export default AppContext;

src/ComponentListPage.tsx

@@ -1,6 +1,6 @@
 'use strict';
 import {StyleSheet, View, Text, ScrollView, PlatformColor} from 'react-native';
-import React from 'react';
+import * as React from 'react';
 import {useIsFocused, useTheme} from './Navigation';
 import RNGalleryList, {RNGalleryCategories} from './RNGalleryList';
 import {ScreenWrapper} from './components/ScreenWrapper';

src/HomePage.tsx

@@ -7,7 +7,7 @@ import {
   Image,
   PlatformColor,
 } from 'react-native';
-import React from 'react';
+import * as React from 'react';
 import {useTheme, useIsFocused} from './Navigation';
 import RNGalleryList from './RNGalleryList';
 import {ScreenWrapper} from './components/ScreenWrapper';

src/Navigation.tsx

@@ -1,4 +1,5 @@
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
+import * as React from 'react';
 import {
   Animated,
   Easing,

src/RNGalleryList.ts

@@ -1,5 +1,5 @@
 'use strict';
-import React from 'react';
+import * as React from 'react';
 import type {ImageSourcePropType} from 'react-native';
 import {HomePage} from './HomePage';
 import {SettingsPage} from './SettingsPage';

src/SettingsPage.tsx

@@ -1,6 +1,6 @@
 'use strict';
 import {StyleSheet, Text, View, ScrollView} from 'react-native';
-import React from 'react';
+import * as React from 'react';
 //import {ThemeMode, RawThemeContext, ThemeSetterContext} from './themes/Theme';
 //import {Picker} from '@react-native-picker/picker';
 // import {

src/components/AccessibilityNavigationHelper.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 
 interface AccessibilitySkipLinkProps {

src/components/BackButton.tsx

@@ -1,5 +1,5 @@
 'use strict';
-import React from 'react';
+import * as React from 'react';
 import {
   StyleSheet,
   Text,
@@ -48,7 +48,7 @@ export function BackButton() {
       setWindowWidth(window.width);
     });
     return () => subscription?.remove();
-  }, []);
+  }, [setWindowWidth]);
 
   const styles = createStyles(windowWidth);
 

src/components/Badge.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {StyleSheet, View, Text, OpaqueColorValue} from 'react-native';
 // import {SymbolIcon} from 'react-native-xaml';
 

src/components/Code.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import low from 'lowlight';
-import React from 'react';
+import * as React from 'react';
 import {PlatformColor, StyleSheet, Text, View} from 'react-native';
 import {ThemeContext} from '../themes/Theme';
 

src/components/CommunityModuleBadge.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {useTheme} from '../Navigation';
 import {Badge} from './Badge';
 import {Platform, PlatformColor} from 'react-native';

src/components/ControlItem.tsx

@@ -7,7 +7,7 @@ import {
   Pressable,
   Image,
 } from 'react-native';
-import React from 'react';
+import * as React from 'react';
 import type {IRNGalleryExample} from '../RNGalleryList';
 //import {useTheme} from '@react-navigation/native';
 

src/components/Controls.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {Linking, Pressable, Text, useColorScheme} from 'react-native';
 
 type HyperlinkProps = {

src/components/CopyToClipboard.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {
   AccessibilityInfo,
   Pressable,

src/components/CoreComponentBadge.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {useTheme} from '../Navigation';
 import {Badge} from './Badge';
 import {Platform, PlatformColor} from 'react-native';

src/components/Example.tsx

@@ -1,4 +1,5 @@
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
+import * as React from 'react';
 import {Code} from './Code';
 import {StyleSheet, PlatformColor, Text, View, Dimensions} from 'react-native';
 import {CopyToClipboardButton} from './CopyToClipboard';

src/components/LinkContainer.tsx

@@ -1,5 +1,5 @@
 import {StyleSheet, View} from 'react-native';
-import React from 'react';
+import * as React from 'react';
 import {LinkTile} from './LinkTile';
 
 const styles = StyleSheet.create({

src/components/LinkTile.tsx

@@ -1,5 +1,5 @@
 import {PlatformColor, StyleSheet, Text, View} from 'react-native';
-import React from 'react';
+import * as React from 'react';
 import {useTheme} from '../Navigation';
 // import {HyperlinkButton} from 'react-native-xaml';
 import { Hyperlink } from './Controls';

src/components/NativeControlBadge.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {useTheme} from '../Navigation';
 import {Badge} from './Badge';
 import {Platform, PlatformColor} from 'react-native';

src/components/Page.tsx

@@ -1,4 +1,5 @@
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
+import * as React from 'react';
 import {PlatformColor, ScrollView, StyleSheet, Text, View, Dimensions} from 'react-native';
 import {NativeControlBadge} from './NativeControlBadge';
 import {CoreComponentBadge} from './CoreComponentBadge';

src/components/PageScroller.tsx

@@ -1,4 +1,5 @@
-import React, {useState} from 'react';
+import {useState} from 'react';
+import * as React from 'react';
 import {
   FlatList,
   FlatListProps,

src/components/ScreenWrapper.tsx

@@ -1,4 +1,5 @@
-import React, {useState, useEffect, useRef} from 'react';
+import {useState, useEffect, useRef} from 'react';
+import * as React from 'react';
 import {
   Animated,
   View,

src/components/TileGallery.tsx

@@ -10,7 +10,7 @@ import {
   useColorScheme,
   Animated,
 } from 'react-native';
-import React from 'react';
+import * as React from 'react';
 import type {PropsWithChildren} from 'react';
 //import {PathIcon, FontIcon} from 'react-native-xaml';
 import {HorizontalListWithPageNavigation} from './PageScroller';

src/examples/ButtonExamplePage.tsx

@@ -1,6 +1,7 @@
 'use strict';
 import {Button, View, Text, AccessibilityInfo, Dimensions} from 'react-native';
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
+import * as React from 'react';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';
 import {usePageFocusManagement} from '../hooks/usePageFocusManagement';

src/examples/CheckBoxExamplePage.tsx

@@ -1,5 +1,5 @@
 'use strict';
-import React from 'react';
+import * as React from 'react';
 import CheckBox from '@react-native-community/checkbox';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';

src/examples/ClipboardExamplePage.tsx

@@ -1,5 +1,6 @@
 'use strict';
-import React, {useState} from 'react';
+import {useState} from 'react';
+import * as React from 'react';
 import {AccessibilityInfo, Button, Text, TextInput, View} from 'react-native';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';

src/examples/ConfigExamplePage.tsx

@@ -1,6 +1,6 @@
 'use strict';
 import {Text} from 'react-native';
-import React from 'react';
+import * as React from 'react';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';
 import Config from 'react-native-config';

src/examples/DatePickerExamplePage.tsx

@@ -1,5 +1,6 @@
 'use strict';
-import React, {useState} from 'react';
+import {useState} from 'react';
+import * as React from 'react';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';

src/examples/DeviceInfoExamplePage.tsx

@@ -1,6 +1,7 @@
 'use strict';
 import {Text} from 'react-native';
-import React, {useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
+import * as React from 'react';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';
 import DeviceInfo, {

src/examples/ExpanderExamplePage.tsx

@@ -1,6 +1,7 @@
 'use strict';
 import {Text, View} from 'react-native';
-import React, {useState} from 'react';
+import {useState} from 'react';
+import * as React from 'react';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';
 import {useTheme} from '../Navigation';

src/examples/FlatListExamplePage.tsx

@@ -1,6 +1,6 @@
 'use strict';
 import {Text, FlatList, View, Pressable} from 'react-native';
-import React from 'react';
+import * as React from 'react';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';
 import {useTheme} from '../Navigation';

src/examples/FlyoutExamplePage.tsx

@@ -6,7 +6,8 @@ import {
   Platform,
   PlatformColor,
 } from 'react-native';
-import React, {useState, useRef} from 'react';
+import {useState, useRef} from 'react';
+import * as React from 'react';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';
 import {Flyout} from 'react-native-windows';

src/examples/ImageExamplePage.tsx

@@ -1,6 +1,6 @@
 'use strict';
 import {Image} from 'react-native';
-import React from 'react';
+import * as React from 'react';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';
 import {useTheme} from '../Navigation';

src/examples/LinearGradientExamplePage.tsx

@@ -1,5 +1,5 @@
 'use strict';
-import React from 'react';
+import * as React from 'react';
 import {Text} from 'react-native';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';

src/examples/LottieAnimationsExamplePage.tsx

@@ -1,5 +1,6 @@
 'use strict';
-import React, {useState, useEffect, useRef, useCallback} from 'react';
+import {useState, useEffect, useRef, useCallback} from 'react';
+import * as React from 'react';
 import {Button, Platform, View} from 'react-native';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';

src/examples/ModalExamplePage.tsx

@@ -1,7 +1,7 @@
 'use strict';
 import {Button, View, Text, StyleSheet, Dimensions, PlatformColor, AccessibilityInfo} from 'react-native';
 import {Modal} from 'react-native-windows'
-import React from 'react';
+import * as React from 'react';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';
 import {usePageFocusManagement} from '../hooks/usePageFocusManagement';

src/examples/NetworkExamplePage.tsx

@@ -1,6 +1,7 @@
 'use strict';
 import {ActivityIndicator, Button, Text, TextInput, View} from 'react-native';
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
+import * as React from 'react';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';
 

src/examples/PermissionsExamplePage.tsx

@@ -1,6 +1,7 @@
 'use strict';
 import {Button, Text, View} from 'react-native';
-import React, {useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
+import * as React from 'react';
 import {Example} from '../components/Example';
 import {Page} from '../components/Page';
 import {