From 3945e7a385ea62a40ec9a422ed55dcab5377d700 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Wed, 12 Jun 2019 13:38:31 +0000 Subject: [PATCH] Deploy website Deploy website version based on 660aed007f3622e4ed053fcbda0179a55d872034 --- .../12/react-native-open-source-update.html | 2 +- .../index.html | 2 +- blog/index.html | 2 +- docs/next/flexbox.html | 86 ++++++++++++++++++- docs/next/flexbox/index.html | 86 ++++++++++++++++++- 5 files changed, 169 insertions(+), 9 deletions(-) diff --git a/blog/2019/06/12/react-native-open-source-update.html b/blog/2019/06/12/react-native-open-source-update.html index 0cb590603bc..da98aa53ad8 100644 --- a/blog/2019/06/12/react-native-open-source-update.html +++ b/blog/2019/06/12/react-native-open-source-update.html @@ -93,7 +93,7 @@

Lean Core

The primary motivation of Lean Core has been to split modules out of React Native into separate repositories so they can receive better maintenance. In just a six months repositories like WebView, NetInfo, AsyncStorage, the website and the CLI received more than 800 Pull Requests combined. Besides better maintenance, these projects can also be independently released more often than React Native itself.

-

We have also taken the opportunity to remove obsolete polyfills and legacy components from React Native itself. Polyfills were necessary in the past to support language features like [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) in older versions of JavaScriptCore (JSC). Now that React Native ships with a new version, these polyfills were removed.

+

We have also taken the opportunity to remove obsolete polyfills and legacy components from React Native itself. Polyfills were necessary in the past to support language features like Map and Set in older versions of JavaScriptCore (JSC). Now that React Native ships with a new version, these polyfills were removed.

This work is still in progress and many more things still need to be split out or removed both on the native and JavaScript side but there are early signs that we managed to reverse the trend of increasing the surface area and app size: When looking at the JavaScript bundle for example, about a year ago in version 0.54 the React Native JavaScript bundle size was 530kb and grew to 607kb (+77kb) by version 0.57 in just 6 months. Now we are seeing a bundle size reduction of 28kb down to 579kb on master, a delta of more than 100kb!

As we conclude the first iteration of the Lean Core effort, we will make an effort to be more intentional about new APIs added to React Native and we will continuously evaluate ways to make React Native smaller and faster, as well as finding ways to empower the community to take ownership of various components.

User Feedback

diff --git a/blog/2019/06/12/react-native-open-source-update/index.html b/blog/2019/06/12/react-native-open-source-update/index.html index 0cb590603bc..da98aa53ad8 100644 --- a/blog/2019/06/12/react-native-open-source-update/index.html +++ b/blog/2019/06/12/react-native-open-source-update/index.html @@ -93,7 +93,7 @@

Lean Core

The primary motivation of Lean Core has been to split modules out of React Native into separate repositories so they can receive better maintenance. In just a six months repositories like WebView, NetInfo, AsyncStorage, the website and the CLI received more than 800 Pull Requests combined. Besides better maintenance, these projects can also be independently released more often than React Native itself.

-

We have also taken the opportunity to remove obsolete polyfills and legacy components from React Native itself. Polyfills were necessary in the past to support language features like [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) in older versions of JavaScriptCore (JSC). Now that React Native ships with a new version, these polyfills were removed.

+

We have also taken the opportunity to remove obsolete polyfills and legacy components from React Native itself. Polyfills were necessary in the past to support language features like Map and Set in older versions of JavaScriptCore (JSC). Now that React Native ships with a new version, these polyfills were removed.

This work is still in progress and many more things still need to be split out or removed both on the native and JavaScript side but there are early signs that we managed to reverse the trend of increasing the surface area and app size: When looking at the JavaScript bundle for example, about a year ago in version 0.54 the React Native JavaScript bundle size was 530kb and grew to 607kb (+77kb) by version 0.57 in just 6 months. Now we are seeing a bundle size reduction of 28kb down to 579kb on master, a delta of more than 100kb!

As we conclude the first iteration of the Lean Core effort, we will make an effort to be more intentional about new APIs added to React Native and we will continuously evaluate ways to make React Native smaller and faster, as well as finding ways to empower the community to take ownership of various components.

User Feedback

diff --git a/blog/index.html b/blog/index.html index 0f92fefe3ce..1b07f558b60 100644 --- a/blog/index.html +++ b/blog/index.html @@ -93,7 +93,7 @@

Lean Core

The primary motivation of Lean Core has been to split modules out of React Native into separate repositories so they can receive better maintenance. In just a six months repositories like WebView, NetInfo, AsyncStorage, the website and the CLI received more than 800 Pull Requests combined. Besides better maintenance, these projects can also be independently released more often than React Native itself.

-

We have also taken the opportunity to remove obsolete polyfills and legacy components from React Native itself. Polyfills were necessary in the past to support language features like [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) in older versions of JavaScriptCore (JSC). Now that React Native ships with a new version, these polyfills were removed.

+

We have also taken the opportunity to remove obsolete polyfills and legacy components from React Native itself. Polyfills were necessary in the past to support language features like Map and Set in older versions of JavaScriptCore (JSC). Now that React Native ships with a new version, these polyfills were removed.

This work is still in progress and many more things still need to be split out or removed both on the native and JavaScript side but there are early signs that we managed to reverse the trend of increasing the surface area and app size: When looking at the JavaScript bundle for example, about a year ago in version 0.54 the React Native JavaScript bundle size was 530kb and grew to 607kb (+77kb) by version 0.57 in just 6 months. Now we are seeing a bundle size reduction of 28kb down to 579kb on master, a delta of more than 100kb!

As we conclude the first iteration of the Lean Core effort, we will make an effort to be more intentional about new APIs added to React Native and we will continuously evaluate ways to make React Native smaller and faster, as well as finding ways to empower the community to take ownership of various components.

User Feedback

diff --git a/docs/next/flexbox.html b/docs/next/flexbox.html index d05adcfd7ea..5d41f508243 100644 --- a/docs/next/flexbox.html +++ b/docs/next/flexbox.html @@ -75,8 +75,19 @@

Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.

+

Flex

+

flex will define how your items are going to “fill” over the available space along your main axis. Space will be divided according to each element's flex property.

+

In the following example the red, yellow and the green views are all children in the container view that have flex: 1 set. The red view uses flex: 1 , the yellow view uses flex: 2 and the green view uses flex: 3 . 1+2+3 = 6 which means that the red view will get 1/6 of the space, the yellow 2/6 of the space and the red 3/6 of the space.

+

Flex

Flex Direction

-

Adding flexDirection to a component's style determines the primary axis of its layout. Should the children be organized horizontally (row) or vertically (column)? The default is column.

+

flexDirection controls the direction in which children of a node are laid out. This is also referred to as the main axis. The cross axis the the axis perpendicular to the main axis, or the axis which wrapping lines are laid out in.

+ +

LEARN MORE HERE

import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
@@ -97,8 +108,23 @@
 AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);
+

Flex Direction

+

Layout Direction

+

Layout direction specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge start and end refer to. By default React Native lays out with LTR layout direction. In this mode start refers to left and end refers to right.

+

Justify Content

-

Adding justifyContent to a component's style determines the distribution of children along the primary axis. Should children be distributed at the start, the center, the end, or spaced evenly? Available options are flex-start, center, flex-end, space-around, space-between and space-evenly.

+

justifyContent describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with flexDirection set to row or vertically within a container with flexDirection set to column.

+ +

LEARN MORE HERE

import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
@@ -124,11 +150,20 @@ AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);
 AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
+

Justify Content

Align Items

-

Adding alignItems to a component's style determines the alignment of children along the secondary axis (if the primary axis is row, then the secondary is column, and vice versa). Should children be aligned at the start, the center, the end, or stretched to fill? Available options are flex-start, center, flex-end, and stretch.

+

alignItems describes how to align children along the cross axis of their container. Align items is very similar to justifyContent but instead of applying to the main axis, alignItems applies to the cross axis.

+

For stretch to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting alignItems: stretch does nothing until the width: 50 is removed from the children.

+

LEARN MORE HERE

import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
@@ -156,9 +191,54 @@ AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
 AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
+

Align Items

+

Align Self

+

alignSelf has the same options and effect as alignItems but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. alignSelf overrides any option set by the parent with aligItems.

+

Align Self

+

Align Content

+

alignContent defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using flexWrap.

+ +

LEARN MORE HERE

+

Align Content

+

Flex Wrap

+

The flexWrap property is set on containers and controls what happens when children overflow the size of the container along the main axis. By default children are forced into a single line (which can shrink elements). +If wrapping is allowed items are wrapped into multiple lines along the main axis if needed.

+

When wrapping lines alignContent can be used to specify how the lines are placed in the container. learn more [here]

+

Flex Wrap

+

Flex Basis, Grow, and Shrink

+ +

LEARN MORE HERE

+

Width and Height

+

The width property in Yoga specifies the width of the element's content area. Similarly height property specifies the height of the element's content area.

+

Both width and height can take following values:

+ +

Absolute & Relative Layout

+

The position type of an element defines how it is positioned within its parent.

+

relative (default value) By default an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of top, right, bottom, and left. The offset does not affect the position of any sibling or parent elements.

+

absolute When positioned absolutely an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the top, right, bottom, and left values.

+

Absolute & Relative Layoutp

Going Deeper

+

Check out the interactive yoga playground that you can use to get a better understanding of flexbox.

We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented here.

We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to learn how to handle text input with the TextInput component.

+

See some examples from Wix Engineers:

← Height and WidthHandling Text Input →