├── .buckconfig ├── .env ├── .eslintrc.js ├── .gitattributes ├── .github ├── policies │ └── resourceManagement.yml └── pull_request_template.md ├── .gitignore ├── .prettierrc.js ├── .vscode ├── extensions.json └── settings.json ├── .watchmanconfig ├── .yarn └── releases │ └── yarn-4.1.1.cjs ├── .yarnrc.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── Directory.Build.props ├── LICENSE ├── MSBuild.exe ├── NewArch ├── .bundle │ └── config ├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── Gemfile ├── NuGet.config ├── README.md ├── __tests__ │ └── App.test.tsx ├── android │ ├── app │ │ ├── build.gradle │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ └── AndroidManifest.xml │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── newarch │ │ │ │ ├── MainActivity.kt │ │ │ │ └── MainApplication.kt │ │ │ └── res │ │ │ ├── drawable │ │ │ └── rn_edit_text_material.xml │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── assets │ ├── ControlImages │ │ ├── AnimatedVisualPlayer.png │ │ ├── Button.png │ │ ├── Canvas.png │ │ ├── Checkbox.png │ │ ├── Clipboard.png │ │ ├── ComboBox.png │ │ ├── DatePicker.png │ │ ├── Expander.png │ │ ├── Flyout.png │ │ ├── Image.png │ │ ├── ListView.png │ │ ├── Placeholder.png │ │ ├── ProgressBar.png │ │ ├── RadioButtons.png │ │ ├── ScrollView.png │ │ ├── Slider.png │ │ ├── Sound.png │ │ ├── TextBlock.png │ │ ├── TextBox.png │ │ ├── TimePicker.png │ │ ├── ToggleSwitch.png │ │ └── WebView.png │ ├── GalleryHeaderImage.png │ ├── GallerySnapshot.png │ └── HomeHeaderTiles │ │ ├── Header-Store.dark.png │ │ ├── Header-Store.light.png │ │ ├── Header-WinUIGallery.png │ │ ├── Header-WindowsDesign.png │ │ ├── github-mark.png │ │ └── tiny_logo.png ├── babel.config.js ├── index.js ├── ios │ ├── .xcode.env │ ├── NewArch.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── NewArch.xcscheme │ ├── NewArch │ │ ├── AppDelegate.swift │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── PrivacyInfo.xcprivacy │ └── Podfile ├── jest.config.js ├── jest.config.windows.js ├── metro.config.js ├── package-lock.json ├── package.json ├── src │ ├── App.tsx │ ├── AppContext.js │ ├── ComponentListPage.tsx │ ├── HomePage.tsx │ ├── Navigation.tsx │ ├── RNGalleryList.ts │ ├── SettingsPage.tsx │ ├── assets │ │ ├── animations │ │ │ ├── Loading-Atom-Colored.json │ │ │ ├── Loading-Atom.json │ │ │ └── LottieLogo.json │ │ ├── monitor_icon.png │ │ └── tiny_logo.png │ ├── components │ │ ├── Badge.tsx │ │ ├── Code.tsx │ │ ├── CommunityModuleBadge.tsx │ │ ├── ControlItem.tsx │ │ ├── Controls.tsx │ │ ├── CopyToClipboard.tsx │ │ ├── CoreComponentBadge.tsx │ │ ├── Example.tsx │ │ ├── LinkContainer.tsx │ │ ├── LinkTile.tsx │ │ ├── NativeControlBadge.tsx │ │ ├── Page.tsx │ │ ├── PageScroller.tsx │ │ ├── ScreenWrapper.tsx │ │ └── TileGallery.tsx │ ├── examples │ │ ├── ButtonExamplePage.tsx │ │ ├── CheckBoxExamplePage.tsx │ │ ├── ClipboardExamplePage.tsx │ │ ├── ConfigExamplePage.tsx │ │ ├── DatePickerExamplePage.tsx │ │ ├── DeviceInfoExamplePage.tsx │ │ ├── ExpanderExamplePage.tsx │ │ ├── FlatListExamplePage.tsx │ │ ├── FlyoutExamplePage.tsx │ │ ├── ImageExamplePage.tsx │ │ ├── LinearGradientExamplePage.tsx │ │ ├── LottieAnimationsExamplePage.tsx │ │ ├── ModalExamplePage.tsx │ │ ├── NetworkExamplePage.tsx │ │ ├── PermissionsExamplePage.tsx │ │ ├── PickerExamplePage.tsx │ │ ├── PopupExamplePage.tsx │ │ ├── PressableExamplePage.tsx │ │ ├── PrintExamplePage.tsx │ │ ├── ProgressViewExamplePage.tsx │ │ ├── ScrollViewExample.tsx │ │ ├── SensitiveInfoExamplePage.tsx │ │ ├── SketchExamplePage.tsx │ │ ├── SliderExamplePage.tsx │ │ ├── SvgExamplePage.tsx │ │ ├── SwitchExamplePage.tsx │ │ ├── TTSExamplePage.tsx │ │ ├── TemplateExamplePage.tsx │ │ ├── TextExamplePage.tsx │ │ ├── TextInputExamplePage.tsx │ │ ├── TimePickerExamplePage.tsx │ │ ├── TouchableHighlightExamplePage.tsx │ │ ├── TouchableOpacityExamplePage.tsx │ │ ├── TouchableWithoutFeedbackExamplePage.tsx │ │ ├── TrackPlayerExamplePage.tsx │ │ ├── ViewExamplePage.tsx │ │ ├── VirtualizedListExamplePage.tsx │ │ ├── WebViewExamplePage.tsx │ │ ├── WindowsHelloExamplePage.tsx │ │ └── XamlExamplePage.tsx │ ├── hooks │ │ ├── useHighContrastState.macos.ts │ │ ├── useHighContrastState.ts │ │ └── useHighContrastState.windows.ts │ └── themes │ │ ├── DarkTheme.tsx │ │ ├── HighContrastTheme.tsx │ │ ├── LightTheme.tsx │ │ └── Theme.ts ├── tsconfig.json ├── windows │ ├── .gitignore │ ├── ExperimentalFeatures.props │ ├── NewArch.Package │ │ ├── Images │ │ │ ├── LargeTile.scale-100.png │ │ │ ├── LargeTile.scale-125.png │ │ │ ├── LargeTile.scale-150.png │ │ │ ├── LargeTile.scale-200.png │ │ │ ├── LargeTile.scale-400.png │ │ │ ├── LockScreenLogo.scale-200.png │ │ │ ├── SplashScreen.scale-100.png │ │ │ ├── SplashScreen.scale-125.png │ │ │ ├── SplashScreen.scale-150.png │ │ │ ├── SplashScreen.scale-200.png │ │ │ ├── SplashScreen.scale-400.png │ │ │ ├── Square150x150Logo.scale-100.png │ │ │ ├── Square150x150Logo.scale-125.png │ │ │ ├── Square150x150Logo.scale-150.png │ │ │ ├── Square150x150Logo.scale-200.png │ │ │ ├── Square150x150Logo.scale-400.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-16.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-24.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-256.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-32.png │ │ │ ├── Square44x44Logo.altform-lightunplated_targetsize-48.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-16.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-256.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-32.png │ │ │ ├── Square44x44Logo.altform-unplated_targetsize-48.png │ │ │ ├── Square44x44Logo.scale-100.png │ │ │ ├── Square44x44Logo.scale-125.png │ │ │ ├── Square44x44Logo.scale-150.png │ │ │ ├── Square44x44Logo.scale-200.png │ │ │ ├── Square44x44Logo.scale-400.png │ │ │ ├── Square44x44Logo.targetsize-16.png │ │ │ ├── Square44x44Logo.targetsize-24.png │ │ │ ├── Square44x44Logo.targetsize-24_altform-unplated.png │ │ │ ├── Square44x44Logo.targetsize-256.png │ │ │ ├── Square44x44Logo.targetsize-32.png │ │ │ ├── Square44x44Logo.targetsize-48.png │ │ │ ├── StoreLogo.png │ │ │ ├── StoreLogo.scale-100.png │ │ │ ├── StoreLogo.scale-125.png │ │ │ ├── StoreLogo.scale-150.png │ │ │ ├── StoreLogo.scale-200.png │ │ │ ├── StoreLogo.scale-400.png │ │ │ ├── Wide310x150Logo.scale-100.png │ │ │ ├── Wide310x150Logo.scale-125.png │ │ │ ├── Wide310x150Logo.scale-150.png │ │ │ ├── Wide310x150Logo.scale-200.png │ │ │ ├── Wide310x150Logo.scale-400.png │ │ │ └── logo.png │ │ ├── NewArch.Package.wapproj │ │ ├── Package.appxmanifest │ │ └── packages.lock.json │ ├── NewArch.sln │ ├── NewArch │ │ ├── .gitignore │ │ ├── AutolinkedNativeModules.g.cpp │ │ ├── AutolinkedNativeModules.g.h │ │ ├── AutolinkedNativeModules.g.props │ │ ├── AutolinkedNativeModules.g.targets │ │ ├── NewArch.cpp │ │ ├── NewArch.h │ │ ├── NewArch.ico │ │ ├── NewArch.rc │ │ ├── NewArch.vcxproj │ │ ├── NewArch.vcxproj.filters │ │ ├── packages.lock.json │ │ ├── pch.cpp │ │ ├── pch.h │ │ ├── resource.h │ │ ├── small.ico │ │ └── targetver.h │ └── packages │ │ └── Microsoft.Windows.CppWinRT.2.0.200316.3 │ │ └── readme.txt └── yarn.lock ├── README.md ├── SECURITY.md ├── __tests__ ├── App-test.js └── __snapshots__ │ └── App-test.js.snap ├── android ├── app │ ├── _BUCK │ ├── build.gradle │ ├── build_defs.bzl │ ├── debug.keystore │ ├── proguard-rules.pro │ └── src │ │ ├── debug │ │ ├── AndroidManifest.xml │ │ └── java │ │ │ └── com │ │ │ └── rngallery │ │ │ └── ReactNativeFlipper.java │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── java │ │ └── com │ │ │ └── rngallery │ │ │ ├── MainActivity.java │ │ │ └── MainApplication.java │ │ └── res │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ └── values │ │ ├── strings.xml │ │ └── styles.xml ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle ├── app.json ├── assets ├── ControlImages │ ├── AnimatedVisualPlayer.png │ ├── Button.png │ ├── Canvas.png │ ├── Checkbox.png │ ├── Clipboard.png │ ├── ComboBox.png │ ├── DatePicker.png │ ├── Expander.png │ ├── Flyout.png │ ├── Image.png │ ├── ListView.png │ ├── Placeholder.png │ ├── ProgressBar.png │ ├── RadioButtons.png │ ├── ScrollView.png │ ├── Slider.png │ ├── Sound.png │ ├── TextBlock.png │ ├── TextBox.png │ ├── TimePicker.png │ ├── ToggleSwitch.png │ └── WebView.png ├── GalleryHeaderImage.png ├── GallerySnapshot.png └── HomeHeaderTiles │ ├── Header-Store.dark.png │ ├── Header-Store.light.png │ ├── Header-WinUIGallery.png │ ├── Header-WindowsDesign.png │ └── tiny_logo.png ├── azure-pipelines.yml ├── babel.config.js ├── ci.yml ├── index.ts ├── ios ├── Podfile ├── rngallery-tvOS │ └── Info.plist ├── rngallery-tvOSTests │ └── Info.plist ├── rngallery.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ ├── rngallery-tvOS.xcscheme │ │ └── rngallery.xcscheme ├── rngallery │ ├── AppDelegate.h │ ├── AppDelegate.m │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ └── Contents.json │ │ └── Contents.json │ ├── Info.plist │ ├── LaunchScreen.storyboard │ └── main.m └── rngalleryTests │ ├── Info.plist │ └── rngalleryTests.m ├── jest-setup.js ├── metro.config.js ├── package.json ├── patches ├── @react-native-community+checkbox+0.5.16.patch ├── @react-native-community+datetimepicker+7.6.0.patch ├── @react-native-community+progress-view+1.5.0.patch ├── @react-native-community+slider+4.4.2.patch ├── @react-native-picker+picker+2.4.10.patch ├── @wwimmo+react-native-sketch-canvas+0.8.5.patch ├── lottie-react-native+5.1.6.patch ├── react-native-config+1.5.2.patch ├── react-native-linear-gradient+3.0.0-alpha.1.patch ├── react-native-permissions+3.8.1.patch ├── react-native-print+0.8.0.patch ├── react-native-sensitive-info+6.0.0-alpha.9.patch ├── react-native-svg+15.3.0.patch ├── react-native-track-player+1.2.5.patch └── react-native-tts+4.0.0.patch ├── scripts └── use-upgrade-version.js ├── src ├── App.tsx ├── ComponentListPage.tsx ├── HomePage.tsx ├── RNGalleryList.ts ├── SettingsPage.tsx ├── assets │ ├── animations │ │ ├── Loading-Atom-Colored.json │ │ ├── Loading-Atom.json │ │ └── LottieLogo.json │ ├── monitor_icon.png │ └── tiny_logo.png ├── components │ ├── Badge.tsx │ ├── Code.tsx │ ├── CommunityModuleBadge.tsx │ ├── ControlItem.tsx │ ├── CopyToClipboard.tsx │ ├── CoreComponentBadge.tsx │ ├── Example.tsx │ ├── LinkContainer.tsx │ ├── LinkTile.tsx │ ├── NativeControlBadge.tsx │ ├── Page.tsx │ ├── PageScroller.tsx │ ├── ScreenWrapper.tsx │ └── TileGallery.tsx ├── examples │ ├── ButtonExamplePage.tsx │ ├── CheckBoxExamplePage.tsx │ ├── ClipboardExamplePage.tsx │ ├── ConfigExamplePage.tsx │ ├── DatePickerExamplePage.tsx │ ├── DeviceInfoExamplePage.tsx │ ├── ExpanderExamplePage.tsx │ ├── FlatListExamplePage.tsx │ ├── FlyoutExamplePage.tsx │ ├── ImageExamplePage.tsx │ ├── LinearGradientExamplePage.tsx │ ├── LottieAnimationsExamplePage.tsx │ ├── NetworkExamplePage.tsx │ ├── PermissionsExamplePage.tsx │ ├── PickerExamplePage.tsx │ ├── PopupExamplePage.tsx │ ├── PressableExamplePage.tsx │ ├── PrintExamplePage.tsx │ ├── ProgressViewExamplePage.tsx │ ├── ScrollViewExample.tsx │ ├── SensitiveInfoExamplePage.tsx │ ├── SketchExamplePage.tsx │ ├── SliderExamplePage.tsx │ ├── SvgExamplePage.tsx │ ├── SwitchExamplePage.tsx │ ├── TTSExamplePage.tsx │ ├── TemplateExamplePage.tsx │ ├── TextExamplePage.tsx │ ├── TextInputExamplePage.tsx │ ├── TimePickerExamplePage.tsx │ ├── TouchableHighlightExamplePage.tsx │ ├── TouchableOpacityExamplePage.tsx │ ├── TouchableWithoutFeedbackExamplePage.tsx │ ├── TrackPlayerExamplePage.tsx │ ├── ViewExamplePage.tsx │ ├── VirtualizedListExamplePage.tsx │ ├── WebViewExamplePage.tsx │ ├── WindowsHelloExamplePage.tsx │ └── XamlExamplePage.tsx ├── hooks │ ├── useHighContrastState.macos.ts │ ├── useHighContrastState.ts │ └── useHighContrastState.windows.ts └── themes │ ├── DarkTheme.tsx │ ├── HighContrastTheme.tsx │ ├── LightTheme.tsx │ └── Theme.ts ├── tsconfig.json ├── windows ├── .gitignore ├── ExperimentalFeatures.props ├── NuGet.Config ├── rngallery.sln └── rngallery │ ├── .gitignore │ ├── App.cpp │ ├── App.h │ ├── App.idl │ ├── App.xaml │ ├── Assets │ ├── Animations │ │ ├── Loading-Atom-Colored.json │ │ ├── Loading-Atom.json │ │ └── LottieLogo.json │ ├── LargeTile.scale-100.png │ ├── LargeTile.scale-125.png │ ├── LargeTile.scale-150.png │ ├── LargeTile.scale-200.png │ ├── LargeTile.scale-400.png │ ├── LockScreenLogo.scale-200.png │ ├── SmallTile.scale-100.png │ ├── SmallTile.scale-125.png │ ├── SmallTile.scale-150.png │ ├── SmallTile.scale-200.png │ ├── SmallTile.scale-400.png │ ├── SplashScreen.scale-100.png │ ├── SplashScreen.scale-125.png │ ├── SplashScreen.scale-150.png │ ├── SplashScreen.scale-200.png │ ├── SplashScreen.scale-400.png │ ├── Square150x150Logo.scale-100.png │ ├── Square150x150Logo.scale-125.png │ ├── Square150x150Logo.scale-150.png │ ├── Square150x150Logo.scale-200.png │ ├── Square150x150Logo.scale-400.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-16.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-24.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-256.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-32.png │ ├── Square44x44Logo.altform-lightunplated_targetsize-48.png │ ├── Square44x44Logo.altform-unplated_targetsize-16.png │ ├── Square44x44Logo.altform-unplated_targetsize-256.png │ ├── Square44x44Logo.altform-unplated_targetsize-32.png │ ├── Square44x44Logo.altform-unplated_targetsize-48.png │ ├── Square44x44Logo.scale-100.png │ ├── Square44x44Logo.scale-125.png │ ├── Square44x44Logo.scale-150.png │ ├── Square44x44Logo.scale-200.png │ ├── Square44x44Logo.scale-400.png │ ├── Square44x44Logo.targetsize-16.png │ ├── Square44x44Logo.targetsize-24.png │ ├── Square44x44Logo.targetsize-24_altform-unplated.png │ ├── Square44x44Logo.targetsize-256.png │ ├── Square44x44Logo.targetsize-32.png │ ├── Square44x44Logo.targetsize-48.png │ ├── StoreLogo.backup.png │ ├── StoreLogo.png │ ├── StoreLogo.scale-100.png │ ├── StoreLogo.scale-125.png │ ├── StoreLogo.scale-150.png │ ├── StoreLogo.scale-200.png │ ├── StoreLogo.scale-400.png │ ├── Wide310x150Logo.scale-100.png │ ├── Wide310x150Logo.scale-125.png │ ├── Wide310x150Logo.scale-150.png │ ├── Wide310x150Logo.scale-200.png │ ├── Wide310x150Logo.scale-400.png │ └── logo.png │ ├── AutolinkedNativeModules.g.cpp │ ├── AutolinkedNativeModules.g.h │ ├── AutolinkedNativeModules.g.props │ ├── AutolinkedNativeModules.g.targets │ ├── MainPage.cpp │ ├── MainPage.h │ ├── MainPage.idl │ ├── MainPage.xaml │ ├── Package.appxmanifest │ ├── PropertySheet.props │ ├── ReactPackageProvider.cpp │ ├── ReactPackageProvider.h │ ├── packages.config │ ├── packages.lock.json │ ├── pch.cpp │ ├── pch.h │ ├── rngallery.vcxproj │ └── rngallery.vcxproj.filters └── yarn.lock /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | SERVICE_URL=https://example.com 2 | SERVICE_PORT=8080 3 | SERVICE_API_KEY=74970b3d-0bfb-4611-ba1d-dff7209ecc39 4 | 5 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native', 4 | rules: { 5 | 'react-native/no-inline-styles': 'off', 6 | '@typescript-eslint/no-unused-vars': 'warn', 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | 3 | * text=auto 4 | 5 | # C++ files should use CRLF. 6 | *.c text eol=crlf 7 | *.cpp text eol=crlf 8 | *.h text eol=crlf 9 | *.hpp text eol=crlf 10 | 11 | # Spec Codegen uses LF 12 | *Spec.g.h eol=lf 13 | 14 | # Force Visual Studio project files (mostly XML) to CRLF 15 | # This helps avoid conflict which occurs when Xmarian/Mac contributors with AutoCRLF=input (or off) 16 | # check in these files as CRLFs, and then Windows contributors with AutoCRLF=true end up checking then 17 | # files in as LFs (due to AutoCRLF=true normalizing CRLF->LF on check-in). 18 | 19 | *.sln text eol=crlf 20 | *.csproj text eol=crlf 21 | *.vbproj text eol=crlf 22 | *.fsproj text eol=crlf 23 | *.pyproj text eol=crlf 24 | *.dbproj text eol=crlf 25 | *.vcxproj text eol=crlf 26 | *.shproj text eol=crlf 27 | *.projitems text eol=crlf 28 | *.vcxitems text eol=crlf 29 | *.props text eol=crlf 30 | *.filters text eol=crlf 31 | 32 | *.js text eol=lf 33 | *.jsx text eol=lf 34 | *.ts text eol=lf 35 | *.tsx text eol=lf 36 | *.ps1 text eol=lf 37 | *.yml text eol=lf 38 | *.patch text eol=lf 39 | .editorconfig text eol=lf 40 | .gitattributes text eol=lf 41 | package.json text eol=lf 42 | 43 | *.pbxproj -text 44 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | ### Why 4 | 5 | What is the motivation for this change? Add a few sentences describing the context and overall goals of the pull request's commits. 6 | 7 | Resolves [Add Relevant Issue Here] 8 | 9 | ### What 10 | 11 | What changes were made to the codebase to solve the bug, add the functionality, etc. that you specified above. 12 | 13 | ## Screenshots 14 | 15 | Add any relevant screen captures here from before or after your changes. 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | # Windows 24 | # 25 | *.binlog 26 | # Android/IntelliJ 27 | # 28 | build/ 29 | .idea 30 | .gradle 31 | local.properties 32 | *.iml 33 | 34 | # node.js 35 | # 36 | node_modules/ 37 | npm-debug.log 38 | yarn-error.log 39 | 40 | # BUCK 41 | buck-out/ 42 | \.buckd/ 43 | *.keystore 44 | !debug.keystore 45 | 46 | # fastlane 47 | # 48 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 49 | # screenshots whenever they are needed. 50 | # For more information about the recommended setup visit: 51 | # https://docs.fastlane.tools/best-practices/source-control/ 52 | 53 | */fastlane/report.xml 54 | */fastlane/Preview.html 55 | */fastlane/screenshots 56 | 57 | # Bundle artifact 58 | *.jsbundle 59 | tsconfig.tsbuildinfo 60 | 61 | # CocoaPods 62 | /ios/Pods/ 63 | 64 | # generated by bob 65 | lib/ 66 | 67 | # Generated by lottie 68 | /*/*/Generated Files/* 69 | 70 | # Yarn 71 | .yarn/install-state.gz 72 | 73 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | }; 7 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "esbenp.prettier-vscode", 4 | "dbaeumer.vscode-eslint", 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "editor.formatOnSave": true, 4 | "eslint.format.enable": true, 5 | "eslint.packageManager": "yarn", 6 | "eslint.enable": true, 7 | "eslint.validate": [ 8 | "javascript", 9 | "javascriptreact", 10 | "typescript", 11 | "typescriptreact" 12 | ], 13 | "eslint.options": { 14 | "configFile": ".eslintrc.js" 15 | }, 16 | "[json]": { 17 | "editor.defaultFormatter": "dbaeumer.vscode-eslint" 18 | }, 19 | "[jsonc]": { 20 | "editor.defaultFormatter": "dbaeumer.vscode-eslint" 21 | }, 22 | "[typescript]": { 23 | "editor.defaultFormatter": "dbaeumer.vscode-eslint" 24 | }, 25 | "[typescriptreact]": { 26 | "editor.defaultFormatter": "dbaeumer.vscode-eslint" 27 | }, 28 | "[javascript]": { 29 | "editor.defaultFormatter": "dbaeumer.vscode-eslint" 30 | }, 31 | // These should run through eslint 32 | "prettier.disableLanguages": [ 33 | "javascript", 34 | "javascriptreact", 35 | "typescript", 36 | "typescriptreact" 37 | ], 38 | "editor.codeActionsOnSave": { 39 | "source.fixAll.eslint": true 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | 3 | yarnPath: .yarn/releases/yarn-4.1.1.cjs 4 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Microsoft Open Source Code of Conduct 2 | 3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). 4 | 5 | Resources: 6 | 7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) 8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) 9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns 10 | -------------------------------------------------------------------------------- /Directory.Build.props: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | false 5 | 6 | 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Microsoft Corporation. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE 22 | -------------------------------------------------------------------------------- /MSBuild.exe: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/MSBuild.exe -------------------------------------------------------------------------------- /NewArch/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /NewArch/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native', 4 | }; 5 | -------------------------------------------------------------------------------- /NewArch/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | **/.xcode.env.local 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | *.hprof 33 | .cxx/ 34 | *.keystore 35 | !debug.keystore 36 | 37 | # node.js 38 | # 39 | node_modules/ 40 | npm-debug.log 41 | yarn-error.log 42 | 43 | # fastlane 44 | # 45 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 46 | # screenshots whenever they are needed. 47 | # For more information about the recommended setup visit: 48 | # https://docs.fastlane.tools/best-practices/source-control/ 49 | 50 | **/fastlane/report.xml 51 | **/fastlane/Preview.html 52 | **/fastlane/screenshots 53 | **/fastlane/test_output 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | 58 | # Ruby / CocoaPods 59 | **/Pods/ 60 | /vendor/bundle/ 61 | 62 | # Temporary files created by Metro to check the health of the file watcher 63 | .metro-health-check* 64 | 65 | # testing 66 | /coverage 67 | 68 | # Yarn 69 | .yarn/* 70 | !.yarn/patches 71 | !.yarn/plugins 72 | !.yarn/releases 73 | !.yarn/sdks 74 | !.yarn/versions 75 | -------------------------------------------------------------------------------- /NewArch/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: false, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /NewArch/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /NewArch/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby ">= 2.6.10" 5 | 6 | # Exclude problematic versions of cocoapods and activesupport that causes build failures. 7 | gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1' 8 | gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0' 9 | gem 'xcodeproj', '< 1.26.0' 10 | gem 'concurrent-ruby', '< 1.3.4' 11 | -------------------------------------------------------------------------------- /NewArch/NuGet.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /NewArch/README.md: -------------------------------------------------------------------------------- 1 | # React Native Gallery - New Architecture 2 | 3 | Welcome to React Native Gallery. A React Native Windows application which displays the range of React Native components with Windows support. This app is hosted on the New Architecture, and as such has fewer available example pages than the regular React Native Gallery. 4 | 5 | ![gallery_welcome](./assets/GallerySnapshot.png) 6 | 7 | # Building React Native Gallery 8 | 9 | If you wish to build React Native Gallery on New Architecture on your computer locally, follow the following steps: 10 | 11 | 1. Clone the repository. 12 | 2. In the `NewArch` directory of the repository on your device, run `yarn`. 13 | 3. In the same directory run `npx react-native run-windows --logging`. 14 | 15 | # Contributing 16 | 17 | This project welcomes contributions and suggestions. Most contributions require you to agree to a 18 | Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us 19 | the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com. 20 | 21 | When you submit a pull request, a CLA bot will automatically determine whether you need to provide 22 | a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions 23 | provided by the bot. You will only need to do this once across all repos using our CLA. 24 | 25 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). 26 | For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or 27 | contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. 28 | 29 | For addtional information about contributing to React Native Gallery visit [here](https://github.com/microsoft/react-native-gallery/wiki/Contributing-to-React-Native-Gallery). 30 | -------------------------------------------------------------------------------- /NewArch/__tests__/App.test.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import React from 'react'; 6 | import ReactTestRenderer from 'react-test-renderer'; 7 | import App from '../src/App'; 8 | 9 | test('renders correctly', async () => { 10 | await ReactTestRenderer.act(() => { 11 | ReactTestRenderer.create(); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /NewArch/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/android/app/debug.keystore -------------------------------------------------------------------------------- /NewArch/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /NewArch/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 9 | 10 | -------------------------------------------------------------------------------- /NewArch/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /NewArch/android/app/src/main/java/com/newarch/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.newarch 2 | 3 | import com.facebook.react.ReactActivity 4 | import com.facebook.react.ReactActivityDelegate 5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled 6 | import com.facebook.react.defaults.DefaultReactActivityDelegate 7 | 8 | class MainActivity : ReactActivity() { 9 | 10 | /** 11 | * Returns the name of the main component registered from JavaScript. This is used to schedule 12 | * rendering of the component. 13 | */ 14 | override fun getMainComponentName(): String = "NewArch" 15 | 16 | /** 17 | * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate] 18 | * which allows you to enable New Architecture with a single boolean flags [fabricEnabled] 19 | */ 20 | override fun createReactActivityDelegate(): ReactActivityDelegate = 21 | DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled) 22 | } 23 | -------------------------------------------------------------------------------- /NewArch/android/app/src/main/java/com/newarch/MainApplication.kt: -------------------------------------------------------------------------------- 1 | package com.newarch 2 | 3 | import android.app.Application 4 | import com.facebook.react.PackageList 5 | import com.facebook.react.ReactApplication 6 | import com.facebook.react.ReactHost 7 | import com.facebook.react.ReactNativeHost 8 | import com.facebook.react.ReactPackage 9 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load 10 | import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost 11 | import com.facebook.react.defaults.DefaultReactNativeHost 12 | import com.facebook.react.soloader.OpenSourceMergedSoMapping 13 | import com.facebook.soloader.SoLoader 14 | 15 | class MainApplication : Application(), ReactApplication { 16 | 17 | override val reactNativeHost: ReactNativeHost = 18 | object : DefaultReactNativeHost(this) { 19 | override fun getPackages(): List = 20 | PackageList(this).packages.apply { 21 | // Packages that cannot be autolinked yet can be added manually here, for example: 22 | // add(MyReactNativePackage()) 23 | } 24 | 25 | override fun getJSMainModuleName(): String = "index" 26 | 27 | override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG 28 | 29 | override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED 30 | override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED 31 | } 32 | 33 | override val reactHost: ReactHost 34 | get() = getDefaultReactHost(applicationContext, reactNativeHost) 35 | 36 | override fun onCreate() { 37 | super.onCreate() 38 | SoLoader.init(this, OpenSourceMergedSoMapping) 39 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 40 | // If you opted-in for the New Architecture, we load the native entry point for this app. 41 | load() 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /NewArch/android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 22 | 23 | 24 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /NewArch/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /NewArch/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /NewArch/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /NewArch/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /NewArch/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /NewArch/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /NewArch/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /NewArch/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /NewArch/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /NewArch/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /NewArch/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | NewArch 3 | 4 | -------------------------------------------------------------------------------- /NewArch/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /NewArch/android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext { 3 | buildToolsVersion = "35.0.0" 4 | minSdkVersion = 24 5 | compileSdkVersion = 35 6 | targetSdkVersion = 34 7 | ndkVersion = "27.1.12297006" 8 | kotlinVersion = "2.0.21" 9 | } 10 | repositories { 11 | google() 12 | mavenCentral() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle") 16 | classpath("com.facebook.react:react-native-gradle-plugin") 17 | classpath("org.jetbrains.kotlin:kotlin-gradle-plugin") 18 | } 19 | } 20 | 21 | apply plugin: "com.facebook.react.rootproject" 22 | -------------------------------------------------------------------------------- /NewArch/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | 25 | # Use this property to specify which architecture you want to build. 26 | # You can also override it from the CLI using 27 | # ./gradlew -PreactNativeArchitectures=x86_64 28 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 29 | 30 | # Use this property to enable support to the new architecture. 31 | # This will allow you to use TurboModules and the Fabric render in 32 | # your application. You should enable this flag either if you want 33 | # to write custom TurboModules/Fabric components OR use libraries that 34 | # are providing them. 35 | newArchEnabled=true 36 | 37 | # Use this property to enable or disable the Hermes JS engine. 38 | # If set to false, you will be using JSC instead. 39 | hermesEnabled=true 40 | -------------------------------------------------------------------------------- /NewArch/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /NewArch/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip 4 | networkTimeout=10000 5 | validateDistributionUrl=true 6 | zipStoreBase=GRADLE_USER_HOME 7 | zipStorePath=wrapper/dists 8 | -------------------------------------------------------------------------------- /NewArch/android/settings.gradle: -------------------------------------------------------------------------------- 1 | pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") } 2 | plugins { id("com.facebook.react.settings") } 3 | extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() } 4 | rootProject.name = 'NewArch' 5 | include ':app' 6 | includeBuild('../node_modules/@react-native/gradle-plugin') 7 | -------------------------------------------------------------------------------- /NewArch/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "NewArch", 3 | "displayName": "NewArch" 4 | } 5 | -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/AnimatedVisualPlayer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/AnimatedVisualPlayer.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/Button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/Button.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/Canvas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/Canvas.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/Checkbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/Checkbox.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/Clipboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/Clipboard.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/ComboBox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/ComboBox.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/DatePicker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/DatePicker.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/Expander.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/Expander.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/Flyout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/Flyout.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/Image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/Image.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/ListView.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/ListView.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/Placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/Placeholder.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/ProgressBar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/ProgressBar.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/RadioButtons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/RadioButtons.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/ScrollView.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/ScrollView.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/Slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/Slider.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/Sound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/Sound.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/TextBlock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/TextBlock.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/TextBox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/TextBox.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/TimePicker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/TimePicker.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/ToggleSwitch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/ToggleSwitch.png -------------------------------------------------------------------------------- /NewArch/assets/ControlImages/WebView.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/ControlImages/WebView.png -------------------------------------------------------------------------------- /NewArch/assets/GalleryHeaderImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/GalleryHeaderImage.png -------------------------------------------------------------------------------- /NewArch/assets/GallerySnapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/GallerySnapshot.png -------------------------------------------------------------------------------- /NewArch/assets/HomeHeaderTiles/Header-Store.dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/HomeHeaderTiles/Header-Store.dark.png -------------------------------------------------------------------------------- /NewArch/assets/HomeHeaderTiles/Header-Store.light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/HomeHeaderTiles/Header-Store.light.png -------------------------------------------------------------------------------- /NewArch/assets/HomeHeaderTiles/Header-WinUIGallery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/HomeHeaderTiles/Header-WinUIGallery.png -------------------------------------------------------------------------------- /NewArch/assets/HomeHeaderTiles/Header-WindowsDesign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/HomeHeaderTiles/Header-WindowsDesign.png -------------------------------------------------------------------------------- /NewArch/assets/HomeHeaderTiles/github-mark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/HomeHeaderTiles/github-mark.png -------------------------------------------------------------------------------- /NewArch/assets/HomeHeaderTiles/tiny_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/assets/HomeHeaderTiles/tiny_logo.png -------------------------------------------------------------------------------- /NewArch/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:@react-native/babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /NewArch/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './src/App'; 7 | import {name as appName} from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /NewArch/ios/.xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /NewArch/ios/NewArch/AppDelegate.swift: -------------------------------------------------------------------------------- 1 | import UIKit 2 | import React 3 | import React_RCTAppDelegate 4 | import ReactAppDependencyProvider 5 | 6 | @main 7 | class AppDelegate: RCTAppDelegate { 8 | override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool { 9 | self.moduleName = "NewArch" 10 | self.dependencyProvider = RCTAppDependencyProvider() 11 | 12 | // You can add your custom initial props in the dictionary below. 13 | // They will be passed down to the ViewController used by React Native. 14 | self.initialProps = [:] 15 | 16 | return super.application(application, didFinishLaunchingWithOptions: launchOptions) 17 | } 18 | 19 | override func sourceURL(for bridge: RCTBridge) -> URL? { 20 | self.bundleURL() 21 | } 22 | 23 | override func bundleURL() -> URL? { 24 | #if DEBUG 25 | RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index") 26 | #else 27 | Bundle.main.url(forResource: "main", withExtension: "jsbundle") 28 | #endif 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /NewArch/ios/NewArch/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "scale" : "2x", 6 | "size" : "20x20" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "scale" : "3x", 11 | "size" : "20x20" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "scale" : "2x", 16 | "size" : "29x29" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "scale" : "3x", 21 | "size" : "29x29" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "scale" : "2x", 26 | "size" : "40x40" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "scale" : "3x", 31 | "size" : "40x40" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "scale" : "2x", 36 | "size" : "60x60" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "scale" : "3x", 41 | "size" : "60x60" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "scale" : "1x", 46 | "size" : "1024x1024" 47 | } 48 | ], 49 | "info" : { 50 | "author" : "xcode", 51 | "version" : 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /NewArch/ios/NewArch/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /NewArch/ios/NewArch/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | NewArch 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | $(MARKETING_VERSION) 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | $(CURRENT_PROJECT_VERSION) 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | 30 | NSAllowsArbitraryLoads 31 | 32 | NSAllowsLocalNetworking 33 | 34 | 35 | NSLocationWhenInUseUsageDescription 36 | 37 | UILaunchStoryboardName 38 | LaunchScreen 39 | UIRequiredDeviceCapabilities 40 | 41 | arm64 42 | 43 | UISupportedInterfaceOrientations 44 | 45 | UIInterfaceOrientationPortrait 46 | UIInterfaceOrientationLandscapeLeft 47 | UIInterfaceOrientationLandscapeRight 48 | 49 | UIViewControllerBasedStatusBarAppearance 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /NewArch/ios/NewArch/PrivacyInfo.xcprivacy: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NSPrivacyAccessedAPITypes 6 | 7 | 8 | NSPrivacyAccessedAPIType 9 | NSPrivacyAccessedAPICategoryFileTimestamp 10 | NSPrivacyAccessedAPITypeReasons 11 | 12 | C617.1 13 | 14 | 15 | 16 | NSPrivacyAccessedAPIType 17 | NSPrivacyAccessedAPICategoryUserDefaults 18 | NSPrivacyAccessedAPITypeReasons 19 | 20 | CA92.1 21 | 22 | 23 | 24 | NSPrivacyAccessedAPIType 25 | NSPrivacyAccessedAPICategorySystemBootTime 26 | NSPrivacyAccessedAPITypeReasons 27 | 28 | 35F9.1 29 | 30 | 31 | 32 | NSPrivacyCollectedDataTypes 33 | 34 | NSPrivacyTracking 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /NewArch/ios/Podfile: -------------------------------------------------------------------------------- 1 | # Resolve react_native_pods.rb with node to allow for hoisting 2 | require Pod::Executable.execute_command('node', ['-p', 3 | 'require.resolve( 4 | "react-native/scripts/react_native_pods.rb", 5 | {paths: [process.argv[1]]}, 6 | )', __dir__]).strip 7 | 8 | platform :ios, min_ios_version_supported 9 | prepare_react_native_project! 10 | 11 | linkage = ENV['USE_FRAMEWORKS'] 12 | if linkage != nil 13 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 14 | use_frameworks! :linkage => linkage.to_sym 15 | end 16 | 17 | target 'NewArch' do 18 | config = use_native_modules! 19 | 20 | use_react_native!( 21 | :path => config[:reactNativePath], 22 | # An absolute path to your application root. 23 | :app_path => "#{Pod::Config.instance.installation_root}/.." 24 | ) 25 | 26 | post_install do |installer| 27 | # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 28 | react_native_post_install( 29 | installer, 30 | config[:reactNativePath], 31 | :mac_catalyst_enabled => false, 32 | # :ccache_enabled => true 33 | ) 34 | end 35 | end 36 | -------------------------------------------------------------------------------- /NewArch/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'react-native', 3 | }; 4 | -------------------------------------------------------------------------------- /NewArch/jest.config.windows.js: -------------------------------------------------------------------------------- 1 | const config = {}; 2 | 3 | module.exports = require('@rnx-kit/jest-preset')('windows', config); 4 | -------------------------------------------------------------------------------- /NewArch/metro.config.js: -------------------------------------------------------------------------------- 1 | const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | const exclusionList = require('metro-config/src/defaults/exclusionList'); 6 | 7 | const rnwPath = fs.realpathSync( 8 | path.resolve(require.resolve('react-native-windows/package.json'), '..'), 9 | ); 10 | 11 | // 12 | 13 | /** 14 | * Metro configuration 15 | * https://facebook.github.io/metro/docs/configuration 16 | * 17 | * @type {import('metro-config').MetroConfig} 18 | */ 19 | 20 | const config = { 21 | // 22 | resolver: { 23 | blockList: exclusionList([ 24 | // This stops "npx @react-native-community/cli run-windows" from causing the metro server to crash if its already running 25 | new RegExp( 26 | `${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`, 27 | ), 28 | // This prevents "npx @react-native-community/cli run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild 29 | new RegExp(`${rnwPath}/build/.*`), 30 | new RegExp(`${rnwPath}/target/.*`), 31 | /.*\.ProjectImports\.zip/, 32 | ]), 33 | // 34 | }, 35 | transformer: { 36 | getTransformOptions: async () => ({ 37 | transform: { 38 | experimentalImportSupport: false, 39 | inlineRequires: true, 40 | }, 41 | }), 42 | }, 43 | }; 44 | 45 | module.exports = mergeConfig(getDefaultConfig(__dirname), config); 46 | -------------------------------------------------------------------------------- /NewArch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "NewArch", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "lint": "eslint .", 9 | "start": "react-native start", 10 | "test": "jest", 11 | "windows": "npx @react-native-community/cli run-windows", 12 | "test:windows": "jest --config jest.config.windows.js" 13 | }, 14 | "dependencies": { 15 | "@react-native-clipboard/clipboard": "^1.16.1", 16 | "lowlight": "^1.17.0", 17 | "react": "18.3.1", 18 | "react-native": "^0.77.2", 19 | "react-native-windows": "^0.77.7" 20 | }, 21 | "devDependencies": { 22 | "@babel/core": "^7.25.2", 23 | "@babel/preset-env": "^7.25.3", 24 | "@babel/runtime": "^7.25.0", 25 | "@react-native-community/cli": "15.0.1", 26 | "@react-native-community/cli-platform-android": "15.0.1", 27 | "@react-native-community/cli-platform-ios": "15.0.1", 28 | "@react-native/babel-preset": "0.77.0", 29 | "@react-native/eslint-config": "0.77.0", 30 | "@react-native/metro-config": "0.77.0", 31 | "@react-native/typescript-config": "0.77.0", 32 | "@rnx-kit/jest-preset": "^0.1.17", 33 | "@types/jest": "^29.5.13", 34 | "@types/react": "^18.2.6", 35 | "@types/react-test-renderer": "^18.0.0", 36 | "eslint": "^8.19.0", 37 | "jest": "^29.6.3", 38 | "prettier": "2.8.8", 39 | "react-test-renderer": "18.3.1", 40 | "typescript": "5.0.4" 41 | }, 42 | "engines": { 43 | "node": ">=18" 44 | }, 45 | "react-native-windows": { 46 | "init-windows": { 47 | "name": "NewArch", 48 | "namespace": "NewArch", 49 | "template": "cpp-app" 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /NewArch/src/AppContext.js: -------------------------------------------------------------------------------- 1 | // AppContext.js 2 | import React from 'react'; 3 | const AppContext = React.createContext(); 4 | export default AppContext; 5 | -------------------------------------------------------------------------------- /NewArch/src/assets/monitor_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/src/assets/monitor_icon.png -------------------------------------------------------------------------------- /NewArch/src/assets/tiny_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/react-native-gallery/7178ec1f3c5fbcfe05ffa9254ee84366e4162427/NewArch/src/assets/tiny_logo.png -------------------------------------------------------------------------------- /NewArch/src/components/Badge.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, View, Text, OpaqueColorValue} from 'react-native'; 3 | // import {SymbolIcon} from 'react-native-xaml'; 4 | 5 | const styles = StyleSheet.create({ 6 | badgeContainer: { 7 | paddingLeft: 10, 8 | paddingRight: 10, 9 | paddingTop: 5, 10 | paddingBottom: 5, 11 | borderRadius: 3, 12 | flexDirection: 'row', 13 | alignItems: 'center', 14 | justifyContent: 'center', 15 | margin: 2, 16 | }, 17 | badgeText: { 18 | fontSize: 15, 19 | fontWeight: '400', 20 | paddingRight: 4, 21 | }, 22 | }); 23 | 24 | export function Badge(props: { 25 | badgeColor: OpaqueColorValue; 26 | textColor: string; 27 | badgeTitle: string; 28 | icon: number; 29 | description: string; 30 | }) { 31 | return ( 32 | 35 | 36 | {props.badgeTitle} 37 | 38 | {/* */} 39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /NewArch/src/components/CommunityModuleBadge.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {useTheme} from '../Navigation'; 3 | import {Badge} from './Badge'; 4 | import {Platform, PlatformColor} from 'react-native'; 5 | 6 | export function CommunityModuleBadge() { 7 | const {colors} = useTheme(); 8 | return ( 9 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /NewArch/src/components/Controls.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Linking, Pressable, StyleSheet, Text} from 'react-native'; 3 | 4 | type HyperlinkProps = { 5 | url: string; 6 | text?: string; 7 | }; 8 | function Hyperlink({url, text}: HyperlinkProps): JSX.Element { 9 | const styles = StyleSheet.create({ 10 | hyperlinkIdle: { 11 | color: 'blue', 12 | textDecorationLine: 'underline', 13 | }, 14 | hyperlinkHovering: { 15 | color: 'darkblue', 16 | textDecorationLine: 'underline', 17 | }, 18 | hyperlinkPressing: { 19 | color: 'black', 20 | textDecorationLine: 'underline', 21 | }, 22 | }); 23 | const [hovering, setHovering] = React.useState(false); 24 | const [pressing, setPressing] = React.useState(false); 25 | 26 | let displayText = text ?? url; 27 | 28 | return ( 29 | Linking.openURL(url)} 34 | onAccessibilityTap={() => Linking.openURL(url)} 35 | onPressIn={() => setPressing(true)} 36 | onPressOut={() => setPressing(false)} 37 | onHoverIn={() => setHovering(true)} 38 | onHoverOut={() => setHovering(false)}> 39 | 47 | {displayText} 48 | 49 | 50 | ); 51 | } 52 | 53 | export {Hyperlink}; 54 | -------------------------------------------------------------------------------- /NewArch/src/components/CoreComponentBadge.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {useTheme} from '../Navigation'; 3 | import {Badge} from './Badge'; 4 | import {Platform, PlatformColor} from 'react-native'; 5 | 6 | export function CoreComponentBadge() { 7 | const {colors} = useTheme(); 8 | return ( 9 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /NewArch/src/components/Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Code} from './Code'; 3 | import {StyleSheet, PlatformColor, Text, View} from 'react-native'; 4 | import {CopyToClipboardButton} from './CopyToClipboard'; 5 | import {useTheme} from '../Navigation'; 6 | 7 | const createStyles = (colors: any) => 8 | StyleSheet.create({ 9 | title: { 10 | marginTop: 30, 11 | marginBottom: 10, 12 | fontSize: 20, 13 | color: PlatformColor('TextControlForeground'), 14 | }, 15 | box: { 16 | borderRadius: 8, 17 | borderWidth: 1, 18 | borderColor: colors.border, 19 | }, 20 | exampleContainer: { 21 | padding: 15, 22 | backgroundColor: PlatformColor('Background'), 23 | }, 24 | codeContainer: { 25 | borderWidth: 0, 26 | borderTopWidth: 1, 27 | borderColor: colors.border, 28 | padding: 12, 29 | backgroundColor: PlatformColor('Background'), 30 | }, 31 | }); 32 | 33 | export function Example(props: { 34 | title: string; 35 | code: string; 36 | children: React.ReactNode; 37 | }) { 38 | const {colors} = useTheme(); 39 | const styles = createStyles(colors); 40 | return ( 41 | 42 | 43 | {props.title} 44 | 45 | {props.code ? ( 46 | 47 | {props.children} 48 | 53 | {props.code} 54 | 55 | 56 | 57 | 58 | 59 | ) : ( 60 | 61 | {props.children} 62 | 63 | )} 64 | 65 | ); 66 | } 67 | -------------------------------------------------------------------------------- /NewArch/src/components/LinkContainer.tsx: -------------------------------------------------------------------------------- 1 | import {StyleSheet, View} from 'react-native'; 2 | import React from 'react'; 3 | import {LinkTile} from './LinkTile'; 4 | 5 | const styles = StyleSheet.create({ 6 | hyperlinkContainer: { 7 | flexDirection: 'column', 8 | marginRight: 90, 9 | }, 10 | hyperlinkRow: { 11 | flexDirection: 'row', 12 | justifyContent: 'space-between', 13 | }, 14 | }); 15 | 16 | export function LinkContainer(props: { 17 | pageCodeUrl: string; 18 | feedbackUrl: string; 19 | documentation: {label: string; url: string}[]; 20 | }) { 21 | return ( 22 | 23 | 24 | 28 | 34 | 35 | 36 | 37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /NewArch/src/components/LinkTile.tsx: -------------------------------------------------------------------------------- 1 | import {PlatformColor, StyleSheet, Text, View} from 'react-native'; 2 | import React from 'react'; 3 | import {useTheme} from '../Navigation'; 4 | // import {HyperlinkButton} from 'react-native-xaml'; 5 | import { Hyperlink } from './Controls'; 6 | 7 | const createStyles = () => 8 | StyleSheet.create({ 9 | hyperlinkTile: { 10 | marginTop: 30, 11 | marginBottom: 10, 12 | marginRight: 30, 13 | alignItems: 'flex-start', 14 | }, 15 | hyperlinkTileTitle: { 16 | marginBottom: 10, 17 | fontSize: 20, 18 | color: PlatformColor('TextControlForeground'), 19 | }, 20 | }); 21 | 22 | export function LinkTile(props: { 23 | title: string; 24 | links: {label: string; url: string}[]; 25 | }) { 26 | const {colors} = useTheme(); 27 | const styles = createStyles(colors); 28 | return ( 29 | 30 | 31 | {props.title} 32 | 33 | {props.links.map((hyp) => ( 34 | 39 | ))} 40 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /NewArch/src/components/NativeControlBadge.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {useTheme} from '../Navigation'; 3 | import {Badge} from './Badge'; 4 | import {Platform, PlatformColor} from 'react-native'; 5 | 6 | export function NativeControlBadge() { 7 | const {colors} = useTheme(); 8 | return ( 9 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /NewArch/src/examples/ConfigExamplePage.tsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | import {Text} from 'react-native'; 3 | import React from 'react'; 4 | import {Example} from '../components/Example'; 5 | import {Page} from '../components/Page'; 6 | import Config from 'react-native-config'; 7 | import {useTheme} from '../Navigation'; 8 | 9 | export const ConfigExamplePage: React.FunctionComponent<{}> = () => { 10 | const {colors} = useTheme(); 11 | 12 | const example = `<> 13 | Service URL: {Config.SERVICE_URL} 14 | Service port: {Config.SERVICE_PORT} 15 | Service API key: {Config.SERVICE_API_KEY} 16 | `; 17 | 18 | return ( 19 | 30 | 31 | 32 | Service URL: {Config.SERVICE_URL} 33 | 34 | 35 | Service port: {Config.SERVICE_PORT} 36 | 37 | 38 | Service API key: {Config.SERVICE_API_KEY} 39 | 40 | 41 | 42 | ); 43 | }; 44 | -------------------------------------------------------------------------------- /NewArch/src/examples/LinearGradientExamplePage.tsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | import React from 'react'; 3 | import {Text} from 'react-native'; 4 | import {Example} from '../components/Example'; 5 | import {Page} from '../components/Page'; 6 | import LinearGradient from 'react-native-linear-gradient'; 7 | 8 | export const LinearGradientExamplePage: React.FunctionComponent<{}> = () => { 9 | const example1jsx = ` 18 | 19 | Text within a gradient fill 20 | 21 | `; 22 | return ( 23 | 34 | 35 | 45 | Text within a gradient fill 46 | 47 | 48 | 49 | ); 50 | }; 51 | -------------------------------------------------------------------------------- /NewArch/src/examples/PrintExamplePage.tsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | import {Button} from 'react-native'; 3 | import React from 'react'; 4 | import {Example} from '../components/Example'; 5 | import {Page} from '../components/Page'; 6 | import RNPrint from 'react-native-print'; 7 | 8 | export const PrintExamplePage: React.FunctionComponent<{}> = () => { 9 | const example = `