Skip to content

Upgrade Calculator Fabric Apps to 0.80.x dependencies #1076

@HariniMalothu17

Description

@HariniMalothu17

⚠️ Copilot Instructions (Read Carefully)

You MUST follow the description in this issue EXACTLY as written.

  • Do not paraphrase, reinterpret, summarize, or add anything extra.
  • Preserve all wording, formatting, code blocks, commands, and file names verbatim.
  • If the description includes a README or steps, use it literally.
  • Do not auto-complete or generate additional “helpful” suggestions.
  • If something is unclear, stop and use exactly what is written — do not guess.

👇 The full description starts here. Copy and follow it exactly:


⚠️ Copilot: Do not paraphrase or reinterpret. Use the following content verbatim.

CalculatorExperimental - React Native for Windows

Do not re-interpret or suggest alternatives.
Refer to this PR #1063
This sample showcases the usage of React Native for Windows to build a simple calculator that is hosted on the experimental Fabric rendering system.

Upgrade the CalculatorExperimental sample to use React Native Windows 0.80.x dependencies, ensuring the app builds and runs correctly under Fabric.

Setup

First, make sure you've met the React Native Windows System Requirements.

Then, within this folder, install the application's dependencies. If you have yarn installed:

yarn install

Otherwise, you can just use npm:

npm install

Run

Once you have all of the dependencies installed, you can run the application with the following command:

npx @react-native-community/cli@latest run-windows

The command will:

  • Build the application and all dependencies
  • Deploy the application
  • Launch the React Native Server and Debugger
  • Launch the application

Upgrade

To upgrade this sample to the latest version of RNW:

  1. Open a command prompt and navigate to the samples folder:

    cd Calculator
  2. Delete this folder:

    rd /s /q fabric
  3. Create a new React Native app and change version to version you want to upgrade to:

        npx --yes @react-native-community/cli@latest init CalculatorFabric --template @react-native-community/template@latest --skip-git-init
  4. Add Windows support:

    cd CalculatorFabric
    yarn add react-native-windows@latest
    npx @react-native-community/cli init-windows --template cpp-app --overwrite --logging
    
  5. Rename the folder to fabric:

    cd ..
    ren CalculatorFabric fabric
  6. Restore README.md and App.tsx:

    cd fabric
    git restore App.tsx
    git restore README.md
  7. Verify App runs:

    npx @react-native-community/cli@latest run-windows
  8. Look at the Package.appxmanifast and change the publisher name to CN=React Native Windows Sample.

  9. Revert all changes made to GUID values in the project and solution files.

  10. Update this README to the current version of the app.

Metadata

Metadata

Labels

Workstream: Gallery and SamplesHave useful samples of RNW app and library projects to help developers.enhancementNew feature or request

Type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions