microsoft / react-native-windows-samples Goto Github PK

A repository showcasing React Native samples and templates for Windows, macOS, and Surface Duo.

Home Page: https://microsoft.github.io/react-native-windows/

License: MIT License

Dockerfile 0.02% JavaScript 10.37% CSS 3.07% Ruby 1.72% Starlark 0.46% Java 1.47% Objective-C 1.95% C++ 2.03% C# 77.39% HTML 0.18% C 0.18% TypeScript 0.79% Kotlin 0.27% Objective-C++ 0.09%

react-native react-native-windows react-native-macos

react-native-windows-samples's Introduction

React Native Samples and Templates

This repository is a companion to the React Native for Windows and React Native for macOS repos. The content here features React Native sample apps, components, and templates for Windows, macOS and Duo.

Samples

Sample	Description
AppServiceDemo	A sample RNW app which interacts with the Win32 ecosystem using App Services.
Calculator	A sample RNW app implementing a simple calculator with both C++ and C# implementations.
CalculatorNuGet	The Calculator sample, but consuming RNW through the NuGet packages.
ContinuousIntegration	Sample CI pipeline configurations for RNW projects.
NativeModuleSample	A sample RNW native module with both C++ and C# implementations.
ReactNativeWinRT	A sample RNW app that uses React Native WinRT to consume native WinRT APIs.

Contributions

We welcome your contributions and suggestions! Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

react-native-windows-samples's People

Contributors

Stargazers

Watchers

Forkers

blik3230 jonthysell alfremoreno dotnetjunky bonekyaw wolfx21 sulemantech klawrawkz jaredparkinson vmoroz japf arjun-jakka uhteddy mirraonaq alloy kaiguo ppatboyd andreleon justmelnyc walidnidoo brunoadamalves ezhangle dannyvv asklar louis993546 miguelqxxv csbarnes iam-medvedev simek nanduahmed naturalclar shoken0x panr debraj1990 jdcastro kant jurocha-ms samirsabag wooodhead jhutchings1 acoates-ms payneio wuming123 thomassth bear-rider bhaskers-blu-org2 doytsujin robmeyer jutarmass cybernetics taffywrinkle ztunde mrstebo goldxkey claudiusgonzo evakelemen stratospheres luism3861 mudaligekosala safaiyeh marlenecota harinikmsft sumanthrakesh bzoz janeasystems strogo krunalkharat fitzkou mouhsinelonly qmatteoq hondek gtrfnkn lionelhoudelier ryfow jaimecbernardo mendelk shilu-stha alexanderblackh rectified95 lowspeedburt kennethking6 kpete2017 chiaramooney kittuov vanshajhmadan harrisonho99 kevinmiles dmo16 jakubga ehrhardf 6vx gmartinu costa99 alluballu1 taisama3 reutopiaer sshyran saadnajmi mlarson1 ethan-30

react-native-windows-samples's Issues

Calculator sample app does not build from Visual Studio 2019 when repo name is too long

The build failed to copy the SliderMeasurementsManager.cpp to ...\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Microsoft.ReactNative\build\x64\Debug\Microsoft.ReactNative\react-native-patched\ReactCommon\fabric\components\slider\platform\android\SliderMeasurementsManager.cpp it did successfully copy the SliderMeasurementsManager.h file, it looks like the .cpp file cause the path length to be more than 260 characters.

Add documentation around nodejs safe versions for installation

The getting started guide needs to have a disclaimer about which node package is safe to use in order to install and run RNW.

Copied from last instructions (that need to be added back into Getting Started):

Dependencies

Install the dependencies specified by React Native. Specifically, make sure a recent version of Node.js is installed. Chocolatey is the React Native recommended installation method. But you can also install Node directly from NodeJs. To use chocolately, from an elevated Command Prompt, run:
```
choco install nodejs.install --version=12.9.1	
```
Install Chrome (optional, but needed for JS debugging)
Install Yarn (optional if consuming react-native-windows, but required to work in the react-native-windows repo)

Instructions imply you need to create a project directory

Might be just me, but the wording here is a bit misleading:

Remember to call this react-native init in the directory you want your project to live.
npx react-native init <project name> --version ^0.60.0

https://microsoft.github.io/react-native-windows/docs/getting-started#install-react-native-for-windows

It does create a directory with the name . In the folder you're in, yes.

Maybe worded more clearly like this?

Remember to call react-native init from the place you want your project directory to live.

Update TodosFeed sample to 0.62

When cloning this project and trying running TodosFeed project with react-native run-windows , The console throws the following error

error Invalid regular expression: /(C:[\\\]my[\\\]path[\\\]TodosFeed[\\\]TodosFeed[\\\]node_modules[\\\]react-native[\\\].*|C:[\\\]my[\\\]path[\\\]TodosFeed[\\\]TodosFeed[\\\]windows.*|node_modules\\react\\dist\\.*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Range out of order in character class. Run CLI with --verbose flag for more details.

This is resolved by replacing metro.config.js file from any working react-native-windows project.

The proper metro.config.js file should be added to the repo or a workaround should be provided

APi Parity "implemented" column for modules is inaccurate

https://microsoft.github.io/react-native-windows/docs/parity-status#supported-community-modules

Expand the sample to show parameters/return types that are JSON

I'ld find it really useful if you were able expand the sample modules to give examples of parameters and return types that are JSON. Eg in FancyMath maybe a complex.

At the moment in my code I'm using JSValue. I suppose that is the best way?

Contribution guide is lacking in repo-specific content

We do include some contribution information on the website here.

I don't think it's terribly helpful as is.

There's an issue capturing some complaints on the main repo, but if we have docs on the website we should probably track that portion here. Also that issue is too broad, and we should break down specific items.

I'm starting here by capturing feedback with checkboxes. These could be cards on a project board if we'd like to do it that way. Or individual issues. But for now... just need to capture the feedback.

When looking at contribution guides, here are some references:

WinUI
https://github.com/microsoft/microsoft-ui-xaml/blob/master/CONTRIBUTING.md
https://github.com/microsoft/microsoft-ui-xaml/blob/master/docs/developer_guide.md
RN
https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md
https://github.com/facebook/react-native/wiki/How-to-Contribute-Code
Contibuting page is duplicated:
- Wiki: https://github.com/microsoft/react-native-windows/wiki
- Linked from main readme: https://github.com/microsoft/react-native-windows/blob/master/docs/contributing.md
- This same content shows in website’s sidebar: https://microsoft.github.io/react-native-windows/docs/contributing

Of note, this doc isn’t great. It’s more “here’s how to use git”, not “here are the quirks to contributing to this repo”.

Remove SourceTree recommendation (it doesn't seem to be used by most of our core maintainers)
Replace the boiler plat "how to use git" content with links to existing resources/articles.
- Feedback: "this was mostly useful because it mentioned ‘yarn change’ and linked to the branch setup page"

There’s also this page on the wiki that’s at least more specifically helpful: https://github.com/microsoft/react-native-windows/wiki/Setup

Setup page isn't repo-specific
Again it’s pretty standard git boiler plate of “how to work in a fork”, pretty much nothing specific to our repo. We should link to other guides.
- Feedback: "this was valuable, hadn’t worked with forks before"
Setup page is duplicated
Note, duplicated here: https://github.com/microsoft/react-native-windows/blob/master/docs/branch-setup.md
We should pick where these things live. It’s github convention to have a CONTRIBUTING.md, but as you’ll see on RN’s repo they farm the rest out to wiki.
Building RNW article isn't in the sidebar
This exists: https://microsoft.github.io/react-native-windows/docs/building-rnw
Which is a spiritual successor to this: https://github.com/microsoft/react-native-windows/blob/0.60-stable/vnext/docs/BuildingRNW.md
It is linked to from the "getting started" page, but not from the "contributing to" page, nor is it in the sidebar.
Playground readme is out of date
https://github.com/microsoft/react-native-windows/blob/master/packages/playground/README.md
It has some broken links (pointing to vnext – can unbroken catch these?). And there’s no mention to how you need the sln param (although to be fair you’ll hit the error and know what to do).
RNTester's relationship with RNW is complicated and undocumented
There are proposed changes to how RNTester is managed here and here. In the meantime there's too much tribal knowledge.

Need documentation for how to change JavaScript engine (e.g. Hermes or V8)

We need instructions that capture how to apply USE_HERMES/USE_V8 and such. Especially because those instructions are evolving (e.g. see this)

Update docs to reflect changes in 0.62

Pages I think I need updating:

Main Page
- Update to 0.62
Getting Started:
- Stable should be 0.62
System Requirements:
- 15063 is only <= 61, update to 16299
- v141 is only <= 61, remove
Native Module Setup
- Switch to installing 0.62 for both rn and rnw
- Update cppwinrt version

Certificate not found error when executing the rss reader sample

Following the instructions from https://github.com/microsoft/react-native-windows-samples/tree/master/samples/rssreader#run-the-sample-on-windows-10 I get the following error when running npx react-native run-windows --logging.

Replacing the certificate with a test-certificate makes the sample work.

Add guidance for generating bundle

Need a guidance document that shows how to create a bundle for Win10 as well as Win32 apps.

Not found error while trying to follow the getting started guide

I'm getting a "not found" error while following the getting started guide:

⨯ ~\source\repos\react-native-sandbox                                                                                                                               
❯ react-native init hello --version ^0.60.0
This will walk you through creating a new React Native project in C:\Users\xxx\source\repos\react-native-sandbox\hello
Using yarn v1.22.0
Installing ^0.60.0...
yarn add v1.22.0
info No lockfile found.
[1/4] Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/0.60.0: Not found".
info If you think this is a bug, please open a bug report with the information provided in "C:\\Users\\jealles\\source\\repos\\react-native-sandbox\\hello3\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Error: Command failed: yarn add ^0.60.0 --exact

Changing the version parameter to --version ^[email protected] does work.
I'm not sure if this is the correct version, I created a PR if that's the case to change the docs.

cc @stmoy

Hanging page: docs/testing

The document here is not linked to anywhere within the website:

https://microsoft.github.io/react-native-windows/docs/testing

Is it still necessary?

If so, does a "top-level" link need to be added to the sidebar?
- Linked to from another page?
- Does its contents need updating?
If not, can it be removed?

Publish getting started for mac

Add context page for API docs

It would be good to add a page that sets context on what the API docs section is doing - point to RN docs for all RN APIs, set context on Windows specific work, Mac specific work etc., Right now it is confusing to land in that section without context.

Add documentation around how to have a cs or cpp project

Customer is looking for a generated C# project instead of a C++. We have a way to do this, but it is not documented and should be.

Need documentation for how to use WinUI3 with RNW

It will be a very long time before RNW can confidently use WinUI3 by default. In the meantime there's a manual switch to try it out. See issue on RNW repo. We need to document those steps, and list or link to the tradeoffs, so that early adopting apps can be informed.

Improve Samples documentation in the website

Right now we have a top header item for Samples that just links to the repo folder. Each sample app today has good Readme files - it may be valuable to have a page for each Sample app in the website that sets context on what each is illustrating and render the readme files in the website?

Fix github links in website landing page

We should remove the global "Star" on the website that points to the react-native-windows repo and instead move it down to the "Get started with Windows" section and add a similar one for Mac to ensure we are pointing people to the right repos for the two implementations.

We should also remove the "Github" tab in the top header as well - instead add a page in the resources section that consolidates all the githubs that are part of the RN at MSFT family of offerings.

Troubleshooting: Uninstall global copy of react native

Update the docs to include troubleshooting information as per this thread: microsoft/react-native-windows#4436 (comment)

this is caused by a stale version of react-native installed globally on your machine. please uninstall your global copy of react-native. Or update it.
npm uninstall -g react-native

Possible symptom:

[email protected] successfully installed.
Cannot find module '@react-native-community/cli/build/tools/copyAndReplace'
F:\Vs Apps\react_native_windows_todo\node_modules\react-native-windows\local-cli\generator-common\index.js
F:\Vs Apps\react_native_windows_todo\node_modules\react-native-windows\local-cli\generator-windows\index.js

Website versions page no longer has link to "next", no easy way to view updated docs

The change fa9677c removed the top-most row on the versions page. It is the only link on the site to get to the docs, as they actually appear in docs, in order to verify the contents before the version is snapshotted, and to give to others for review.

It also provided the easy link to see the code changes that have occurred since the last release, to give consumers an idea of what to expect.

Include general C#/C++ developer documentation, clean up Native UI Components docs

Proposal: Improve the documentation about writing Native modules and Native UI modules

The code on Native UI Components is clearly a bad copy-paste and is broken => this should be fixed
The pages Native Modules and Native UI Components should link to the github sample pages
What each part of the code does should be documented because it is currently not understandable for C# and C++ beginners like I am.

Add a C# sample

A customer just pointed out that all samples we have in this repo are C++. We should add a simple C# one - even a copy of Calculator in C# would be fine.

Update TodosFeed sample readme

Points to a bad link for getting started.

https://github.com/microsoft/react-native-windows-samples/tree/master/samples/TodosFeed

Update and publish Calculator app to Store

This issue tracks the progress of taking an RNW app from test to complete app release to the store. In this case the suggested app to take to completion is the calculator app.

This app could also serve as a validation app for future releases.

Publish WinUI controls parity doc

There was a request from some customers that we keep track of and publish a controls parity sheet that tracks which RNW controls/community modules map to what WinUI controls.

I think that this is a good thing to have up publicly as well so this issue will track the work towards having a page like that up on the documentation site.l

Issue with navigator and windows version in react-native

Hi Guys I'm using the windows plugin in my react-native project, I only have in my project a navigator with 4 pages empty, I have tested this navigator in an android emulator and it worked perfectly but after I applied these commands :

npm install --save-dev rnpm-plugin-windows
react-native windows
react-native run-windows

I received in the windows version of the project this error message 👍
TypeError: Cannot read property 'Direction' of undefined

I'm using React Navigation V5 with react-native-gesture-handler.
Any help will be appreciate.
thank you

Hanging page: docs/releases

The document here is not linked to anywhere within the website:

https://microsoft.github.io/react-native-windows/docs/releases

Is it still necessary?

If so, does a "top-level" link need to be added to the sidebar?
- Linked to from another page?
- Does its contents need updating?
If not, can it be removed?

Better Keyboard Shortcut support

Proposal: Better Keyboard Shortcut support

Summary

Although supportKeyboard allows for implementing handling of keyboard shortcuts on a React Native Windows app, it seems that the XAML platform has good support for handling keyboard shortcuts through UIElement's KeyboardAccelerators property. We could potentially use it to expose a KeyboardShortcut prop (and similarly an AccessKey prop) on a Touchable, or use XAML's commanding system to have React Native support implementing keyboard shortcuts directly. This would save each app from implementing their own shortcut handling system by using supportKeyboard.

Motivation

Keyboard shortcuts are important to expose so that people can efficiently traverse an app. We also find supporting shortcuts important for keyboard accessibility of the app. The React Native Windows platform has a way to implement keyboard shortcuts by using the supportKeyboard API, but using supportKeyboard for implementing keyboard shortcuts puts a lot of onus on the app developer to make their own keyboard shortcut handling system and to get it right. Each app developer would have to figure out the best place to listen for key events, how to determine when shortcuts were pressed, how to know if a command should be handled based on app state, and implement that system themselves. The platform could make this system easier to implement by removing the need to do those things, and would also encourage keyboard shortcut implementation if it's made a prop on a particular component.

Another point to consider is that supportKeyboard relies on PreviewKeyDown and PreviewKeyUp, which fires based on focus placement, while keyboard shortcuts tend to be global (i.e. if you press the right keys, the event fires regardless of where focus is), which is a difference in behavior of the systems. While it’s possible to make it look like shortcuts are global if by using supportKeyboard, the developer may have to take extra steps managing focus or building native modules and having to explore and consider several solutions to make it happen because supportKeyboard relies on focus. If we hooked into the platform’s system directly, we could avoid these issues and differences in model.

This change should be considered for Windows first, as Windows is the first React Native platform that is heavily keyboard-focused.

Basic example

For example it might look like:

<TouchableHighlight
…
keyboardShortcut={keys: ‘[‘Control’, ‘N’], isEnabled: this.props.newEventButtonEnabled}
onPress={this.props.onNewEventButtonPressed}
…
/>

If the keyboard shortcut is invoked, it could fire the onPress callback

Open Questions

Does it make sense to support keyboard shortcuts specifically given that supportKeyboard can be used to implement keyboard shortcuts?
How would we handle key differences on different endpoints?
Is UIElement's KeyboardAccelerators property the best API to use for implementing this on Windows?

Update docs to reflect 0.61 release

Pages I think I need updating:

Main Page
- Update to 0.61
Getting Started:
- Stable should be 0.61
- Beta should be ???
Native Module Setup
- Switch to installing 0.61 for both rn and rnw

Cannot run a Calculator sample

Environment

yarn - 1.9.4
node - 12.17.0
npm - 6.14.5
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-windows": "^0.61.0-0"

Building configuration

Target Platform Version(s): 10.0.18362.0
Target Device(s): Desktop
Visual Studio Version: Visual Studio 2019, Visual Studio 2017
Build Configuration: Debug

Little bit of description

There was an exact same issue. But I tried the same steps to fix it and it didn't help. By the way, a problem with the path too long(260 character limit) still there. I don't know if that only reproduces for me. But unlike @ngducnghia I don't have a problem with a temporary certificate if that helps 😬

Steps to Reproduce

Cloned repository
Installed dependencies
Tried to run it in Visual Studio 2019

Actual Behaviour

react-native run-windows --logging

Searching for MSBuild version 16.0
Found MSBuild v16.0 at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Current\Bin (16.5.29920.165)
√ Found MSBuild v16.0 at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Current\Bin (16.5.29920.165)
Searching for MSBuild version 15.0
Found MSBuild v15.0 at C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin (15.9.28307.1064)
√ Found MSBuild v15.0 at C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin (15.9.28307.1064)
Searching for MSBuild version 14.0
Searching for MSBuild version 12.0
Searching for MSBuild version 4.0
Restoring NuGets
C:\Users\pak\AppData\Local\Temp\nuget.4.9.2.exe
MSBuild auto-detection: using msbuild version '16.5.0.12403' from 'C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Current\bin'.
All packages listed in packages.config are already installed.
√ Restoring NuGets
Searching for MSBuild version 16.0
Found MSBuild v16.0 at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Current\Bin (16.5.29920.165)
√ Found MSBuild v16.0 at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Current\Bin (16.5.29920.165)
Searching for MSBuild version 15.0
Found MSBuild v15.0 at C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin (15.9.28307.1064)
√ Found MSBuild v15.0 at C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin (15.9.28307.1064)
Searching for MSBuild version 14.0
Searching for MSBuild version 12.0
Searching for MSBuild version 4.0
Found Solution: C:/Users/pak/Documents/react-native-windows-samples/samples/Calculator/windows/Calculator.sln
√ Found Solution: C:/Users/pak/Documents/react-native-windows-samples/samples/Calculator/windows/Calculator.sln
Build configuration: Debug
i Build configuration: Debug
Build platform: x86
i Build platform: x86
Running MSBuild with args /clp:NoSummary;NoItemAndPropertyList;Verbosity=normal /nologo /p:Configuration=Debug /p:Platform=x86 /p:AppxBundle=Never /p:PlatformToolset=v141 /p:VisualStudioVersion=16.0 /bl
- Building Solution
C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Current\Bin\msbuild.exe /nologo /bl /clp:NoSummary;NoItemAndPropertyList;Verbosity=normal /p:Configuration=Debug /p:Platform=x86 /p:AppxBundle=Never /p:PlatformToolset=v141 /p:VisualStudioVersion=16.0 C:/Users/pak/Documents/react-native-windows-samples/samples/Calculator/windows/Calculator.sln
Building the projects in this solution one at a time. To enable parallel build, please add the "-m" switch.
Build started 5/28/2020 5:12:55 PM.
Project "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\windows\Calculator.sln" on node 1 (default targets).
ValidateSolutionConfiguration:
  Building solution configuration "Debug|x86".
Project "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\windows\Calculator.sln" (1) is building "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\windows\Calculator\Calculator.vcxproj.metaproj" (2) on node 1 (default targets).
Project "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\windows\Calculator\Calculator.vcxproj.metaproj" (2) is building "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj" (3) on node 1 (default targets).
Project "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj" (3) is building "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Common\Common.vcxproj" (4) on node 1 (default targets).
GetInstalledSDKLocations:
  Searching for SDKs targeting "UAP, 10.0.18362.0".
  Searching for SDKs targeting "Windows, 8.1".
ResolveSDKReferences:
    Reading SDK manifest file "C:\Program Files (x86)\Microsoft SDKs\Windows Kits\10\ExtensionSDKs\Microsoft.VCLibs\14.0\SDKManifest.xml".
    Targeted configuration and architecture "Debug|x86"
    Could not find "FrameworkIdentity" attribute "FrameworkIdentity-Debug-x86" in the SDK manifest.
    Found "FrameworkIdentity" attribute "Name = Microsoft.VCLibs.140.00.Debug, MinVersion = 14.0.27810.0, Publisher = 'CN=Microsoft Corporation, O=Microsoft Corporation, L=Redmond, S=Washington, C=US'" in the SDK manifest.
    Found "APPX" location attribute "AppX-Debug-x86=.\AppX\Debug\x86\Microsoft.VCLibs.x86.Debug.14.00.appx" in the SDK manifest.
    Found "APPX" location attribute "AppX-Debug-x64=.\AppX\Debug\x64\Microsoft.VCLibs.x64.Debug.14.00.appx" in the SDK manifest.
    Found "APPX" location attribute "AppX-Debug-ARM=.\AppX\Debug\ARM\Microsoft.VCLibs.ARM.Debug.14.00.appx" in the SDK manifest.
    Found "APPX" location attribute "AppX-Debug-ARM64=.\AppX\Debug\ARM64\Microsoft.VCLibs.ARM64.Debug.14.00.appx" in the SDK manifest.
ExpandSDKReferences:
  Enumerating SDK Reference "Microsoft.VCLibs, Version=14.0" from "C:\Program Files (x86)\Microsoft SDKs\Windows Kits\10\ExtensionSDKs\Microsoft.VCLibs\14.0\".
InitializeBuildStatus:
  Creating "build\x86\Debug\Common\Common.tlog\unsuccessfulbuild" because "AlwaysCreate" was specified.
ClCompile:
  All outputs are up-to-date.
Lib:
  All outputs are up-to-date.
  Common.vcxproj -> C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Common\target\x86\Debug\Common\Common.lib
ComputeProcessXamlFiles:
  (Out) ProcessedXamlFiles ==
CustomOutputGroupForPackaging:
  (Out) Project='Common' ProcessedXamlFiles ==
  (Out) XamlPackagingRootFolder == build\x86\Debug\Common\Generated Files\
  (Out) ProcessedXamlFilesFullPath ==
  (Out) Project='Common' CustomOutputGroupForPackagingOutput ==
GetPackagingOutputs:
  Common : Common.ProjectPriFile : C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Common\target\x86\Debug\Common\Common.pri -> Common.pri
  Common : Common.GetResolvedSDKReferences : C:\Program Files (x86)\Microsoft SDKs\Windows Kits\10\ExtensionSDKs\Microsoft.VCLibs\14.0\ ->
  Common : Common._GetProjectArchitecture : x86 ->
_GenerateProjectPriConfigurationFiles:
  Common -> build\x86\Debug\Common\priconfig.xml
  Common -> build\x86\Debug\Common\unfiltered.layout.resfiles
  Common -> build\x86\Debug\Common\filtered.layout.resfiles
  Common -> build\x86\Debug\Common\excluded.layout.resfiles
  Common -> build\x86\Debug\Common\resources.resfiles
  Common -> build\x86\Debug\Common\pri.resfiles
  Common ->
  Common -> build\x86\Debug\Common\embed\embed.resfiles
_GenerateProjectPriFileCore:
Skipping target "_GenerateProjectPriFileCore" because all output files are up-to-date with respect to the input files.
FinalizeBuildStatus:
  Deleting file "build\x86\Debug\Common\Common.tlog\unsuccessfulbuild".
  Touching "build\x86\Debug\Common\Common.tlog\Common.lastbuildstate".
Done Building Project "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Common\Common.vcxproj" (default targets).
Project "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj" (3) is building "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Folly\Folly.vcxproj" (5) on node 1 (default targets).
GetInstalledSDKLocations:
  Searching for SDKs targeting "UAP, 10.0.18362.0".
  Searching for SDKs targeting "Windows, 8.1".
ResolveSDKReferences:
    Reading SDK manifest file "C:\Program Files (x86)\Microsoft SDKs\Windows Kits\10\ExtensionSDKs\Microsoft.VCLibs\14.0\SDKManifest.xml".
    Targeted configuration and architecture "Debug|x86"
    Could not find "FrameworkIdentity" attribute "FrameworkIdentity-Debug-x86" in the SDK manifest.
    Found "FrameworkIdentity" attribute "Name = Microsoft.VCLibs.140.00.Debug, MinVersion = 14.0.27810.0, Publisher = 'CN=Microsoft Corporation, O=Microsoft Corporation, L=Redmond, S=Washington, C=US'" in the SDK manifest.
    Found "APPX" location attribute "AppX-Debug-x86=.\AppX\Debug\x86\Microsoft.VCLibs.x86.Debug.14.00.appx" in the SDK manifest.
    Found "APPX" location attribute "AppX-Debug-x64=.\AppX\Debug\x64\Microsoft.VCLibs.x64.Debug.14.00.appx" in the SDK manifest.
    Found "APPX" location attribute "AppX-Debug-ARM=.\AppX\Debug\ARM\Microsoft.VCLibs.ARM.Debug.14.00.appx" in the SDK manifest.
    Found "APPX" location attribute "AppX-Debug-ARM64=.\AppX\Debug\ARM64\Microsoft.VCLibs.ARM64.Debug.14.00.appx" in the SDK manifest.
ExpandSDKReferences:
  Enumerating SDK Reference "Microsoft.VCLibs, Version=14.0" from "C:\Program Files (x86)\Microsoft SDKs\Windows Kits\10\ExtensionSDKs\Microsoft.VCLibs\14.0\".
InitializeBuildStatus:
  Creating "build\x86\Debug\Folly\Folly.tlog\unsuccessfulbuild" because "AlwaysCreate" was specified.
ClCompile:
  All outputs are up-to-date.
  All outputs are up-to-date.
Lib:
  All outputs are up-to-date.
  Folly.vcxproj -> C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Folly\target\x86\Debug\Folly\Folly.lib
ComputeProcessXamlFiles:
  (Out) ProcessedXamlFiles ==
CustomOutputGroupForPackaging:
  (Out) Project='Folly' ProcessedXamlFiles ==
  (Out) XamlPackagingRootFolder == build\x86\Debug\Folly\Generated Files\
  (Out) ProcessedXamlFilesFullPath ==
  (Out) Project='Folly' CustomOutputGroupForPackagingOutput ==
GetPackagingOutputs:
  Folly : Folly.ProjectPriFile : C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Folly\target\x86\Debug\Folly\Folly.pri -> Folly.pri
  Folly : Folly.GetResolvedSDKReferences : C:\Program Files (x86)\Microsoft SDKs\Windows Kits\10\ExtensionSDKs\Microsoft.VCLibs\14.0\ ->
  Folly : Folly._GetProjectArchitecture : x86 ->
_GenerateProjectPriConfigurationFiles:
  Folly -> build\x86\Debug\Folly\priconfig.xml
  Folly -> build\x86\Debug\Folly\unfiltered.layout.resfiles
  Folly -> build\x86\Debug\Folly\filtered.layout.resfiles
  Folly -> build\x86\Debug\Folly\excluded.layout.resfiles
  Folly -> build\x86\Debug\Folly\resources.resfiles
  Folly -> build\x86\Debug\Folly\pri.resfiles
  Folly ->
  Folly -> build\x86\Debug\Folly\embed\embed.resfiles
_GenerateProjectPriFileCore:
Skipping target "_GenerateProjectPriFileCore" because all output files are up-to-date with respect to the input files.
FinalizeBuildStatus:
  Deleting file "build\x86\Debug\Folly\Folly.tlog\unsuccessfulbuild".
  Touching "build\x86\Debug\Folly\Folly.tlog\Folly.lastbuildstate".
Done Building Project "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Folly\Folly.vcxproj" (default targets).
Project "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj" (3) is building "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\JSI\Universal\JSI.Universal.vcxproj" (6) on node 1 (default targets).
GetInstalledSDKLocations:
  Searching for SDKs targeting "UAP, 10.0.18362.0".
  Searching for SDKs targeting "Windows, 8.1".
ResolveSDKReferences:
    Reading SDK manifest file "C:\Program Files (x86)\Microsoft SDKs\Windows Kits\10\ExtensionSDKs\Microsoft.VCLibs\14.0\SDKManifest.xml".
    Targeted configuration and architecture "Debug|x86"
    Could not find "FrameworkIdentity" attribute "FrameworkIdentity-Debug-x86" in the SDK manifest.
    Found "FrameworkIdentity" attribute "Name = Microsoft.VCLibs.140.00.Debug, MinVersion = 14.0.27810.0, Publisher = 'CN=Microsoft Corporation, O=Microsoft Corporation, L=Redmond, S=Washington, C=US'" in the SDK manifest.
    Found "APPX" location attribute "AppX-Debug-x86=.\AppX\Debug\x86\Microsoft.VCLibs.x86.Debug.14.00.appx" in the SDK manifest.
    Found "APPX" location attribute "AppX-Debug-x64=.\AppX\Debug\x64\Microsoft.VCLibs.x64.Debug.14.00.appx" in the SDK manifest.
    Found "APPX" location attribute "AppX-Debug-ARM=.\AppX\Debug\ARM\Microsoft.VCLibs.ARM.Debug.14.00.appx" in the SDK manifest.
    Found "APPX" location attribute "AppX-Debug-ARM64=.\AppX\Debug\ARM64\Microsoft.VCLibs.ARM64.Debug.14.00.appx" in the SDK manifest.
ExpandSDKReferences:
  Enumerating SDK Reference "Microsoft.VCLibs, Version=14.0" from "C:\Program Files (x86)\Microsoft SDKs\Windows Kits\10\ExtensionSDKs\Microsoft.VCLibs\14.0\".
InitializeBuildStatus:
  Creating "build\x86\Debug\JSI.Universal\JSI.Universal.tlog\unsuccessfulbuild" because "AlwaysCreate" was specified.
ClCompile:
  All outputs are up-to-date.
Lib:
  All outputs are up-to-date.
 ...
C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\PropertySheets\ReactPatches.targets(35,5): error MSB3021: Unable to copy file "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native\ReactCommon\turbomodule\samples\platform\ios\SampleTurboCxxModuleLegacyImpl.h" to "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Microsoft.ReactNative\build\x86\Debug\Microsoft.ReactNative\react-native-patched\\ReactCommon\\turbomodule\samples\platform\ios\SampleTurboCxxModuleLegacyImpl.h". Could not find a part of the path 'C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Microsoft.ReactNative\build\x86\Debug\Microsoft.ReactNative\react-native-patched\\ReactCommon\\turbomodule\samples\platform\ios\SampleTurboCxxModuleLegacyImpl.h'. [C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj]
Done Building Project "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj" (default targets) -- FAILED.
Done Building Project "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\windows\Calculator\Calculator.vcxproj.metaproj" (default targets) -- FAILED.
Done Building Project "C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\windows\Calculator.sln" (default targets) -- FAILED.

Detailed Build Summary

============================== Build Hierarchy (IDs represent configurations) =====================================================
Id : Exclusive Time Total Time Path (Targets)

 | 1                 : 0.007s           32.881s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\windows\Calculator\Calculator.vcxproj.metaproj ()
 | . 4               : 30.513s           32.874s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj ()
 | | | 5             : 0.551s           0.551s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Common\Common.vcxproj ()
 | | | 6             : 0.385s           0.385s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Folly\Folly.vcxproj ()
 | | | 7             : 0.305s           0.342s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\JSI\Universal\JSI.Universal.vcxproj ()
 | | | | 10          : 0.021s           0.021s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Common\Common.vcxproj (GetNativeManifest)
 | | | . 11          : 0.016s           0.016s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Common\Common.vcxproj (GetResolvedLinkLibs)
 | | | 8             : 0.426s           0.456s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\ReactCommon\ReactCommon.vcxproj ()
 | | | . 12          : 0.030s           0.030s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Folly\Folly.vcxproj (GetNativeManifest)
 | | | 9             : 0.463s           0.568s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\ReactWindowsCore\ReactWindowsCore.vcxproj ()
 | | | | 13          : 0.041s           0.041s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\ReactCommon\ReactCommon.vcxproj (GetNativeManifest)
 | | | | 14          : 0.026s           0.026s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\Folly\Folly.vcxproj (GetResolvedLinkLibs)
 | | | . 15          : 0.039s           0.039s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\ReactCommon\ReactCommon.vcxproj (GetResolvedLinkLibs)
 | | | 16            : 0.018s           0.018s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\JSI\Universal\JSI.Universal.vcxproj (GetNativeManifest)
 | | . 17            : 0.040s           0.040s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\node_modules\react-native-windows\ReactWindowsCore\ReactWindowsCore.vcxproj (GetNativeManifest)
 | 2                 : 0.003s           0.003s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\windows\..\node_modules\react-native-windows\ReactCommon\ReactCommon.vcxproj.metaproj ()
 . 3                 : 0.004s           0.004s       C:\Users\pak\Documents\react-native-windows-samples\samples\Calculator\windows\..\node_modules\react-native-windows\ReactWindowsCore\ReactWindowsCore.vcxproj.metaproj ()```

 ============================== Node Utilization (IDs represent configurations) ====================================================
 Timestamp:            1        Duration   Cumulative
 -----------------------------------------------------------------------------------------------------------------------------------
 637262683760500079:   0        0.048s     0.048s
 637262683760978705:   1        0.006s     0.054s
 637262683761038811:   4        0.255s     0.309s .....
 637262683763587452:   5        0.551s     0.860s ...........
 637262683769097975:   6        0.385s     1.245s .......
 637262683772948847:   7        0.063s     1.308s .
 637262683773577311:   10       0.021s     1.329s
 637262683773786614:   7        0.181s     1.509s ...
 637262683775592032:   11       0.016s     1.525s
 637262683775751611:   7        0.062s     1.587s .
 637262683776369667:   8        0.069s     1.656s .
 637262683777057838:   12       0.030s     1.686s
 637262683777357035:   8        0.357s     2.043s .......
 637262683780927458:   9        0.073s     2.116s .
 637262683781655765:   13       0.041s     2.156s
 637262683782064404:   9        0.260s     2.417s .....
 637262683784667422:   14       0.026s     2.443s
 637262683784926767:   15       0.039s     2.482s
 637262683785315682:   9        0.130s     2.611s ..
 637262683786612205:   4        0.003s     2.614s
 637262683786642117:   16       0.018s     2.632s
 637262683786821658:   17       0.040s     2.672s
 637262683787220567:   4        30.256s     32.928s ++++++ (scale 1:100)
 637262684089776469:   1        0.001s     32.929s
 637262684089786434:   2        0.003s     32.932s
 637262684089816349:   3        0.004s     32.936s
 637262684089816349:   0        0.004s     32.940s
 -----------------------------------------------------------------------------------------------------------------------------------
 Utilization:          100.0    Average Utilization: 100.0
× Building Solution
Build failed with message undefined. Check your build configuration.
× Build failed with message undefined. Check your build configuration.

Recommend using `npx` over installing react-native-cli globally

According to React Native CLI documentation, you're not supposed to install react-native-cli globally any longer. The recommended approach is to use npx, e.g.:

npx react-native init MyApp
# or
npx react-native@^0.60 init MyApp

Update docs to reflect changes to support to Windows RS3+

Related to this pr: microsoft/react-native-windows#4449

Ensure release notes for 0.63 mention breaking change in template

At the time of writing we don't have an upgrade tool for templates yet.
PR 5091 in the react-native-windows repo introduces a breaking change for which users with C# projects and are recommended to update their solution and one C# file.
If users upgrade from 0.61 or a prerelease of 0.62 they might also need to do some more changes to the .csproj file as well.

For now these changes are documented in an .md file in the code repo that was checked in as part of the breaking change.

This issue is to track we document for users (or hopefully have had time to implement upgrade tooling so users don't have to worry...)

Where to add samples for the Popup component?

I'm looking for a sample using the Popup component. It doesn't seem to exist as of now. What would be a good sample project to demonstrate the use of this component ?

Happy to submit a PR for this.

Documentation for custom props

Hey there!

I found it really hard to figure out react-native-windows specific custom props like onMouseEnter for the view component. There seems to be no (complete) documentation of the neat props you added to the components. For View props there is IViewWindowsProps docs but there are many probs missing.

Maybe you already have this, but the best discoverability of props I find is through typescript types. Do you provide your own types for components? Obviously the vanilla react-native ViewProps type would not have onMouseEnter for example.

Is there a list of all custom props? Do you need any help in adding them to the docs?

Add guidance for deploying to devices - Windows desktop, xbox etc.,

Would be good to add a guidance doc that shows how to deploy an RNW app on Win10 devices. Something like what the legacy docs had.

Document disk space requirements

The System Dependencies page needs a callout about the disk space requirements when building an RN app (especially for the first time) via the npx react-native run-windows command.

Add article on reconciling RNW's relationship with Win32

We start by focusing RNW on UWP. I feel like that story is pretty clear.
However there are 2 options for working with Win32:

Using XAML Islands (see this article at the "Embedding the React Native component inside a Win32 app" section)
Using the React Native for Win32 solution that emits Win32 controls instead of XAML controls (which is also part of the react-native-windows repo)

This difference can be confusing, we should get out in front of that with documentation.

Doc versioning from 0.60+

The docs need to have version controlling so customers/consumers using earlier RNW verisons can get the correct installations, requirements, etc. from the documentation.

overwriting the metro.js file for Windows causes Android + iOS to not work

Environment

This works for any environment, as this is the current state of affairs in order to install, build, and run a React Native Windows application.

Steps to Reproduce

(Write your steps here:)

npx react-native init <project name> --version ^0.61.5
cd <project name>
npx react-native-windows-init

At step three, you will be asked to overwrite the metro.js bundler. It is at this point that if the user does so they will break android and ios builds.

Expected Behavior

that we use a metro bundler that co-exists nicely with android + ios as well.

C# Example issues

Hi everybody,

I cannot seem to get the C# example to run. I keep running into these errors:

The type or namespace name 'IReactPackageProvider' could not be found (are you missing a using directive or an assembly reference?)

The type or namespace name 'IReactPackageBuilder' could not be found (are you missing a using directive or an assembly reference?)

I can't figure out what is wrong, my references to Microsoft.ReactNative are in tact, in fact when I look for the IReactPackageProvider and IReactPackageBuilder it seems to all be there.

What am I doing wrong?

Thanks!

Update versions page to clarify release process

The versions page on the website needs to have more information around the three different types of releases we're considering making standard:

Daily
Preview
Release

Each version has different sets of expectations and criteria that must to be met in order to meet the qualification necessary to climb it's way to release - it's important that we have those details publicly available on our website so our consumers and customers know what to expect when deciding which release to work from.

Add guidance for threading model in native modules

Request from Office/Calendar team: We need the ability to specify which thread a native module should run on. I believe this is possible, or will be soon, but we need some migration document to help us here. Background: We need some of our native modules to run on specific threads. In one case, this needs to be the UI thread, but in other cases, we need to run on a specific dedicated background thread.

Publish guidance doc for packaging and publishing RNW app to store

Porting from main repo issue and filing here for documentation.

This can be a sister task to #35 (as part of publishing to store, can capture the steps and publish guidance).

Resources page doesn't display well on mobile (needs CSS styling fixes)

The resources page doesn't respond (well) to mobile or smaller screen sizes. Needs a styling fix to handle this.

Set up CI for samples - calculator

We should have a CI loop that verifies that the samples build successfully

Link to helpful main repo docs

The resources page needs links to testing, e2etesting, contributing and the monorepo from the main repo. They are being/already removed from the 0.62 release and need a separate link home.

Document RNW version support matrix

Summary

As RNW moves forward from version to version, from 0.59 to 0.60 to 0.61 to 0.62... not all of these versions get uniform support. There will be caveats for each. And we should document those.

Motivation

Create clarity for app developers about what risks they are taking on for staying on each particular version.

Open Questions

How should we communicate this? Table of combinations that are/aren't supported?
How can we track which customers are on which versions so we can be knowledgeable about how we do deprecations

Add Native UI Component example using built-in control

Proposal: Add a sample implementation of a Native UI Component that uses a built-in control

Summary

Currently, the docs for Native UI Components uses a fully custom control. It would be nice to have an example to show how developers can integrate existing UI controls instead of writing their own.

Motivation

As a React developer who is new to Windows development, it is unclear which portions of the existing sample are required if I'm using an existing XAML control. For instance, if I wanted to add a Command bar, do I need to create a class that extends from Control? Do I need to create a class for each different XAML tag type for Command bar? Having a through-yet-understandable example demonstrating a complex XAML control would be a great resource for developers to begin building out React versions of Windows UI components.

Open Questions

Which XAML component should the sample use?

Additional Comments

I'm willing to contribute this documentation provided someone can point me in the right direction (particularly how to handle in JSX components that have nested XAML components).

microsoft / react-native-windows-samples Goto Github PK

react-native-windows-samples's Introduction

React Native Samples and Templates

Samples

Contributions

react-native-windows-samples's People

Contributors

Stargazers

Watchers

Forkers

react-native-windows-samples's Issues

Dependencies

Proposal: Improve the documentation about writing Native modules and Native UI modules

Proposal: Better Keyboard Shortcut support

Summary

Motivation

Basic example

Open Questions

Environment

Little bit of description

Steps to Reproduce

Actual Behaviour

react-native run-windows --logging

Detailed Build Summary

============================== Build Hierarchy (IDs represent configurations) ===================================================== Id : Exclusive Time Total Time Path (Targets)

Environment

Steps to Reproduce

Expected Behavior

Summary

Motivation

Open Questions

Proposal: Add a sample implementation of a Native UI Component that uses a built-in control

Summary

Motivation

Open Questions

Additional Comments

Recommend Projects

Recommend Topics

Recommend Org

============================== Build Hierarchy (IDs represent configurations) =====================================================
Id : Exclusive Time Total Time Path (Targets)