Updated docs for next

Author: reactjs-bot

releases/next/docs/flexbox.html

@@ -25,7 +25,7 @@
   <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
 
-AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">&#x27;PizzaTranslator&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> PizzaTranslator<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20TextInput%2C%20View%20%7D%20from%20&#x27;react-native&#x27;%3B%0A%0Aclass%20PizzaTranslator%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7Btext%3A%20&#x27;&#x27;%7D%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bpadding%3A%2010%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%7Bheight%3A%2040%7D%7D%0A%20%20%20%20%20%20%20%20%20%20placeholder%3D%22Type%20here%20to%20translate!%22%0A%20%20%20%20%20%20%20%20%20%20onChangeText%3D%7B(text)%20%3D%3E%20this.setState(%7Btext%7D)%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7Bpadding%3A%2010%2C%20fontSize%3A%2042%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.text.split(&#x27;%20&#x27;).map((word)%20%3D%3E%20word%20%26%26%20&#x27;%F0%9F%8D%95&#x27;).join(&#x27;%20&#x27;)%7D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent(&#x27;PizzaTranslator&#x27;%2C%20()%20%3D%3E%20PizzaTranslator)%3B" frameborder="0"></iframe></div><p>In this example, we store <code>text</code> in the state, because it changes over time.</p><p>There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the <a href="https://facebook.github.io/react/docs/forms.html" target="_blank">React docs on controlled components</a>, or the <a href="/react-native/docs/textinput.html" target="">reference docs for TextInput</a>.</p><p>Text input is probably the simplest example of a component whose state naturally changes over time. Next, let&#x27;s look at another type of component like this is one that controls layout, and <a href="/react-native/docs/using-a-scrollview.html" target="">learn about the ScrollView</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/using-a-scrollview.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
+AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">&#x27;PizzaTranslator&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> PizzaTranslator<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20TextInput%2C%20View%20%7D%20from%20&#x27;react-native&#x27;%3B%0A%0Aclass%20PizzaTranslator%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7Btext%3A%20&#x27;&#x27;%7D%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bpadding%3A%2010%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%7Bheight%3A%2040%7D%7D%0A%20%20%20%20%20%20%20%20%20%20placeholder%3D%22Type%20here%20to%20translate!%22%0A%20%20%20%20%20%20%20%20%20%20onChangeText%3D%7B(text)%20%3D%3E%20this.setState(%7Btext%7D)%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7Bpadding%3A%2010%2C%20fontSize%3A%2042%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.text.split(&#x27;%20&#x27;).map((word)%20%3D%3E%20word%20%26%26%20&#x27;%F0%9F%8D%95&#x27;).join(&#x27;%20&#x27;)%7D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent(&#x27;PizzaTranslator&#x27;%2C%20()%20%3D%3E%20PizzaTranslator)%3B" frameborder="0"></iframe></div><p>In this example, we store <code>text</code> in the state, because it changes over time.</p><p>There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the <a href="https://facebook.github.io/react/docs/forms.html" target="_blank">React docs on controlled components</a>, or the <a href="/react-native/docs/textinput.html" target="">reference docs for TextInput</a>.</p><p>Text input is probably the simplest example of a component whose state naturally changes over time. Next, let&#x27;s look at another type of component like this is one that controls layout, and <a href="/react-native/docs/using-a-scrollview.html" target="">learn about the ScrollView</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/using-a-scrollview.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
             (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
             m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

releases/next/docs/handling-text-input.html

@@ -13,7 +13,7 @@
   <span class="token punctuation">}</span>
 <span class="token punctuation">}</span><span class="token punctuation">;</span>
 
-AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">&#x27;AwesomeProject&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> FixedDimensionsBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20&#x27;react-native&#x27;%3B%0A%0Aclass%20FixedDimensionsBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20&#x27;powderblue&#x27;%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%20100%2C%20height%3A%20100%2C%20backgroundColor%3A%20&#x27;skyblue&#x27;%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%20150%2C%20height%3A%20150%2C%20backgroundColor%3A%20&#x27;steelblue&#x27;%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%3B%0A%0AAppRegistry.registerComponent(&#x27;AwesomeProject&#x27;%2C%20()%20%3D%3E%20FixedDimensionsBasics)%3B" frameborder="0"></iframe></div><p>Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.</p><h4><a class="anchor" name="flex-dimensions"></a>Flex Dimensions <a class="hash-link" href="docs/height-and-width.html#flex-dimensions">#</a></h4><p>Use <code>flex</code> in a component&#x27;s style to have the component expand and shrink dynamically based on available space. Normally you will use <code>flex: 1</code>, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the <code>flex</code> given, the higher the ratio of space a component will take compared to its siblings.</p><blockquote><p>A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed <code>width</code> and <code>height</code> or <code>flex</code>, the parent will have dimensions of 0 and the <code>flex</code> children will not be visible.</p></blockquote><div class="web-player"><div class="prism language-javascript">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> from <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
+AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">&#x27;AwesomeProject&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> FixedDimensionsBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20&#x27;react-native&#x27;%3B%0A%0Aclass%20FixedDimensionsBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20&#x27;powderblue&#x27;%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%20100%2C%20height%3A%20100%2C%20backgroundColor%3A%20&#x27;skyblue&#x27;%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%20150%2C%20height%3A%20150%2C%20backgroundColor%3A%20&#x27;steelblue&#x27;%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%3B%0A%0AAppRegistry.registerComponent(&#x27;AwesomeProject&#x27;%2C%20()%20%3D%3E%20FixedDimensionsBasics)%3B" frameborder="0"></iframe></div><p>Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.</p><h4><a class="anchor" name="flex-dimensions"></a>Flex Dimensions <a class="hash-link" href="docs/height-and-width.html#flex-dimensions">#</a></h4><p>Use <code>flex</code> in a component&#x27;s style to have the component expand and shrink dynamically based on available space. Normally you will use <code>flex: 1</code>, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the <code>flex</code> given, the higher the ratio of space a component will take compared to its siblings.</p><blockquote><p>A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed <code>width</code> and <code>height</code> or <code>flex</code>, the parent will have dimensions of 0 and the <code>flex</code> children will not be visible.</p></blockquote><div class="web-player"><div class="prism language-javascript">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> from <span class="token string">&#x27;react&#x27;</span><span class="token punctuation">;</span>
 import <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> View <span class="token punctuation">}</span> from <span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">;</span>
 
 class <span class="token class-name">FlexDimensionsBasics</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
@@ -31,7 +31,7 @@
   <span class="token punctuation">}</span>
 <span class="token punctuation">}</span><span class="token punctuation">;</span>
 
-AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">&#x27;AwesomeProject&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> FlexDimensionsBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.0.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20&#x27;react-native&#x27;%3B%0A%0Aclass%20FlexDimensionsBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20removing%20the%20%60flex%3A%201%60%20on%20the%20parent%20View.%0A%20%20%20%20%20%20%2F%2F%20The%20parent%20will%20not%20have%20dimensions%2C%20so%20the%20children%20can&#x27;t%20expand.%0A%20%20%20%20%20%20%2F%2F%20What%20if%20you%20add%20%60height%3A%20300%60%20instead%20of%20%60flex%3A%201%60%3F%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%2C%20backgroundColor%3A%20&#x27;powderblue&#x27;%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%202%2C%20backgroundColor%3A%20&#x27;skyblue&#x27;%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%203%2C%20backgroundColor%3A%20&#x27;steelblue&#x27;%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%3B%0A%0AAppRegistry.registerComponent(&#x27;AwesomeProject&#x27;%2C%20()%20%3D%3E%20FlexDimensionsBasics)%3B" frameborder="0"></iframe></div><p>After you can control a component&#x27;s size, the next step is to <a href="/react-native/docs/flexbox.html" target="">learn how to lay it out on the screen</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/flexbox.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
+AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">&#x27;AwesomeProject&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> FlexDimensionsBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//npmcdn.com/react-native-web-player@1.1.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20&#x27;react&#x27;%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20&#x27;react-native&#x27;%3B%0A%0Aclass%20FlexDimensionsBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20removing%20the%20%60flex%3A%201%60%20on%20the%20parent%20View.%0A%20%20%20%20%20%20%2F%2F%20The%20parent%20will%20not%20have%20dimensions%2C%20so%20the%20children%20can&#x27;t%20expand.%0A%20%20%20%20%20%20%2F%2F%20What%20if%20you%20add%20%60height%3A%20300%60%20instead%20of%20%60flex%3A%201%60%3F%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%2C%20backgroundColor%3A%20&#x27;powderblue&#x27;%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%202%2C%20backgroundColor%3A%20&#x27;skyblue&#x27;%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%203%2C%20backgroundColor%3A%20&#x27;steelblue&#x27;%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%3B%0A%0AAppRegistry.registerComponent(&#x27;AwesomeProject&#x27;%2C%20()%20%3D%3E%20FlexDimensionsBasics)%3B" frameborder="0"></iframe></div><p>After you can control a component&#x27;s size, the next step is to <a href="/react-native/docs/flexbox.html" target="">learn how to lay it out on the screen</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/flexbox.html#content">Next →</a></div><div class="survey"><div class="survey-image"></div><p>Recently, we have been working hard to make the documentation better based on your feedback. Your responses to this yes/no style survey will help us gauge whether we moved in the right direction with the improvements. Thank you!</p><center><a class="button" href="https://www.facebook.com/survey?oid=516954245168428">Take Survey</a></center></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
             (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
             m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)