Manual Validation Steps for RNW Release

These steps should be performed after a preview is created for the next release of Microsoft/react-native-windows. The goal of this process is to check that the new release can be ingested into a standalone RNW app and successfully build and run, to verify that all RNW core components continue to render and operate correctly, and to verify that all community modules with Windows support continue to render and operate correctly.

Upgrade RN Gallery to Release Preview

Assuming the case that you are given 0.xx.x-preview.x as the release preview that needs to be validated via the gallery, the first step is to create a branch which holds a copy of the gallery that runs on 0.xx-preview.1 RNW. To do this:

1. In your fork of RN Gallery create a fresh branch.
2. Checkout this branch locally.
3. Run npx react-native-windows-init --version 0.xx-preview.x --overwrite. (find the version here: https://www.npmjs.com/package/react-native-windows?activeTab=versions)
4. Run npx react-native autolink-windows to autolink native modules.
5. If there are any other updates needed to the windows .sln file, you'll have to re-add in those updates now.
6. Restore MainPage.xaml
7. Check to make sure app can still build and run by running npx react-native run-windows.
8. If app fails to build and run, alert RNW developer who asked for this validation to be performed. Detail what errors/issues are occurring. This means a change to the preview code will be necessary.

Validate Component Functionality

To do this:

1. Run npx react-native run-windows.
2. Check Welcome Screen.

• Does the Welcome Screen appear with no error?
• Does the text appear in the center of the screen introducing RN Gallery?

3. Check Menu.

• Does the Menu button appear in the upper left corner of the screen?
• Can you open and retract the menu?
• Can you select options in the menu?
• Does selection a menu option lead you to the correct page?
• Do errors/warnings appear as you navigate the menu?

4. Check All Component Pages.

• Does Component Page render without errors or warnings?
• Can you view each the component's examples?
• Interact with each example. Is there a particular functionality which causes errors appear for the component?
• Can you scroll the full length of the page and see all of the page's contents?
• Follow links on the page. Are they broken? Do you see the correct web page appear? Are errors produced in the app?

5. Check Settings Page.

• Does the Settings Page render without errors or warnings?
• Interact with the theme toggle. When navigating back to a Component Page, does the code snippet theme correctly display?
• Follow links on the page. Are they broken? Do you see the correct web page appear? Are errors produced in the app?

6. If an error/issue occurred with a community module (could be on a Component Page or else where in the app), file an issue in Microsoft/react-native-windows which states that the new RNW release will break community module and that the module will needed to be updated in order to be compatible with 0.xx. Make sure to describe the break as detailed as possible. Then alert the RNW developer who asked for this validation of the error with the module and that you have filed an issue.
7. If an error/issue occurred with a core component (could be on a Component Page or else where in the app), alert RNW developer who asked for this validation to be performed. Detail what errors/issues are occurring. This means a change to the preview code will be necessary.

Check Release Build

Sometimes issues only appear in a Release build on an RNW app. Make sure to also test that React Native Gallery can successfully build in release via npx react-native run-windows --release. Then, install and run the app, checking to see that the app pages still load and that components still render and behave correctly.

Verify with WACK

1. Go to Publish > Create App Package > Sideloading > Select Gallery Certificate > Select Release for x86 and x64 > Create Package.
2. Open the Windows Application Certification Kit.
3. Select your newly created app package and run all tests.
4. Confirm that React Native Gallery passes WACK.

FAQ

Q: I have an error with a component but I don't know if the component is a core or community module component?

A: Open up the source code for the gallery and find the location in the code where the error is occurring. Then scroll up to the top of the page where the import statements occur. Is the component being added from 'react-native' or 'react', then this component is tied to core and would fall under Step 7. Otherwise, is the component being added from another source like 'react-native-datetimepicker', then this component is tied to a community module. At some point we will create a comprehensive list on the RNW website which clearly lists all of the core components we have and the community modules we support, but until that point these steps should guide you in the right direction.