Skip to content

Commit aca98ba

Browse files
Copilotanupriya13
Copilot
and
anupriya13
authored
✨ Add Copilot instructions for React Native Windows samples repository (#1075)
This PR implements comprehensive Copilot instructions for the react-native-windows-samples repository to help GitHub Copilot better understand the codebase structure, development patterns, and best practices. ## What's Added Created `.github/copilot-instructions.md` with detailed guidance covering: - **Repository Overview**: Purpose and relationship to main React Native Windows/macOS repos - **Technology Stack**: React Native Windows 0.79+, C++/WinRT, C#, TypeScript/JavaScript - **Repository Structure**: Samples organization, legacy code, documentation, and CI/CD - **Development Environment**: Prerequisites, setup instructions, and common commands - **Sample Projects**: Detailed information about Calculator, NativeModuleSample, and ContinuousIntegration samples - **Build System**: GitHub Actions workflows, build matrix (Debug/Release, x86/x64/ARM64) - **Code Patterns**: File structure conventions, naming patterns, and coding standards - **Testing Approach**: Jest configuration, native code testing, and integration testing - **Common Tasks**: Adding samples, upgrading versions, working with native code - **Troubleshooting**: Solutions for build failures, Metro issues, and native module problems - **Best Practices**: Guidelines for contributors and cross-platform development ## Benefits These instructions will help Copilot: - Generate more accurate code suggestions for React Native Windows development - Understand the multi-language nature of the repository (JS/TS, C++, C#) - Provide better guidance for native module development - Suggest appropriate build commands and project structure - Offer relevant troubleshooting advice The instructions follow GitHub's best practices for Copilot coding agent configuration and are tailored specifically to the unique aspects of React Native Windows development. Fixes #1074. <!-- START COPILOT CODING AGENT TIPS --> --- 💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs. ###### Microsoft Reviewers: [Open in CodeFlow](https://microsoft.github.io/open-pr/?codeflow=https://github.com/microsoft/react-native-windows-samples/pull/1075) --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: anupriya13 <54227869+anupriya13@users.noreply.github.com>
1 parent 14c9769 commit aca98ba

File tree

1 file changed

+189
-0
lines changed

1 file changed

+189
-0
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
# Copilot Instructions for React Native Windows Samples
2+
3+
## Repository Overview
4+
5+
This repository contains React Native samples, components, and templates for Windows, macOS, and Duo. It serves as a companion to the main [React Native for Windows](https://github.com/microsoft/react-native-windows) and [React Native for macOS](https://github.com/microsoft/react-native-macos) repositories.
6+
7+
## Repository Structure
8+
9+
```
10+
├── samples/ # Current React Native Windows samples
11+
│ ├── Calculator/ # Calculator sample with C++/WinRT, C#, and Fabric implementations
12+
│ ├── NativeModuleSample/ # Native module and component examples
13+
│ └── ContinuousIntegration/ # CI/CD pipeline configurations
14+
├── samples-old/ # Legacy samples for older RN versions
15+
├── website/ # Documentation website (Docusaurus)
16+
├── docs/ # Additional documentation
17+
└── .github/ # GitHub workflows and templates
18+
```
19+
20+
## Technology Stack
21+
22+
- **React Native for Windows (RNW)**: Target version 0.79+
23+
- **Languages**: TypeScript/JavaScript, C++/WinRT, C#
24+
- **Build Tools**: MSBuild, npm/yarn, React Native CLI
25+
- **Platforms**: Windows (x86, x64, ARM64), macOS, Android Emulator (Duo)
26+
- **Testing**: Jest, React Native testing tools
27+
- **CI/CD**: GitHub Actions with cross-platform builds
28+
29+
## Development Environment
30+
31+
### Prerequisites
32+
- Follow [React Native Windows System Requirements](https://microsoft.github.io/react-native-windows/docs/rnw-dependencies)
33+
- Node.js and npm/yarn
34+
- Visual Studio with C++ and Windows development workloads
35+
- Windows SDK
36+
- React Native CLI: `@react-native-community/cli`
37+
38+
### Common Commands
39+
40+
**Setup a sample:**
41+
```bash
42+
cd samples/[SampleName]/[Implementation]
43+
npm install # or yarn install
44+
```
45+
46+
**Build and run:**
47+
```bash
48+
npx @react-native-community/cli@latest run-windows
49+
```
50+
51+
**For native modules:**
52+
```bash
53+
npx @react-native-community/cli@latest run-windows --no-autolink --no-deploy
54+
```
55+
56+
## Sample Projects
57+
58+
### Calculator
59+
- **Location**: `samples/Calculator/`
60+
- **Implementations**:
61+
- `cppwinrt/` - C++/WinRT implementation
62+
- `csharp/` - C# implementation
63+
- `fabric/` - New Architecture (Fabric) implementation
64+
- **Purpose**: Demonstrates basic RNW app structure and platform-specific implementations
65+
66+
### NativeModuleSample
67+
- **Location**: `samples/NativeModuleSample/`
68+
- **Purpose**: Shows how to create native modules and components
69+
- **Key Features**: C++ native module examples, platform-specific APIs
70+
71+
### ContinuousIntegration
72+
- **Location**: `samples/ContinuousIntegration/`
73+
- **Purpose**: Provides CI/CD pipeline templates for different RNW versions
74+
- **Includes**: GitHub Actions workflows, Azure DevOps pipelines
75+
76+
## Build System
77+
78+
### GitHub Actions Workflows
79+
- **CI (ci.yml)**: Builds all samples across platforms weekly
80+
- **CI Upgrade (ci-upgrade.yml)**: Tests sample upgrades
81+
- **PR (pr.yml)**: Validates pull request changes
82+
- **Website Publish**: Deploys documentation website
83+
84+
### Build Matrix
85+
- **Configurations**: Debug, Release
86+
- **Platforms**: x86, x64, ARM64
87+
- **Sample Types**: Apps, Native Modules
88+
89+
## Code Patterns and Conventions
90+
91+
### File Structure (Typical RNW Project)
92+
```
93+
├── android/ # Android platform files
94+
├── ios/ # iOS platform files
95+
├── windows/ # Windows platform files
96+
├── App.tsx # Main app component
97+
├── index.js # Entry point
98+
├── package.json # Dependencies and scripts
99+
├── metro.config.js # Metro bundler configuration
100+
└── tsconfig.json # TypeScript configuration
101+
```
102+
103+
### Naming Conventions
104+
- Sample folders: PascalCase (e.g., `Calculator`, `NativeModuleSample`)
105+
- Implementation subfolders: lowercase (e.g., `cppwinrt`, `csharp`, `fabric`)
106+
- React components: PascalCase with `.tsx` extension
107+
- Native files: Follow platform conventions (C++: `.cpp/.h`, C#: `.cs`)
108+
109+
### Code Style
110+
- **TypeScript/JavaScript**: Use ESLint and Prettier configurations from sample projects
111+
- **C++**: Follow Microsoft C++ coding standards
112+
- **C#**: Follow .NET coding conventions
113+
- **Indentation**: 2 spaces for JS/TS, 4 spaces for C++/C#
114+
115+
## Testing Approach
116+
117+
### JavaScript/TypeScript Testing
118+
- **Framework**: Jest with React Native testing utilities
119+
- **Location**: `__tests__/` directories in each sample
120+
- **Run**: `npm test` or `yarn test`
121+
122+
### Native Code Testing
123+
- Follow platform-specific testing practices
124+
- Integration tests through React Native bridge
125+
- Manual testing via sample applications
126+
127+
## Common Development Tasks
128+
129+
### Adding a New Sample
130+
1. Create folder in `samples/` with PascalCase name
131+
2. Include implementations in subfolders (cppwinrt, csharp, etc.)
132+
3. Add README.md with setup/run instructions
133+
4. Update root README.md sample table
134+
5. Add to CI workflows if appropriate
135+
136+
### Upgrading Samples
137+
1. Update React Native and RNW versions in package.json
138+
2. Run `npx @react-native-community/cli@latest init --template react-native@latest`
139+
3. Merge changes carefully, preserving sample-specific code
140+
4. Test across all supported platforms
141+
5. Update documentation
142+
143+
### Working with Native Code
144+
- **C++/WinRT**: Use Visual Studio for IntelliSense and debugging
145+
- **C#**: Leverage Visual Studio's C# tools
146+
- **Bridge Integration**: Test JS-native communication thoroughly
147+
- **Platform APIs**: Reference WinRT documentation for Windows-specific features
148+
149+
## Documentation
150+
151+
- **Main docs**: `docs/` directory and website
152+
- **Sample docs**: Individual README.md files
153+
- **API references**: Link to main RNW repository docs
154+
- **Contributing**: See CONTRIBUTING.md for guidelines
155+
156+
## Troubleshooting Common Issues
157+
158+
### Build Failures
159+
- Ensure Windows SDK and Visual Studio components are installed
160+
- Check React Native and RNW version compatibility
161+
- Verify platform target (x86/x64/ARM64) matches your system
162+
- Clear Metro cache: `npx react-native start --reset-cache`
163+
164+
### Metro Bundle Issues
165+
- Check metro.config.js configuration
166+
- Ensure all dependencies are properly installed
167+
- Restart Metro server with cache reset
168+
169+
### Native Module Loading
170+
- Verify module registration in native code
171+
- Check autolink configuration
172+
- Ensure proper export from native modules
173+
174+
## Best Practices for Contributors
175+
176+
1. **Follow existing patterns**: Match the structure and style of existing samples
177+
2. **Cross-platform compatibility**: Test on multiple platforms when applicable
178+
3. **Documentation**: Include clear README files and inline comments
179+
4. **Dependencies**: Use stable, widely-supported packages
180+
5. **Performance**: Consider Windows-specific performance implications
181+
6. **Accessibility**: Follow Windows accessibility guidelines
182+
7. **Testing**: Include both unit tests and integration examples
183+
184+
## Related Resources
185+
186+
- [React Native Windows Documentation](https://microsoft.github.io/react-native-windows/)
187+
- [React Native Windows GitHub](https://github.com/microsoft/react-native-windows)
188+
- [React Native for macOS](https://github.com/microsoft/react-native-macos)
189+
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)

0 commit comments

Comments
 (0)