Skip to content

Commit 0193148

Browse files
qmatteoqqmatteoq
committed
2 parents e77fb12 + ded0d34 commit 0193148

File tree

155 files changed

+22979
-3
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

155 files changed

+22979
-3
lines changed

‎README.md‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,15 @@
1-
# samples-and-templates
2-
A place for RN4W-focused samples and template to live
1+
# React Native Samples and Templates
2+
This repository is a companion to the [React Native for Windows](https://github.com/microsoft/react-native-windows) repo and features sample React Native apps, components, and templates.
3+
4+
## Contributions
5+
We welcome your contributions and suggestions! Most contributions require you to agree to a
6+
Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
7+
the rights to use your contribution. For details, visit https://cla.microsoft.com.
8+
9+
When you submit a pull request, a CLA-bot will automatically determine whether you need to provide
10+
a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions
11+
provided by the bot. You will only need to do this once across all repos using our CLA.
12+
13+
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
14+
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
15+
contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.

‎docs/_config.yml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
theme: jekyll-theme-cayman
2+
title: React Native for Windows
3+
description: Build native Windows apps with Javascript and React.
4+
main_url: https://microsoft.github.io/react-native-windows-samples/
5+
blog_url: https://microsoft.github.io/react-native-windows-samples/blog/Roadmap2019
6+
samples_url: https://github.com/microsoft/react-native-windows-samples/tree/master/samples
7+
npmpackage_url: https://www.npmjs.com/package/react-native-windows
8+
github_url: https://github.com/microsoft/react-native-windows
9+
docs_url: https://github.com/microsoft/react-native-windows/tree/master/vnext/docs

‎docs/_layouts/default.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html lang="{{ site.lang | default: "en-US" }}">
3+
4+
<head>
5+
6+
{% if site.google_analytics %}
7+
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
8+
<script>
9+
window.dataLayer = window.dataLayer || [];
10+
function gtag() { dataLayer.push(arguments); }
11+
gtag('js', new Date());
12+
gtag('config', '{{ site.google_analytics }}');
13+
</script>
14+
{% endif %}
15+
<meta charset="UTF-8">
16+
17+
{% seo %}
18+
<meta name="viewport" content="width=device-width, initial-scale=1">
19+
<meta name="theme-color" content="#157878">
20+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
21+
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
22+
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
23+
24+
</head>
25+
26+
<body>
27+
<div class="topnav">
28+
<div class="twocolumn">
29+
<a href="{{ site.main_url }}">React Native for Windows</a>
30+
<a href="{{ site.npmpackage_url }}">v0.60</a>
31+
</div>
32+
<div class="twocolumn" align="right">
33+
<a href="{{ site.github_url }}">Github</a>
34+
<a href="{{ site.docs_url }}">Docs</a>
35+
<a href="{{ site.blog_url}}">Blog</a>
36+
<a href="{{ site.samples_url}}">Samples</a>
37+
</div>
38+
</div>
39+
{% if page.is_blog %}
40+
{% else %}
41+
<header class="page-header">
42+
<h1 class="project-name">{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
43+
<h2 class="project-tagline">
44+
{{ page.description | default: site.description | default: site.github.project_tagline }}</h2>
45+
</header>
46+
{% endif %}
47+
48+
<main id="content" class="main-content" role="main">
49+
{% if page.is_blog %}
50+
<!-- Side navigation -->
51+
<div class="row">
52+
<div class="sidenav">
53+
<!-- Add a line item for new blogs -->
54+
<a href="July2019Updates">July 2019 updates</a>
55+
<a href="Roadmap2019">Roadmap for vnext</a>
56+
</div>
57+
<!-- Page content -->
58+
<div class="blog-container">
59+
<h1 class="project-name">{{ page.title }}</h1>
60+
<h4>{{ page.description }}</h4>
61+
<h4>{{ page.published_date }}</h4>
62+
{{ content }}
63+
</div>
64+
</div>
65+
66+
{% else %}
67+
<!-- Non blog content -->
68+
{{ content }}
69+
{% endif %}
70+
71+
72+
</main>
73+
<footer class="site-footer">
74+
<div class="row" align="center">
75+
<div class="threecolumn" align="left">
76+
<h4>React Native Docs</h4>
77+
<ul style="list-style-type:none;">
78+
<li><a href="https://facebook.github.io/react-native/docs/getting-started.html">Getting Started</a>
79+
</li>
80+
<li><a href="https://facebook.github.io/react-native/docs/tutorial.html">Tutorial</a></li>
81+
<li><a href="https://facebook.github.io/react-native/docs/components-and-apis.html">Components and
82+
APIs</a></li>
83+
<li><a href="https://facebook.github.io/react-native/docs/more-resources.html">More resources</a>
84+
</li>
85+
</ul>
86+
</div>
87+
<div class="threecolumn" align="left">
88+
<h4>React Native for Windows Docs</h4>
89+
<ul style="list-style-type:none;">
90+
<li><a
91+
href="https://github.com/microsoft/react-native-windows/blob/master/vnext/docs/GettingStarted.md">Getting
92+
Started</a></li>
93+
<li><a
94+
href="https://github.com/microsoft/react-native-windows/blob/master/vnext/docs/ParityStatus.md">API
95+
parity with React Native</a></li>
96+
<li><a
97+
href="https://github.com/microsoft/react-native-windows/blob/master/vnext/docs/NativeModules.md">Native
98+
Modules</a></li>
99+
<li><a
100+
href="https://github.com/microsoft/react-native-windows/blob/master/vnext/docs/ViewManagers.md">Native
101+
UI Components</a></li>
102+
<li><a
103+
href="https://github.com/microsoft/react-native-windows/blob/master/vnext/docs/windowsbrushandtheme.md">Using
104+
Windows Brushes and Themes</a></li>
105+
<li><a href="https://github.com/microsoft/react-native-windows/tree/master/vnext/docs">More
106+
resources</a></li>
107+
</ul>
108+
</div>
109+
<div class="threecolumn" align="left">
110+
<h4>More resources</h4>
111+
<ul style="list-style-type:none;">
112+
<li><a href="https://twitter.com/ReactWindows">@ReactWindows Twitter</a></li>
113+
<li><a href="https://github.com/microsoft/react-native-windows">Github</a></li>
114+
<li><a href="{{ site.blog_url}}">Blog</a></li>
115+
<li><a href="{{ site.samples_url}}">Samples</a>
116+
</li>
117+
</ul>
118+
</div>
119+
120+
</div>
121+
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub
122+
Pages</a>.</span>
123+
124+
</footer>
125+
</body>
126+
127+
</html>

‎docs/assets/css/style.scss‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
---
3+
4+
@import "{{ site.theme }}";
5+
6+
.row {
7+
display: flex;
8+
flex-direction: row;
9+
}
10+
.twocolumn {
11+
flex: 50%;
12+
}
13+
.threecolumn {
14+
flex: 33%;
15+
padding-left: 50px;
16+
}
17+
18+
19+
div {margin: 4px; padding: 4px;}
20+
21+
.page-header {
22+
padding-top: 150px;
23+
padding-bottom: 4px;
24+
margin: 0px;
25+
color: #61dafb;
26+
text-align: center;
27+
background-color: #282c34;
28+
background-image: none;
29+
display: block;
30+
}
31+
32+
/* Add a black background color to the top navigation */
33+
.topnav {
34+
display: flex;
35+
background-color: #20232a;
36+
overflow: hidden;
37+
position: fixed;
38+
width: 100%;
39+
margin: 0px;
40+
}
41+
42+
/* Style the links inside the navigation bar */
43+
.topnav a {
44+
color: #f7f7f7;
45+
text-align: center;
46+
padding: 14px 16px;
47+
text-decoration: none;
48+
}
49+
50+
/* Change the color of links on hover */
51+
.topnav a:hover {
52+
color: #61dafb;
53+
}
54+
55+
56+
/* The sidebar menu */
57+
.sidenav {
58+
// height: 100%; /* Full-height: remove this if you want "auto" height */
59+
width: 250px;
60+
// flex: 20%; /* Set the width of the sidebar */
61+
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
62+
// z-index: 1; /* Stay on top */
63+
left: 0;
64+
top: 100px;
65+
// overflow-x: hidden; /* Disable horizontal scroll */
66+
}
67+
68+
/* The navigation menu links */
69+
.sidenav a {
70+
padding: 6px;
71+
text-decoration: none;
72+
color: #1a1a1a;
73+
display: block;
74+
}
75+
76+
/* When you mouse over the navigation links, change their color */
77+
.sidenav a:hover {
78+
color: #6d6d6d;
79+
}
80+
81+
/* Style page content */
82+
.page-content {
83+
flex: auto;
84+
}
85+
86+
.btn { display: inline-block; margin-bottom: 1rem; color: #1a1a1a; background-color: #61dafb; transition: color 0.2s, background-color 0.2s; }
87+
.btn:hover { color: #1a1a1a; text-decoration: none; background-color: #ececec; }
88+
.btn + .btn { margin-left: 1rem; }
89+
@media screen and (min-width: 64em) { .btn { padding: 0.75rem 1rem; } }
90+
@media screen and (min-width: 42em) and (max-width: 64em) { .btn { padding: 0.6rem 0.9rem; font-size: 0.9rem; } }
91+
@media screen and (max-width: 42em) { .btn { display: block; width: 100%; padding: 0.75rem; font-size: 0.9rem; }
92+
.btn + .btn { margin-top: 1rem; margin-left: 0; } }
93+
94+
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
95+
@media screen and (max-height: 450px) {
96+
.sidenav a {font-size: 12px;}
97+
}
98+
99+
.blog-container {
100+
padding: 10px;
101+
}
102+
103+
104+
.twocolumn h1, .twocolumn h2, .blog-container h1, .blog-container h2, .blog-container h3, .blog-container h5, .blog-container h6 { margin-top: 2rem; margin-bottom: 1rem; font-weight: normal; color: #6d6d6d; }
105+
.blog-container h4 { margin: 2px; color: #6d6d6d; opacity: 0.7; }
106+
.site-footer { background-color: #282c34; color: #f7f7f7; padding:20px; }
107+
.main-content h2 { margin-top: 2rem; margin-bottom: 1rem; font-weight: bold; color: #6d6d6d; }

‎docs/blog/July2019Updates.md‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
title: "July 2019 Updates"
3+
description: "New features and other updates upon Milestone 2 completion"
4+
is_blog: true
5+
published_date: July 21, 2019
6+
---
7+
8+
Over the past couple of months and spread across several contributors from Microsoft, we have completed [Milestone 2](https://github.com/microsoft/react-native-windows/milestone/16) for React Native for Windows. This blog post covers the highlights of the release.
9+
10+
## Upgrade to support RN version 0.59
11+
12+
Both the `current` and `vnext` implementations of `react-native-windows` have been upgraded to support [React Native version 0.59](https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059). With this, you should be able to use the [React Hooks](https://reactjs.org/docs/hooks-intro.html) and all other goodness from the RN v0.59 update while targeting React Native for Windows.
13+
14+
*__Note__: You will need to explicitly specify the RN version number while initializing your project using the CLI to target React Native for Windows vnext like so*:
15+
```
16+
react-native init <project name> --version 0.59.10
17+
```
18+
Read the updated [Getting Started Guide for vNext](https://github.com/microsoft/react-native-windows/blob/master/vnext/docs/GettingStarted.md) for more details.
19+
20+
21+
## Updates to parity in high priority APIs
22+
23+
We are making steady progress in achieving parity of implementation of React Native APIs in alignment with the React Native [Lean Core effort](https://github.com/facebook/react-native/issues/23313). As part of Milestone 2 - we have completed implementations of all the P1 (must-have) APIs on lean core components such as `Text`, `TextInput`, `View`, `Image`, `ScrollView`, `FlatList` and `Switch` as well as modules such as `Accessibility`, `LayoutProps`, smooth animations using native drivers, animated transforms etc.,
24+
25+
![Animated Transforms](images/transforms.gif)
26+
27+
We are making steady progress in this workstream and will be investing more in [Milestone 3](https://github.com/microsoft/react-native-windows/milestone/17) with a goal to get to complete feature parity on lean-core components before EOY 2019. You can keep track of the progress here through the [Core Feature Parity project](https://github.com/microsoft/react-native-windows/projects/7) and [Parity Status doc](https://github.com/microsoft/react-native-windows/blob/master/vnext/docs/ParityStatus.md). We will also be working towards moving non lean-core components into a separate package in the upcoming months.
28+
29+
## NEW Features!
30+
31+
We have introduced several new features, including:
32+
1. **Keyboarding APIs** to enable keyboard and gamepad invocation scenarios with good default behaviors for JS components like `Button`. See [Proposal draft](https://github.com/ReactWindows/discussions-and-proposals/blob/harinikmsft-keyboardapis/proposals/0000-keyboard-apis.md) for more details.
33+
34+
*Example usage:*
35+
36+
```
37+
<View onKeyDown={this._onKeyDown} />
38+
39+
private _onKeyDown = (event: IKeyboardEvent) => {
40+
this.setState({ lastKeyDown: event.nativeEvent.key });
41+
};
42+
43+
```
44+
45+
2. New APIs for **handling theming and high contrast** scenarios through styles. See [Proposal comment](https://github.com/react-native-community/discussions-and-proposals/issues/126#issuecomment-500561803) for details.
46+
47+
*Example usage:*
48+
49+
```
50+
componentDidMount() {
51+
AppThemeState.currentTheme.addListener('themechanged', this.onAppThemeChanged);
52+
}
53+
54+
onAppThemeChanged = (event) => {
55+
/*Logic on theme changed goes here*/
56+
this.setState({appThemeState: AppThemeState.currentTheme});
57+
}
58+
59+
/* In render function */
60+
<TextInput
61+
style={[styles.inputStyle, this.state.appThemeState.currentTheme == 'dark' ? styles.darkInput : styles.lightInput]}
62+
</TextInput>
63+
```
64+
65+
3. New APIs for **better accessibility in lists**. See [Proposal](https://github.com/react-native-community/discussions-and-proposals/pull/146) for detailed documentation.
66+
67+
*Example usage:*
68+
69+
```
70+
<FlatList data={this.state.listdata}
71+
accessibilityRole="list"
72+
renderItem={({item}) =>
73+
<View accessibilityRole="listItem"
74+
accessibilitySetSize ={this.state.listdata.count}
75+
accessibilityPostInSet={item.id} >
76+
<Text>{item.name}</Text>
77+
</View>}
78+
</FlatList>
79+
```
80+
81+
 
82+
This marks the beginning of a journey where we actively will be contributing back to React Native and the wider community as almost all these APIs have been designed to be platform neutral/aligned with React programming model with a view to enhance the overall React Native API story for desktop and other targets. You can read about and participate in our proposals process [here](https://github.com/microsoft/react-native-windows/tree/master/vnext/proposals).
83+
84+
We are working on better documentation and samples for these new updates, stay tuned!
85+
86+
## Onboarding and developer experience
87+
88+
We have been steadily addressing onboarding issues with the CLI, VS 2019 toolchain etc., to ensure reliability of your development experience - **you can use VS 2019** to build React Native for Windows vNext projects. Thank you to those who have spun the wheels on this project so far and filed issues, please continue to report issues as you see them.
89+
90+
We are also happy to report that we have begun a collaboration with VS Code for adding [React Native extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native) support for React Native Windows. Through this extension, you will be able to debug your JS directly in VS Code without needing the Chrome debugger and several other useful tooling (including intellisense). We are in the early stages here, but since the work is happening in OSS, you can start trying this out using [these instructions](https://github.com/microsoft/react-native-windows/wiki/VS-Code-Debugging).
91+
92+
![VSCode JS Debugging](images/vscode.png)
93+
94+
95+
## Coming up next
96+
97+
We are tracking the next set of work for React Native for Windows through [Milestone 3](https://github.com/microsoft/react-native-windows/milestone/17) targeting a Fall 2019 ETA. The broad themes for Milestone 3 are:
98+
99+
- Upgrade to RN v0.60
100+
- Complete feature parity for all “lean-core” RN APIs
101+
- Native extensions developer story
102+
- More new features around mouse hover, styling JS components, custom tab navigation, directional focus etc.,
103+
- Improved developer experience, documentation and onboarding reliability
104+
- Strategic performance investments and test infrastructure bring up
105+
- React-Native-Windows targeting [WinUI 3.0](https://github.com/microsoft/microsoft-ui-xaml/blob/master/docs/roadmap.md#winui-3-q4-2019---2020).
106+
107+
Please see the [Roadmap 2019](Roadmap2019.md) blog for more details.

0 commit comments

Comments
 (0)