Updated docs for 0.20

2025-11-01 09:14:26 +00:00 · 2016-02-17 12:33:53 +00:00
parent c5a9d975ee
commit 999e6da76d
189 changed files with 267 additions and 267 deletions
@@ -38,7 +38,7 @@

 &lt;CustomRadioButton
  accessibleComponentType<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>radioButton<span class="token punctuation">}</span>
-  onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">&gt;</span></div><p>In the above example we&#x27;ve created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.</p><h2><a class="anchor" name="testing-voiceover-support-ios"></a>Testing VoiceOver Support (iOS) <a class="hash-link" href="#testing-voiceover-support-ios">#</a></h2><p>To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver.</p><p>To enable VoiceOver, tap on VoiceOver under &quot;Vision&quot; and toggle the switch that appears at the top.</p><p>At the very bottom of the Accessibility settings, there is an &quot;Accessibility Shortcut&quot;. You can use this to toggle VoiceOver by triple clicking the Home button.</p></div><div class="docs-prevnext"><a class="docs-next" href="direct-manipulation.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+  onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">&gt;</span></div><p>In the above example we&#x27;ve created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.</p><h2><a class="anchor" name="testing-voiceover-support-ios"></a>Testing VoiceOver Support (iOS) <a class="hash-link" href="#testing-voiceover-support-ios">#</a></h2><p>To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver.</p><p>To enable VoiceOver, tap on VoiceOver under &quot;Vision&quot; and toggle the switch that appears at the top.</p><p>At the very bottom of the Accessibility settings, there is an &quot;Accessibility Shortcut&quot;. You can use this to toggle VoiceOver by triple clicking the Home button.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/direct-manipulation.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -150,7 +150,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
    title<span class="token punctuation">:</span> <span class="token string">&#x27;Show Share Action Sheet&#x27;</span><span class="token punctuation">,</span>
    <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;ShareActionSheetExample <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
-<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="alert.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/alert.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -133,7 +133,7 @@ of a neutral, negative and a positive button:</p><ul><li>If you specify one butt
 module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  AlertExample<span class="token punctuation">,</span>
  SimpleAlertExampleBlock<span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="alertios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/alertios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -187,7 +187,7 @@ class <span class="token class-name">PromptOptions</span> extends <span class="t
    backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;#eeeeee&#x27;</span><span class="token punctuation">,</span>
    padding<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="animated.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="358" src="img/alertIOS.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/bypdk4jnjra5uwyj2kzd2aenv4?device=iphone5s&amp;scale=70&amp;autoplay=false&amp;orientation=portrait&amp;deviceColor=white&amp;params=%7B%22route%22%3A%22AlertIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/animated.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="358" src="img/alertIOS.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/bypdk4jnjra5uwyj2kzd2aenv4?device=iphone5s&amp;scale=70&amp;autoplay=false&amp;orientation=portrait&amp;deviceColor=white&amp;params=%7B%22route%22%3A%22AlertIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -28,7 +28,7 @@ dependencies <span class="token punctuation">{</span>
    rootProject<span class="token punctuation">.</span>allprojects <span class="token punctuation">{</span>
        buildDir <span class="token operator">=</span> <span class="token string">&quot;/path/to/build/directory/${rootProject.name}/${project.name}&quot;</span>
    <span class="token punctuation">}</span>
-<span class="token punctuation">}</span></div></div><div class="docs-prevnext"><a class="docs-next" href="activityindicatorios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/activityindicatorios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -339,7 +339,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
    borderRadius<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
    alignItems<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="appregistry.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/appregistry.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -366,7 +366,7 @@ make them customizable, React Native exposes a
    pop<span class="token punctuation">:</span> CustomLeftToRightGesture<span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p><a href="https://rnplay.org/apps/HPy6UA" target="_blank">Run this example</a></p><p>For further information about customizing scene transitions, <a href="https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js" target="_blank">read the
-source</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="accessibility.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+source</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/accessibility.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -6,7 +6,7 @@ for the app and then actually run the app when it&#x27;s ready by invoking
 <code>AppRegistry.unmountApplicationComponentAtRootTag</code> with the tag that was
 pass into <code>runApplication</code>. These should always be used as a pair.</p><p><code>AppRegistry</code> should be <code>require</code>d early in the <code>require</code> sequence to make
 sure the JS execution environment is setup before other modules are
-<code>require</code>d.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="registerconfig"></a><span class="propType">static </span>registerConfig<span class="propType">(config: Array&lt;AppConfig&gt;)</span> <a class="hash-link" href="#registerconfig">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="registercomponent"></a><span class="propType">static </span>registerComponent<span class="propType">(appKey: string, getComponentFunc: ComponentProvider)</span> <a class="hash-link" href="#registercomponent">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="registerrunnable"></a><span class="propType">static </span>registerRunnable<span class="propType">(appKey: string, func: Function)</span> <a class="hash-link" href="#registerrunnable">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getappkeys"></a><span class="propType">static </span>getAppKeys<span class="propType">()</span> <a class="hash-link" href="#getappkeys">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="runapplication"></a><span class="propType">static </span>runApplication<span class="propType">(appKey: string, appParameters: any)</span> <a class="hash-link" href="#runapplication">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="unmountapplicationcomponentatroottag"></a><span class="propType">static </span>unmountApplicationComponentAtRootTag<span class="propType">(rootTag: number)</span> <a class="hash-link" href="#unmountapplicationcomponentatroottag">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="appstateios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<code>require</code>d.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="registerconfig"></a><span class="propType">static </span>registerConfig<span class="propType">(config: Array&lt;AppConfig&gt;)</span> <a class="hash-link" href="#registerconfig">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="registercomponent"></a><span class="propType">static </span>registerComponent<span class="propType">(appKey: string, getComponentFunc: ComponentProvider)</span> <a class="hash-link" href="#registercomponent">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="registerrunnable"></a><span class="propType">static </span>registerRunnable<span class="propType">(appKey: string, func: Function)</span> <a class="hash-link" href="#registerrunnable">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getappkeys"></a><span class="propType">static </span>getAppKeys<span class="propType">()</span> <a class="hash-link" href="#getappkeys">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="runapplication"></a><span class="propType">static </span>runApplication<span class="propType">(appKey: string, appParameters: any)</span> <a class="hash-link" href="#runapplication">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="unmountapplicationcomponentatroottag"></a><span class="propType">static </span>unmountApplicationComponentAtRootTag<span class="propType">(rootTag: number)</span> <a class="hash-link" href="#unmountapplicationcomponentatroottag">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/appstateios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -89,7 +89,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
    title<span class="token punctuation">:</span> <span class="token string">&#x27;Previous states:&#x27;</span><span class="token punctuation">,</span>
    <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;AppStateSubscription showCurrentOnly<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="asyncstorage.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/asyncstorage.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -110,7 +110,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
    description<span class="token punctuation">:</span> <span class="token string">&#x27;In the simulator, hit Shift+Command+M to simulate a memory warning.&#x27;</span><span class="token punctuation">,</span>
    <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;AppStateSubscription showMemoryWarnings<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="appstate.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/appstate.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -114,7 +114,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
    title<span class="token punctuation">:</span> <span class="token string">&#x27;Basics - getItem, setItem, removeItem&#x27;</span><span class="token punctuation">,</span>
    <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;BasicStorageExample <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="backandroid.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/backandroid.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -5,7 +5,7 @@ functionality to exit the app if there are no listeners or if none of the listen
       <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
     <span class="token punctuation">}</span>
     <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="exitapp"></a><span class="propType">static </span>exitApp<span class="propType">()</span> <a class="hash-link" href="#exitapp">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="addeventlistener"></a><span class="propType">static </span>addEventListener<span class="propType">(eventName: BackPressEventName, handler: Function)</span> <a class="hash-link" href="#addeventlistener">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeeventlistener"></a><span class="propType">static </span>removeEventListener<span class="propType">(eventName: BackPressEventName, handler: Function)</span> <a class="hash-link" href="#removeeventlistener">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="cameraroll.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="exitapp"></a><span class="propType">static </span>exitApp<span class="propType">()</span> <a class="hash-link" href="#exitapp">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="addeventlistener"></a><span class="propType">static </span>addEventListener<span class="propType">(eventName: BackPressEventName, handler: Function)</span> <a class="hash-link" href="#addeventlistener">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeeventlistener"></a><span class="propType">static </span>removeEventListener<span class="propType">(eventName: BackPressEventName, handler: Function)</span> <a class="hash-link" href="#removeeventlistener">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/cameraroll.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -125,7 +125,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
    title<span class="token punctuation">:</span> <span class="token string">&#x27;Photos&#x27;</span><span class="token punctuation">,</span>
    <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;CameraRollExample <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
-<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="dimensions.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/dimensions.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -73,7 +73,7 @@ Making a dimension flexible in both JS and native leads to undefined behavior. F
  newFrame<span class="token punctuation">.</span>size <span class="token operator">=</span> rootView<span class="token punctuation">.</span>intrinsicSize<span class="token punctuation">;</span>

  rootView<span class="token punctuation">.</span>frame <span class="token operator">=</span> newFrame<span class="token punctuation">;</span>
-<span class="token punctuation">}</span></div><p>In the example we have a <code>FlexibleSizeExampleView</code> view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view&#x27;s size flexibility to <code>RCTRootViewSizeFlexibilityHeight</code>, which means that <code>rootViewDidChangeIntrinsicSize:</code> method will be called every time the React Native content changes its height. Finally, we set the root view&#x27;s width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.</p><p>You can checkout full source code of the example <a href="https://phabricator.fb.com/diffusion/FBOBJC/browse/master/Libraries/FBReactKit/js/react-native-github/Examples/UIExplorer/UIExplorer/NativeExampleViews/FlexibleSizeExampleView.m" target="_blank">here</a>.</p><p>It&#x27;s fine to change root view&#x27;s size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate <code>rootViewDidChangeIntrinsicSize:</code> method will be called once the content size is known.</p><blockquote><p><strong><em>Note:</em></strong> React Native layout calculation is performed on a special thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.</p><p><strong><em>Note:</em></strong> React Native does not perform any layout calculations until the root view becomes a subview of some other views. If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use <code>UIView</code>&#x27;s <code>hidden</code> property). Then change its visibility in the delegate method.</p></blockquote></div><div class="docs-prevnext"><a class="docs-next" href="native-modules-android.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span></div><p>In the example we have a <code>FlexibleSizeExampleView</code> view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view&#x27;s size flexibility to <code>RCTRootViewSizeFlexibilityHeight</code>, which means that <code>rootViewDidChangeIntrinsicSize:</code> method will be called every time the React Native content changes its height. Finally, we set the root view&#x27;s width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.</p><p>You can checkout full source code of the example <a href="https://phabricator.fb.com/diffusion/FBOBJC/browse/master/Libraries/FBReactKit/js/react-native-github/Examples/UIExplorer/UIExplorer/NativeExampleViews/FlexibleSizeExampleView.m" target="_blank">here</a>.</p><p>It&#x27;s fine to change root view&#x27;s size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate <code>rootViewDidChangeIntrinsicSize:</code> method will be called once the content size is known.</p><blockquote><p><strong><em>Note:</em></strong> React Native layout calculation is performed on a special thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.</p><p><strong><em>Note:</em></strong> React Native does not perform any layout calculations until the root view becomes a subview of some other views. If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use <code>UIView</code>&#x27;s <code>hidden</code> property). Then change its visibility in the delegate method.</p></blockquote></div><div class="docs-prevnext"><a class="docs-next" href="docs/native-modules-android.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -2,7 +2,7 @@
 a controlled component, so you must hook in to the <code>onDateChange</code> callback
 and update the <code>date</code> prop in order for the component to update, otherwise
 the user&#x27;s change will be reverted immediately to reflect <code>props.date</code> as the
-source of truth.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="date"></a>date <span class="propType">Date</span> <a class="hash-link" href="#date">#</a></h4><div><p>The currently selected date.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumdate"></a>maximumDate <span class="propType">Date</span> <a class="hash-link" href="#maximumdate">#</a></h4><div><p>Maximum date.</p><p>Restricts the range of possible date/time values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumdate"></a>minimumDate <span class="propType">Date</span> <a class="hash-link" href="#minimumdate">#</a></h4><div><p>Minimum date.</p><p>Restricts the range of possible date/time values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minuteinterval"></a>minuteInterval <span class="propType">enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)</span> <a class="hash-link" href="#minuteinterval">#</a></h4><div><p>The interval at which minutes can be selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mode"></a>mode <span class="propType">enum(&#x27;date&#x27;, &#x27;time&#x27;, &#x27;datetime&#x27;)</span> <a class="hash-link" href="#mode">#</a></h4><div><p>The date picker mode.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondatechange"></a>onDateChange <span class="propType">function</span> <a class="hash-link" href="#ondatechange">#</a></h4><div><p>Date change handler.</p><p>This is called when the user changes the date or time in the UI.
+source of truth.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="date"></a>date <span class="propType">Date</span> <a class="hash-link" href="#date">#</a></h4><div><p>The currently selected date.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumdate"></a>maximumDate <span class="propType">Date</span> <a class="hash-link" href="#maximumdate">#</a></h4><div><p>Maximum date.</p><p>Restricts the range of possible date/time values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumdate"></a>minimumDate <span class="propType">Date</span> <a class="hash-link" href="#minimumdate">#</a></h4><div><p>Minimum date.</p><p>Restricts the range of possible date/time values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minuteinterval"></a>minuteInterval <span class="propType">enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)</span> <a class="hash-link" href="#minuteinterval">#</a></h4><div><p>The interval at which minutes can be selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mode"></a>mode <span class="propType">enum(&#x27;date&#x27;, &#x27;time&#x27;, &#x27;datetime&#x27;)</span> <a class="hash-link" href="#mode">#</a></h4><div><p>The date picker mode.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondatechange"></a>onDateChange <span class="propType">function</span> <a class="hash-link" href="#ondatechange">#</a></h4><div><p>Date change handler.</p><p>This is called when the user changes the date or time in the UI.
 The first and only argument is a Date object representing the new
 date and time.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="timezoneoffsetinminutes"></a>timeZoneOffsetInMinutes <span class="propType">number</span> <a class="hash-link" href="#timezoneoffsetinminutes">#</a></h4><div><p>Timezone offset in minutes.</p><p>By default, the date picker will use the device&#x27;s timezone. With this
 parameter, it is possible to force a certain timezone offset. For
@@ -158,7 +158,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
    fontWeight<span class="token punctuation">:</span> <span class="token string">&#x27;500&#x27;</span><span class="token punctuation">,</span>
    fontSize<span class="token punctuation">:</span> <span class="token number">14</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="drawerlayoutandroid.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/drawerlayoutandroid.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -4,7 +4,7 @@ due to device rotation) so any rendering logic or styles that depend on
 these constants should try to call this function on every render, rather
 than caching the value (for example, using inline styles rather than
 setting a value in a <code>StyleSheet</code>).</p><p>Example: <code>var {height, width} = Dimensions.get(&#x27;window&#x27;);</code></p><p>@param {string} dim Name of dimension as defined when calling <code>set</code>.
-@returns {Object?} Value for the dimension.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="intentandroid.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+@returns {Object?} Value for the dimension.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/intentandroid.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -130,7 +130,7 @@ the jerky animation each 250ms when <code>setState</code> triggers a re-render.<
 <code>shouldComponentUpdate</code></a>
 you can avoid the unnecessary overhead involved in reconciling unchanged
 component subtrees, to the point where it may be performant enough to
-use <code>setState</code> instead of <code>setNativeProps</code>.</p></div><div class="docs-prevnext"><a class="docs-next" href="debugging.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+use <code>setState</code> instead of <code>setNativeProps</code>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/debugging.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -20,14 +20,14 @@ be set by the <code>drawerWidth</code> prop.</p><p>Example:</p><div class="prism
      &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>DrawerLayoutAndroid<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerposition"></a>drawerPosition <span class="propType">enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right)</span> <a class="hash-link" href="#drawerposition">#</a></h4><div><p>Specifies the side of the screen from which the drawer will slide in.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerwidth"></a>drawerWidth <span class="propType">number</span> <a class="hash-link" href="#drawerwidth">#</a></h4><div><p>Specifies the width of the drawer, more precisely the width of the view that be pulled in
+<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerposition"></a>drawerPosition <span class="propType">enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right)</span> <a class="hash-link" href="#drawerposition">#</a></h4><div><p>Specifies the side of the screen from which the drawer will slide in.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerwidth"></a>drawerWidth <span class="propType">number</span> <a class="hash-link" href="#drawerwidth">#</a></h4><div><p>Specifies the width of the drawer, more precisely the width of the view that be pulled in
 from the edge of the window.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboarddismissmode"></a>keyboardDismissMode <span class="propType">enum(&#x27;none&#x27;, &#x27;on-drag&#x27;)</span> <a class="hash-link" href="#keyboarddismissmode">#</a></h4><div><p>Determines whether the keyboard gets dismissed in response to a drag.
  - &#x27;none&#x27; (the default), drags do not dismiss the keyboard.
  - &#x27;on-drag&#x27;, the keyboard is dismissed when a drag begins.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerclose"></a>onDrawerClose <span class="propType">function</span> <a class="hash-link" href="#ondrawerclose">#</a></h4><div><p>Function called whenever the navigation view has been closed.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondraweropen"></a>onDrawerOpen <span class="propType">function</span> <a class="hash-link" href="#ondraweropen">#</a></h4><div><p>Function called whenever the navigation view has been opened.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerslide"></a>onDrawerSlide <span class="propType">function</span> <a class="hash-link" href="#ondrawerslide">#</a></h4><div><p>Function called whenever there is an interaction with the navigation view.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerstatechanged"></a>onDrawerStateChanged <span class="propType">function</span> <a class="hash-link" href="#ondrawerstatechanged">#</a></h4><div><p>Function called when the drawer state has changed. The drawer can be in 3 states:
 - idle, meaning there is no interaction with the navigation view happening at the time
 - dragging, meaning there is currently an interaction with the navigation view
 - settling, meaning that there was an interaction with the navigation view, and the
-navigation view is now finishing it&#x27;s closing or opening animation</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendernavigationview"></a>renderNavigationView <span class="propType">function</span> <a class="hash-link" href="#rendernavigationview">#</a></h4><div><p>The navigation view that will be rendered to the side of the screen and can be pulled in.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="image.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+navigation view is now finishing it&#x27;s closing or opening animation</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendernavigationview"></a>renderNavigationView <span class="propType">function</span> <a class="hash-link" href="#rendernavigationview">#</a></h4><div><p>The navigation view that will be rendered to the side of the screen and can be pulled in.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/image.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -86,7 +86,7 @@ class <span class="token class-name">MyAwesomeApp</span> extends <span class="to
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

-React<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;MyAwesomeApp&#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> MyAwesomeApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2><a class="anchor" name="run-your-app"></a>Run your app <a class="hash-link" href="#run-your-app">#</a></h2><p>To run your app, you need to first start the development server. To do this, simply run the following command in your root folder:</p><div class="prism language-javascript">$ npm start</div><p>Now build and run your Android app as normal (e.g. <code>./gradlew installDebug</code>). Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p><p><img src="img/EmbeddedAppAndroid.png" alt="Screenshot"></p><h2><a class="anchor" name="sharing-a-reactinstance-across-multiple-activities-fragments-in-your-app"></a>Sharing a ReactInstance across multiple Activities / Fragments in your app <a class="hash-link" href="#sharing-a-reactinstance-across-multiple-activities-fragments-in-your-app">#</a></h2><p>You can have multiple Activities or Fragments that use the same <code>ReactInstanceManager</code>. You&#x27;ll want to make your own &quot;ReactFragment&quot; or &quot;ReactActivity&quot; and have a singleton &quot;holder&quot; that holds a <code>ReactInstanceManager</code>. When you need the <code>ReactInstanceManager</code> / hook up the <code>ReactInstanceManager</code> to the lifecycle of those Activities or Fragments, use the one provided by the singleton.</p></div><div class="docs-prevnext"><a class="docs-next" href="signed-apk-android.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+React<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;MyAwesomeApp&#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> MyAwesomeApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2><a class="anchor" name="run-your-app"></a>Run your app <a class="hash-link" href="#run-your-app">#</a></h2><p>To run your app, you need to first start the development server. To do this, simply run the following command in your root folder:</p><div class="prism language-javascript">$ npm start</div><p>Now build and run your Android app as normal (e.g. <code>./gradlew installDebug</code>). Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p><p><img src="img/EmbeddedAppAndroid.png" alt="Screenshot"></p><h2><a class="anchor" name="sharing-a-reactinstance-across-multiple-activities-fragments-in-your-app"></a>Sharing a ReactInstance across multiple Activities / Fragments in your app <a class="hash-link" href="#sharing-a-reactinstance-across-multiple-activities-fragments-in-your-app">#</a></h2><p>You can have multiple Activities or Fragments that use the same <code>ReactInstanceManager</code>. You&#x27;ll want to make your own &quot;ReactFragment&quot; or &quot;ReactActivity&quot; and have a singleton &quot;holder&quot; that holds a <code>ReactInstanceManager</code>. When you need the <code>ReactInstanceManager</code> / hook up the <code>ReactInstanceManager</code> to the lifecycle of those Activities or Fragments, use the one provided by the singleton.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/signed-apk-android.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -63,7 +63,7 @@ rootView<span class="token punctuation">.</span>frame <span class="token operato
            &lt;<span class="token boolean">true</span><span class="token operator">/</span><span class="token operator">&gt;</span>
        &lt;<span class="token operator">/</span>dict<span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>dict<span class="token operator">&gt;</span>
-&lt;<span class="token operator">/</span>dict<span class="token operator">&gt;</span></div><p>If you don&#x27;t do this, you will see the error - <code>Could not connect to development server.</code> when connecting to your server over http.</p><h2><a class="anchor" name="compile-and-run"></a>Compile And Run <a class="hash-link" href="#compile-and-run">#</a></h2><p>Now compile and run your app. You shall now see your React Native app running inside of the <code>ReactView</code>.</p><p><img src="img/EmbeddedAppExample.png" alt="Example"></p><p>Live reload and all of the debugging tools will work from the simulator (make sure that DEBUG=1 is set under Build Settings -&gt; Preprocessor Macros).  You&#x27;ve got a simple React component totally encapsulated behind an Objective-C <code>UIView</code> subclass.</p><h2><a class="anchor" name="conclusion"></a>Conclusion <a class="hash-link" href="#conclusion">#</a></h2><p>So under the hood, when <code>RCTRootView</code> is initialized, it will try to download, parse and run the bundle file from React Native development server. This means all you need to do is to implement your own container view or view controller for the <code>RCTRootView</code> – the <code>RCTRootView</code> ingests your bundled JS and renders your React components. Bravo!</p><p>You can checkout full source code of a sample application <a href="https://github.com/tjwudi/EmbededReactNativeExample" target="_blank">here</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="communication-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+&lt;<span class="token operator">/</span>dict<span class="token operator">&gt;</span></div><p>If you don&#x27;t do this, you will see the error - <code>Could not connect to development server.</code> when connecting to your server over http.</p><h2><a class="anchor" name="compile-and-run"></a>Compile And Run <a class="hash-link" href="#compile-and-run">#</a></h2><p>Now compile and run your app. You shall now see your React Native app running inside of the <code>ReactView</code>.</p><p><img src="img/EmbeddedAppExample.png" alt="Example"></p><p>Live reload and all of the debugging tools will work from the simulator (make sure that DEBUG=1 is set under Build Settings -&gt; Preprocessor Macros).  You&#x27;ve got a simple React component totally encapsulated behind an Objective-C <code>UIView</code> subclass.</p><h2><a class="anchor" name="conclusion"></a>Conclusion <a class="hash-link" href="#conclusion">#</a></h2><p>So under the hood, when <code>RCTRootView</code> is initialized, it will try to download, parse and run the bundle file from React Native development server. This means all you need to do is to implement your own container view or view controller for the <code>RCTRootView</code> – the <code>RCTRootView</code> ingests your bundled JS and renders your React components. Bravo!</p><p>You can checkout full source code of a sample application <a href="https://github.com/tjwudi/EmbededReactNativeExample" target="_blank">here</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/communication-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -77,7 +77,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
  title<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    fontWeight<span class="token punctuation">:</span> <span class="token string">&#x27;500&#x27;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="network.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/network.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -22,7 +22,7 @@ so that both dimensions (width and height) of the image will be equal to
 or less than the corresponding dimension of the view (minus padding).</p><p>&#x27;stretch&#x27;: Scale width and height independently, This may change the
 aspect ratio of the src.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="source"></a>source <span class="propType">{uri: string}, number</span> <a class="hash-link" href="#source">#</a></h4><div><p><code>uri</code> is a string representing the resource identifier for the image, which
 could be an http address, a local file path, or the name of a static image
-resource (which should be wrapped in the <code>require(&#x27;./path/to/image.png&#x27;)</code> function).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="shadowproptypesios.html#style">ShadowPropTypesIOS#style...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">resizeMode <span class="propType">Object.keys(ImageResizeMode)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>overlayColor <span class="propType">string</span> <div><p>When the image has rounded corners, specifying an overlayColor will
+resource (which should be wrapped in the <code>require(&#x27;./path/to/image.png&#x27;)</code> function).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="shadowproptypesios.html#style">ShadowPropTypesIOS#style...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">resizeMode <span class="propType">Object.keys(ImageResizeMode)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>overlayColor <span class="propType">string</span> <div><p>When the image has rounded corners, specifying an overlayColor will
 cause the remaining space in the corners to be filled with a solid color.
 This is useful in cases which are not supported by the Android
 implementation of rounded corners:
@@ -30,7 +30,7 @@ implementation of rounded corners:
  - Animated GIFs</p><p>A typical way to use this prop is with images displayed on a solid
 background and setting the <code>overlayColor</code> to the same color
 as the background.</p><p>For details of how this works under the hood, see
-<a href="http://frescolib.org/docs/rounded-corners-and-circles.html">http://frescolib.org/docs/rounded-corners-and-circles.html</a></p></div></h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>tintColor <span class="propType"><a href="colors.html">color</a></span> <div><p>iOS-Specific style to &quot;tint&quot; an image.
+<a href="http://frescolib.org/docs/rounded-corners-and-circles.html">http://frescolib.org/docs/rounded-corners-and-circles.html</a></p></div></h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>tintColor <span class="propType"><a href="docs/colors.html">color</a></span> <div><p>iOS-Specific style to &quot;tint&quot; an image.
 Changes the color of all the non-transparent pixels to the tintColor.</p></div></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>A unique identifier for this element to be used in UI Automation
 testing scripts.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a><span class="platform">ios</span>accessibilityLabel <span class="propType">string</span> <a class="hash-link" href="#accessibilitylabel">#</a></h4><div><p>The text that&#x27;s read by the screen reader when the user interacts with
 the image.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a><span class="platform">ios</span>accessible <span class="propType">bool</span> <a class="hash-link" href="#accessible">#</a></h4><div><p>When true, indicates the image is an accessibility element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="capinsets"></a><span class="platform">ios</span>capInsets <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="#capinsets">#</a></h4><div><p>When the image is resized, the corners of the size specified
@@ -540,7 +540,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
    height<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
    resizeMode<span class="token punctuation">:</span> <span class="token string">&#x27;contain&#x27;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="listview.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/listview.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -21,7 +21,7 @@ using local resources that are outside of <code>Images.xcassets</code>.</p><h3><
  &lt;Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
    &lt;Text<span class="token operator">&gt;</span>Inside&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
  &lt;<span class="token operator">/</span>Image<span class="token operator">&gt;</span>
-<span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2><a class="anchor" name="off-thread-decoding"></a>Off-thread Decoding <a class="hash-link" href="#off-thread-decoding">#</a></h2><p>Image decoding can take more than a frame-worth of time. This is one of the major source of frame drops on the web because decoding is done in the main thread. In React Native, image decoding is done in a different thread. In practice, you already need to handle the case when the image is not downloaded yet, so displaying the placeholder for a few more frames while it is decoding does not require any code change.</p></div><div class="docs-prevnext"><a class="docs-next" href="gesture-responder-system.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">)</span><span class="token punctuation">;</span></div><h2><a class="anchor" name="off-thread-decoding"></a>Off-thread Decoding <a class="hash-link" href="#off-thread-decoding">#</a></h2><p>Image decoding can take more than a frame-worth of time. This is one of the major source of frame drops on the web because decoding is done in the main thread. In React Native, image decoding is done in a different thread. In practice, you already need to handle the case when the image is not downloaded yet, so displaying the placeholder for a few more frames while it is decoding does not require any code change.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/gesture-responder-system.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -106,7 +106,7 @@ it will give the link url, otherwise it will give <code>null</code></p><p>Refer
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> IntentAndroidExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="interactionmanager.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> IntentAndroidExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/interactionmanager.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -22,7 +22,7 @@ time) approaches, at which point execution will yield via setTimeout,
 allowing events such as touches to start interactions and block queued tasks
 from executing, making apps more responsive.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="runafterinteractions"></a><span class="propType">static </span>runAfterInteractions<span class="propType">(task: Task)</span> <a class="hash-link" href="#runafterinteractions">#</a></h4><div><p>Schedule a function to run after all interactions have completed.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="createinteractionhandle"></a><span class="propType">static </span>createInteractionHandle<span class="propType">()</span> <a class="hash-link" href="#createinteractionhandle">#</a></h4><div><p>Notify manager that an interaction has started.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="clearinteractionhandle"></a><span class="propType">static </span>clearInteractionHandle<span class="propType">(handle: Handle)</span> <a class="hash-link" href="#clearinteractionhandle">#</a></h4><div><p>Notify manager that an interaction has completed.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="setdeadline"></a><span class="propType">static </span>setDeadline<span class="propType">(deadline: number)</span> <a class="hash-link" href="#setdeadline">#</a></h4><div><p>A positive number will use setTimeout to schedule any tasks after the
 eventLoopRunningTime hits the deadline value, otherwise all tasks will be
-executed in one setImmediate batch (default).</p></div></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="events"></a>Events<span class="propType">: CallExpression</span> <a class="hash-link" href="#events">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="addlistener"></a>addListener<span class="propType">: CallExpression</span> <a class="hash-link" href="#addlistener">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="layoutanimation.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+executed in one setImmediate batch (default).</p></div></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="events"></a>Events<span class="propType">: CallExpression</span> <a class="hash-link" href="#events">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="addlistener"></a>addListener<span class="propType">: CallExpression</span> <a class="hash-link" href="#addlistener">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/layoutanimation.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -5,7 +5,7 @@ Slider <span class="token punctuation">(</span>known as SeekBar<span class="toke
 Media
 PushNotificationIOS</div><h3><a class="anchor" name="some-props-are-only-supported-on-one-platform"></a>Some props are only supported on one platform <a class="hash-link" href="#some-props-are-only-supported-on-one-platform">#</a></h3><p>There are properties that work on one platform only, either because they can inherently only be supported on that platform or because they haven&#x27;t been implemented on the other platforms yet. All of these are annotated with <code>@platform</code> in JS docs and have a small badge next to them on the website. See e.g. <a href="docs/image.html" target="_blank">Image</a>.</p><h3><a class="anchor" name="platform-parity"></a>Platform parity <a class="hash-link" href="#platform-parity">#</a></h3><p>There are known cases where the APIs could be made more consistent across iOS and Android:</p><ul><li><code>&lt;ViewPagerAndroid&gt;</code> and <code>&lt;ScrollView pagingEnabled={true}&gt;</code> on iOS do a similar thing. We might want to unify them to <code>&lt;ViewPager&gt;</code>.</li><li><code>ActivityIndicator</code> could render a native spinning indicator on both platforms (currently this is done using <code>ActivityIndicatorIOS</code> on iOS and <code>ProgressBarAndroid</code> on Android).</li><li><code>ProgressBar</code> could render a horizontal progress bar on both platforms (on iOS this is <code>ProgressViewIOS</code>, on Android it&#x27;s <code>ProgressBarAndroid</code>).</li></ul><h3><a class="anchor" name="using-3rd-party-native-modules"></a>Using 3rd-party native modules <a class="hash-link" href="#using-3rd-party-native-modules">#</a></h3><p>There are many awesome 3rd-party modules: <a href="https://js.coach/react-native" target="_blank">JS.coach</a></p><p>Adding these to your apps should be made simpler. Here&#x27;s <a href="https://github.com/apptailor/react-native-google-signin" target="_blank">an example</a> how this is done currently.</p><h3><a class="anchor" name="the-overflow-style-property-defaults-to-hidden-and-cannot-be-changed-on-android"></a>The <code>overflow</code> style property defaults to <code>hidden</code> and cannot be changed on Android <a class="hash-link" href="#the-overflow-style-property-defaults-to-hidden-and-cannot-be-changed-on-android">#</a></h3><p>This is a result of how Android rendering works. This feature is not being worked on as it would be a significant undertaking and there are many more important tasks.</p><p>Another issue with <code>overflow: &#x27;hidden&#x27;</code> on Android: a view is not clipped by the parent&#x27;s <code>borderRadius</code> even if the parent has <code>overflow: &#x27;hidden&#x27;</code> enabled – the corners of the inner view will be visible outside of the rounded corners. This is only on Android; it works as expected on iOS. See a <a href="https://rnplay.org/apps/BlGjdQ" target="_blank">demo of the bug</a> and the <a href="https://github.com/facebook/react-native/issues/3198" target="_blank">corresponding issue</a>.</p><h3><a class="anchor" name="view-shadows"></a>View shadows <a class="hash-link" href="#view-shadows">#</a></h3><p>The <code>shadow*</code> <a href="docs/view.html#style" target="_blank">view styles</a> apply on iOS, and the <code>elevation</code> view prop is available on Android. Setting <code>elevation</code> on Android is equivalent to using the <a href="https://developer.android.com/training/material/shadows-clipping.html#Elevation" target="_blank">native elevation API</a>, and has the same limitations (most significantly, it only works on Android 5.0+). Setting <code>elevation</code> on Android also affects the z-order for overlapping views.</p><h3><a class="anchor" name="android-m-permissions"></a>Android M permissions <a class="hash-link" href="#android-m-permissions">#</a></h3><p>The open source version of React Native doesn&#x27;t yet support the <a href="http://developer.android.com/training/permissions/requesting.html" target="_blank">Android M permission model</a>.</p><h3><a class="anchor" name="layout-only-nodes-on-android"></a>Layout-only nodes on Android <a class="hash-link" href="#layout-only-nodes-on-android">#</a></h3><p>An optimization feature of the Android version of React Native is for views which only contribute to the layout to not have a native view, only their layout properties are propagated to their children views. This optimization is to provide stability in deep view hierarchies for React Native and is therefore enabled by default. Should you depend on a view being present or internal tests incorrectly detect a view is layout only it will be necessary to turn off this behavior. To do this, set <code>collapsable</code> to false as in this example:</p><div class="prism language-javascript">&lt;View collapsable<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
    <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
-&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span></div><h3><a class="anchor" name="memory-issues-with-png-images"></a>Memory issues with PNG images <a class="hash-link" href="#memory-issues-with-png-images">#</a></h3><p>React Native Android depends on <a href="https://github.com/facebook/fresco" target="_blank">Fresco</a> for loading and displaying images. Currently we have disabled downsampling because it is experimental, so you may run into memory issues when loading large PNG images.</p><h3><a class="anchor" name="react-native-init-hangs"></a>react-native init hangs <a class="hash-link" href="#react-native-init-hangs">#</a></h3><p>Try running <code>react-native init</code> with <code>--verbose</code> and see <a href="https://github.com/facebook/react-native/issues/2797" target="_blank">#2797</a> for common causes.</p><h3><a class="anchor" name="text-input-border"></a>Text Input Border <a class="hash-link" href="#text-input-border">#</a></h3><p>The text input has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting underlineColor to transparent.</p></div><div class="docs-prevnext"><a class="docs-next" href="performance.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span></div><h3><a class="anchor" name="memory-issues-with-png-images"></a>Memory issues with PNG images <a class="hash-link" href="#memory-issues-with-png-images">#</a></h3><p>React Native Android depends on <a href="https://github.com/facebook/fresco" target="_blank">Fresco</a> for loading and displaying images. Currently we have disabled downsampling because it is experimental, so you may run into memory issues when loading large PNG images.</p><h3><a class="anchor" name="react-native-init-hangs"></a>react-native init hangs <a class="hash-link" href="#react-native-init-hangs">#</a></h3><p>Try running <code>react-native init</code> with <code>--verbose</code> and see <a href="https://github.com/facebook/react-native/issues/2797" target="_blank">#2797</a> for common causes.</p><h3><a class="anchor" name="text-input-border"></a>Text Input Border <a class="hash-link" href="#text-input-border">#</a></h3><p>The text input has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting underlineColor to transparent.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/performance.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -3,7 +3,7 @@ next layout happens.</p><p>A common way to use this API is to call <code>LayoutA
 before calling <code>setState</code>.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="configurenext"></a><span class="propType">static </span>configureNext<span class="propType">(config: Config, onAnimationDidEnd?: Function)</span> <a class="hash-link" href="#configurenext">#</a></h4><div><p>Schedules an animation to happen on the next layout.</p><p>@param config Specifies animation properties:</p><ul><li><code>duration</code> in milliseconds</li><li><code>create</code>, config for animating in new views (see <code>Anim</code> type)</li><li><code>update</code>, config for animating views that have been updated
 (see <code>Anim</code> type)</li></ul><p>@param onAnimationDidEnd Called when the animation finished.
 Only supported on iOS.
-@param onError Called on error. Only supported on iOS.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="create"></a><span class="propType">static </span>create<span class="propType">(duration: number, type, creationProp)</span> <a class="hash-link" href="#create">#</a></h4><div><p>Helper for creating a config for <code>configureNext</code>.</p></div></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="types"></a>Types<span class="propType">: CallExpression</span> <a class="hash-link" href="#types">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="properties"></a>Properties<span class="propType">: CallExpression</span> <a class="hash-link" href="#properties">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="configchecker"></a>configChecker<span class="propType">: CallExpression</span> <a class="hash-link" href="#configchecker">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="presets"></a>Presets<span class="propType">: ObjectExpression</span> <a class="hash-link" href="#presets">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="easeineaseout"></a>easeInEaseOut<span class="propType">: CallExpression</span> <a class="hash-link" href="#easeineaseout">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="linear"></a>linear<span class="propType">: CallExpression</span> <a class="hash-link" href="#linear">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="spring"></a>spring<span class="propType">: CallExpression</span> <a class="hash-link" href="#spring">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="linking.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+@param onError Called on error. Only supported on iOS.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="create"></a><span class="propType">static </span>create<span class="propType">(duration: number, type, creationProp)</span> <a class="hash-link" href="#create">#</a></h4><div><p>Helper for creating a config for <code>configureNext</code>.</p></div></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="types"></a>Types<span class="propType">: CallExpression</span> <a class="hash-link" href="#types">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="properties"></a>Properties<span class="propType">: CallExpression</span> <a class="hash-link" href="#properties">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="configchecker"></a>configChecker<span class="propType">: CallExpression</span> <a class="hash-link" href="#configchecker">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="presets"></a>Presets<span class="propType">: ObjectExpression</span> <a class="hash-link" href="#presets">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="easeineaseout"></a>easeInEaseOut<span class="propType">: CallExpression</span> <a class="hash-link" href="#easeineaseout">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="linear"></a>linear<span class="propType">: CallExpression</span> <a class="hash-link" href="#linear">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="spring"></a>spring<span class="propType">: CallExpression</span> <a class="hash-link" href="#spring">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/linking.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -19,7 +19,7 @@ received.</p><p>For that we need to know the library&#x27;s headers. To achieve
 to your project&#x27;s file, select <code>Build Settings</code> and search for <code>Header Search
 Paths</code>. There you should include the path to your library (if it has relevant
 files on subdirectories remember to make it <code>recursive</code>, like <code>React</code> on the
-example).</p><p><img src="img/AddToSearchPaths.png" alt=""></p></div><div class="docs-prevnext"><a class="docs-next" href="running-on-device-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+example).</p><p><img src="img/AddToSearchPaths.png" alt=""></p></div><div class="docs-prevnext"><a class="docs-next" href="docs/running-on-device-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -42,7 +42,7 @@ and providing the handler</p><p>@platform ios</p></div></div><div class="prop"><
 or any other URL that can be opened with the installed apps.</p><p>NOTE: This method will fail if the system doesn&#x27;t know how to open the specified URL.
 If you&#x27;re passing in a non-http(s) URL, it&#x27;s best to check {@code canOpenURL} first.</p><p>NOTE: For web URLs, the protocol (&quot;http://&quot;, &quot;https://&quot;) must be set accordingly!</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="canopenurl"></a><span class="propType">static </span>canOpenURL<span class="propType">(url: string)</span> <a class="hash-link" href="#canopenurl">#</a></h4><div><p>Determine whether or not an installed app can handle a given URL.</p><p>NOTE: For web URLs, the protocol (&quot;http://&quot;, &quot;https://&quot;) must be set accordingly!</p><p>NOTE: As of iOS 9, your app needs to provide the <code>LSApplicationQueriesSchemes</code> key
 inside <code>Info.plist</code>.</p><p>@param URL the URL to open</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getinitialurl"></a><span class="propType">static </span>getInitialURL<span class="propType">()</span> <a class="hash-link" href="#getinitialurl">#</a></h4><div><p>If the app launch was triggered by an app link with,
-it will give the link url, otherwise it will give <code>null</code></p><p>NOTE: To support deep linking on Android, refer <a href="http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents">http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents</a></p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="linkingios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+it will give the link url, otherwise it will give <code>null</code></p><p>NOTE: To support deep linking on Android, refer <a href="http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents">http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents</a></p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/linkingios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -36,7 +36,7 @@ execution you&#x27;ll need to add the following lines to you <code>*AppDelegate.
 and providing the handler</p><p>@deprecated</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeeventlistener"></a><span class="propType">static </span>removeEventListener<span class="propType">(type: string, handler: Function)</span> <a class="hash-link" href="#removeeventlistener">#</a></h4><div><p>Remove a handler by passing the <code>url</code> event type and the handler</p><p>@deprecated</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="openurl"></a><span class="propType">static </span>openURL<span class="propType">(url: string)</span> <a class="hash-link" href="#openurl">#</a></h4><div><p>Try to open the given <code>url</code> with any of the installed apps.</p><p>@deprecated</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="canopenurl"></a><span class="propType">static </span>canOpenURL<span class="propType">(url: string, callback: Function)</span> <a class="hash-link" href="#canopenurl">#</a></h4><div><p>Determine whether or not an installed app can handle a given URL.
 The callback function will be called with <code>bool supported</code> as the only argument</p><p>NOTE: As of iOS 9, your app needs to provide the <code>LSApplicationQueriesSchemes</code> key
 inside <code>Info.plist</code>.</p><p>@deprecated</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="popinitialurl"></a><span class="propType">static </span>popInitialURL<span class="propType">()</span> <a class="hash-link" href="#popinitialurl">#</a></h4><div><p>If the app launch was triggered by an app link, it will pop the link url,
-otherwise it will return <code>null</code></p><p>@deprecated</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="nativemethodsmixin.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+otherwise it will return <code>null</code></p><p>@deprecated</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/nativemethodsmixin.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -28,7 +28,7 @@ data source tells the ListView if it needs to re-render a row because the
 source data has changed - see ListViewDataSource for more details.</p></li><li><p>Rate-limited row rendering - By default, only one row is rendered per
 event-loop (customizable with the <code>pageSize</code> prop).  This breaks up the
 work into smaller chunks to reduce the chance of dropping frames while
-rendering rows.</p></li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollview"></a><a href="scrollview.html#props">ScrollView props...</a> <a class="hash-link" href="#scrollview">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="datasource"></a>dataSource <span class="propType">ListViewDataSource</span> <a class="hash-link" href="#datasource">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initiallistsize"></a>initialListSize <span class="propType">number</span> <a class="hash-link" href="#initiallistsize">#</a></h4><div><p>How many rows to render on initial component mount.  Use this to make
+rendering rows.</p></li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollview"></a><a href="docs/scrollview.html#props">ScrollView props...</a> <a class="hash-link" href="#scrollview">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="datasource"></a>dataSource <span class="propType">ListViewDataSource</span> <a class="hash-link" href="#datasource">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initiallistsize"></a>initialListSize <span class="propType">number</span> <a class="hash-link" href="#initiallistsize">#</a></h4><div><p>How many rows to render on initial component mount.  Use this to make
 it so that the first screen worth of data appears at one time instead of
 over the course of multiple frames.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchangevisiblerows"></a>onChangeVisibleRows <span class="propType">function</span> <a class="hash-link" href="#onchangevisiblerows">#</a></h4><div><p>(visibleRows, changedRows) =&gt; void</p><p>Called when the set of visible rows changes.  <code>visibleRows</code> maps
 { sectionID: { rowID: true }} for all the visible rows, and
@@ -189,7 +189,7 @@ with <code>horizontal={true}</code>.</p></div></div></div></div><div><table widt
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ListViewSimpleExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="mapview.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ListViewSimpleExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/mapview.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -162,7 +162,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
  modalButton<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    marginTop<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="navigator.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/navigator.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -79,7 +79,7 @@ MyCustomView<span class="token punctuation">.</span>propTypes <span class="token

 <span class="token keyword">var</span> RCTMyCustomView <span class="token operator">=</span> <span class="token function">requireNativeComponent<span class="token punctuation">(</span></span>`RCTMyCustomView`<span class="token punctuation">,</span> MyCustomView<span class="token punctuation">,</span> <span class="token punctuation">{</span>
  nativeOnly<span class="token punctuation">:</span> <span class="token punctuation">{</span>onChange<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Note the use of <code>nativeOnly</code> above.  Sometimes you&#x27;ll have some special properties that you need to expose for the native component, but don&#x27;t actually want them as part of the API for the associated React component.  For example, <code>Switch</code> has a custom <code>onChange</code> handler for the raw native event, and exposes an <code>onValueChange</code> handler property that is invoked with just the boolean value rather than the raw event (similar to <code>onChangeMessage</code> in the example above).  Since you don&#x27;t want these native only properties to be part of the API, you don&#x27;t want to put them in <code>propTypes</code>, but if you don&#x27;t you&#x27;ll get an error.  The solution is simply to call them out via the <code>nativeOnly</code> option.</p></div><div class="docs-prevnext"><a class="docs-next" href="running-on-device-android.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Note the use of <code>nativeOnly</code> above.  Sometimes you&#x27;ll have some special properties that you need to expose for the native component, but don&#x27;t actually want them as part of the API for the associated React component.  For example, <code>Switch</code> has a custom <code>onChange</code> handler for the raw native event, and exposes an <code>onValueChange</code> handler property that is invoked with just the boolean value rather than the raw event (similar to <code>onChangeMessage</code> in the example above).  Since you don&#x27;t want these native only properties to be part of the API, you don&#x27;t want to put them in <code>propTypes</code>, but if you don&#x27;t you&#x27;ll get an error.  The solution is simply to call them out via the <code>nativeOnly</code> option.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/running-on-device-android.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -227,7 +227,7 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
      @<span class="token string">&quot;datetime&quot;</span><span class="token punctuation">:</span> @<span class="token punctuation">(</span>UIDatePickerModeDateAndTime<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span></div><p>This guide covered many of the aspects of bridging over custom native components, but there is even more you might need to consider, such as custom hooks for inserting and laying out subviews.  If you want to go even deeper, check out the actual <code>RCTMapManager</code> and other components in the <a href="https://github.com/facebook/react-native/blob/master/React/Views" target="_blank">source code</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="linking-libraries-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span></div><p>This guide covered many of the aspects of bridging over custom native components, but there is even more you might need to consider, such as custom hooks for inserting and laying out subviews.  If you want to go even deeper, check out the actual <code>RCTMapManager</code> and other components in the <a href="https://github.com/facebook/react-native/blob/master/React/Views" target="_blank">source code</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/linking-libraries-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -255,7 +255,7 @@ public void <span class="token function">onHostPause<span class="token punctuati
@Override
 public void <span class="token function">onHostDestroy<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token comment" spellcheck="true"> // Actvity `onDestroy`
-</span><span class="token punctuation">}</span></div></div><div class="docs-prevnext"><a class="docs-next" href="native-components-android.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+</span><span class="token punctuation">}</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/native-components-android.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -134,7 +134,7 @@ class <span class="token class-name">CalendarManager</span><span class="token pu
 <span class="token function">RCT_EXTERN_METHOD<span class="token punctuation">(</span></span>addEvent<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>name location<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>location date<span class="token punctuation">:</span><span class="token punctuation">(</span>nonnull NSNumber <span class="token operator">*</span><span class="token punctuation">)</span>date<span class="token punctuation">)</span>

@end</div><p>For those of you new to Swift and Objective-C, whenever you <a href="https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/BuildingCocoaApps/MixandMatch.html" target="_blank">mix the two languages in an iOS project</a>, you will also need an additional bridging file, known as a bridging header, to expose the Objective-C files to Swift. Xcode will offer to create this header file for you if you add your Swift file to your app through the Xcode <code>File&gt;New File</code> menu option. You will need to import <code>RCTBridgeModule.h</code> in this header file.</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// CalendarManager-Bridging-Header.h
-</span>#import <span class="token string">&quot;RCTBridgeModule.h&quot;</span></div><p>You can also use <code>RCT_EXTERN_REMAP_MODULE</code> and <code>RCT_EXTERN_REMAP_METHOD</code> to alter the JavaScript name of the module or methods you are exporting. For more information see <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTBridgeModule.h" target="_blank"><code>RCTBridgeModule</code></a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="native-components-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+</span>#import <span class="token string">&quot;RCTBridgeModule.h&quot;</span></div><p>You can also use <code>RCT_EXTERN_REMAP_MODULE</code> and <code>RCT_EXTERN_REMAP_METHOD</code> to alter the JavaScript name of the module or methods you are exporting. For more information see <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTBridgeModule.h" target="_blank"><code>RCTBridgeModule</code></a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/native-components-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -17,7 +17,7 @@ are relative to the origin x, y of the ancestor view.</p><p>As always, to obtain
 future diff process - this means that if you do not include them in the
 next render, they will remain active (see <a href="docs/direct-manipulation.html" target="_blank">Direct
 Manipulation</a>).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="focus"></a><span class="propType">static </span>focus<span class="propType">()</span> <a class="hash-link" href="#focus">#</a></h4><div><p>Requests focus for the given input or view. The exact behavior triggered
-will depend on the platform and type of view.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="blur"></a><span class="propType">static </span>blur<span class="propType">()</span> <a class="hash-link" href="#blur">#</a></h4><div><p>Removes focus from an input or view. This is the opposite of <code>focus()</code>.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="netinfo.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+will depend on the platform and type of view.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="blur"></a><span class="propType">static </span>blur<span class="propType">()</span> <a class="hash-link" href="#blur">#</a></h4><div><p>Removes focus from an input or view. This is the opposite of <code>focus()</code>.</p></div></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/netinfo.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -12,7 +12,7 @@ class, and <code>Navigator</code> re-implements that functionality entirely in
 JavaScript as a React component. A corollary of this is that <code>Navigator</code>
 will be compatible with Android and iOS, whereas <code>NavigatorIOS</code> will
 only work on the one platform. Below is an itemized list of differences
-between the two.</p><h2><a class="anchor" name="navigator"></a>Navigator <a class="hash-link" href="#navigator">#</a></h2><ul><li>Extensive API makes it completely customizable from JavaScript.</li><li>Under active development from the React Native team.</li><li>Written in JavaScript.</li><li>Works on iOS and Android.</li><li>Includes a simple navigation bar component similar to the default <code>NavigatorIOS</code> bar: <code>Navigator.NavigationBar</code>, and another with breadcrumbs called <code>Navigator.BreadcrumbNavigationBar</code>. See the UIExplorer demo to try them out and see how to use them.<ul><li>Currently animations are good and improving, but they are still less refined than Apple&#x27;s, which you get from <code>NavigatorIOS</code>.</li></ul></li><li>You can provide your own navigation bar by passing it through the <code>navigationBar</code> prop.</li></ul><h2><a class="anchor" name="navigatorios"></a>NavigatorIOS <a class="hash-link" href="#navigatorios">#</a></h2><ul><li>Small, limited API makes it much less customizable than <code>Navigator</code> in its current form.</li><li>Development belongs to open-source community - not used by the React Native team on their apps.<ul><li>A result of this is that there is currently a backlog of unresolved bugs, nobody who uses this has stepped up to take ownership for it yet.</li></ul></li><li>Wraps UIKit, so it works exactly the same as it would on another native app. Lives in Objective-C and JavaScript.<ul><li>Consequently, you get the animations and behavior that Apple has developed.</li></ul></li><li>iOS only.</li><li>Includes a navigation bar by default; this navigation bar is not a React Native view component and the style can only be slightly modified.</li></ul><p>For most non-trivial apps, you will want to use <code>Navigator</code> - it won&#x27;t be long before you run into issues when trying to do anything complex with <code>NavigatorIOS</code>.</p></div><div class="docs-prevnext"><a class="docs-next" href="known-issues.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+between the two.</p><h2><a class="anchor" name="navigator"></a>Navigator <a class="hash-link" href="#navigator">#</a></h2><ul><li>Extensive API makes it completely customizable from JavaScript.</li><li>Under active development from the React Native team.</li><li>Written in JavaScript.</li><li>Works on iOS and Android.</li><li>Includes a simple navigation bar component similar to the default <code>NavigatorIOS</code> bar: <code>Navigator.NavigationBar</code>, and another with breadcrumbs called <code>Navigator.BreadcrumbNavigationBar</code>. See the UIExplorer demo to try them out and see how to use them.<ul><li>Currently animations are good and improving, but they are still less refined than Apple&#x27;s, which you get from <code>NavigatorIOS</code>.</li></ul></li><li>You can provide your own navigation bar by passing it through the <code>navigationBar</code> prop.</li></ul><h2><a class="anchor" name="navigatorios"></a>NavigatorIOS <a class="hash-link" href="#navigatorios">#</a></h2><ul><li>Small, limited API makes it much less customizable than <code>Navigator</code> in its current form.</li><li>Development belongs to open-source community - not used by the React Native team on their apps.<ul><li>A result of this is that there is currently a backlog of unresolved bugs, nobody who uses this has stepped up to take ownership for it yet.</li></ul></li><li>Wraps UIKit, so it works exactly the same as it would on another native app. Lives in Objective-C and JavaScript.<ul><li>Consequently, you get the animations and behavior that Apple has developed.</li></ul></li><li>iOS only.</li><li>Includes a navigation bar by default; this navigation bar is not a React Native view component and the style can only be slightly modified.</li></ul><p>For most non-trivial apps, you will want to use <code>Navigator</code> - it won&#x27;t be long before you run into issues when trying to do anything complex with <code>NavigatorIOS</code>.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/known-issues.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -39,7 +39,7 @@ is provided. Otherwise, it will default to an array containing only the
 transitions</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigator"></a>navigator <span class="propType">object</span> <a class="hash-link" href="#navigator">#</a></h4><div><p>Optionally provide the navigator object from a parent Navigator</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondidfocus"></a>onDidFocus <span class="propType">function</span> <a class="hash-link" href="#ondidfocus">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use <code>navigationContext.addListener(&#x27;didfocus&#x27;, callback)</code> instead.</p></div></div></div><div><p>Will be called with the new route of each scene after the transition is
 complete or after the initial mounting</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onwillfocus"></a>onWillFocus <span class="propType">function</span> <a class="hash-link" href="#onwillfocus">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use <code>navigationContext.addListener(&#x27;willfocus&#x27;, callback)</code> instead.</p></div></div></div><div><p>Will emit the target route upon mounting and before each nav transition</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscene"></a>renderScene <span class="propType">function</span> <a class="hash-link" href="#renderscene">#</a></h4><div><p>Required function which renders the scene for a given route. Will be
 invoked with the route and the navigator object</p><div class="prism language-javascript"><span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span>
-  &lt;MySceneComponent title<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</span> navigator<span class="token operator">=</span><span class="token punctuation">{</span>navigator<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scenestyle"></a>sceneStyle <span class="propType"><a href="view.html#style">View#style</a></span> <a class="hash-link" href="#scenestyle">#</a></h4><div><p>Styles to apply to the container of each scene</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="navigatorios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+  &lt;MySceneComponent title<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</span> navigator<span class="token operator">=</span><span class="token punctuation">{</span>navigator<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scenestyle"></a>sceneStyle <span class="propType"><a href="docs/view.html#style">View#style</a></span> <a class="hash-link" href="#scenestyle">#</a></h4><div><p>Styles to apply to the container of each scene</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/navigatorios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -40,7 +40,7 @@ for the navigation bar. Props passed as properties to a route object will set
 the configuration for that route&#x27;s navigation bar, overriding any props
 passed to the NavigatorIOS component.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="bartintcolor"></a>barTintColor <span class="propType">string</span> <a class="hash-link" href="#bartintcolor">#</a></h4><div><p>The default background color of the navigation bar</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialroute"></a>initialRoute <span class="propType">{component: function, title: string, passProps: object, backButtonIcon: Image.propTypes.source, backButtonTitle: string, leftButtonIcon: Image.propTypes.source, leftButtonTitle: string, onLeftButtonPress: function, rightButtonIcon: Image.propTypes.source, rightButtonTitle: string, onRightButtonPress: function, wrapperStyle: [object Object], navigationBarHidden: bool, shadowHidden: bool, tintColor: string, barTintColor: string, titleTextColor: string, translucent: bool}</span> <a class="hash-link" href="#initialroute">#</a></h4><div><p>NavigatorIOS uses &quot;route&quot; objects to identify child views, their props,
 and navigation bar configuration. &quot;push&quot; and all the other navigation
-operations expect routes to be like this:</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemwrapperstyle"></a>itemWrapperStyle <span class="propType"><a href="view.html#style">View#style</a></span> <a class="hash-link" href="#itemwrapperstyle">#</a></h4><div><p>The default wrapper style for components in the navigator.
+operations expect routes to be like this:</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemwrapperstyle"></a>itemWrapperStyle <span class="propType"><a href="docs/view.html#style">View#style</a></span> <a class="hash-link" href="#itemwrapperstyle">#</a></h4><div><p>The default wrapper style for components in the navigator.
 A common use case is to set the backgroundColor for every page</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigationbarhidden"></a>navigationBarHidden <span class="propType">bool</span> <a class="hash-link" href="#navigationbarhidden">#</a></h4><div><p>A Boolean value that indicates whether the navigation bar is hidden by default</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shadowhidden"></a>shadowHidden <span class="propType">bool</span> <a class="hash-link" href="#shadowhidden">#</a></h4><div><p>A Boolean value that indicates whether to hide the 1px hairline shadow by default</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor <span class="propType">string</span> <a class="hash-link" href="#tintcolor">#</a></h4><div><p>The default color used for buttons in the navigation bar</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titletextcolor"></a>titleTextColor <span class="propType">string</span> <a class="hash-link" href="#titletextcolor">#</a></h4><div><p>The default text color of the navigation bar title</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="translucent"></a>translucent <span class="propType">bool</span> <a class="hash-link" href="#translucent">#</a></h4><div><p>A Boolean value that indicates whether the navigation bar is translucent by default</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/NavigatorIOSExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>

 <span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@@ -276,7 +276,7 @@ A common use case is to set the backgroundColor for every page</p></div></div><d
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> NavigatorIOSExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="pickerios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> NavigatorIOSExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/pickerios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -197,7 +197,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
    description<span class="token punctuation">:</span> <span class="token string">&#x27;Asynchronously check isConnectionExpensive&#x27;</span><span class="token punctuation">,</span>
    <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;IsConnectionExpensive <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="panresponder.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/panresponder.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -56,7 +56,7 @@ request<span class="token punctuation">.</span>onreadystatechange <span class="t
 <span class="token punctuation">}</span><span class="token punctuation">;</span>

 request<span class="token punctuation">.</span><span class="token function">open<span class="token punctuation">(</span></span><span class="token string">&#x27;GET&#x27;</span><span class="token punctuation">,</span> <span class="token string">&#x27;https://mywebsite.com/endpoint.php&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-request<span class="token punctuation">.</span><span class="token function">send<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Please follow the <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" target="_blank">MDN Documentation</a> for a complete description of the API.</p><p>As a developer, you&#x27;re probably not going to use XMLHttpRequest directly as its API is very tedious to work with. But the fact that it is implemented and compatible with the browser API gives you the ability to use third-party libraries such as <a href="https://parse.com/products/javascript" target="_blank">Parse</a>, <a href="https://github.com/niftylettuce/frisbee" target="_blank">frisbee</a>, or <a href="https://github.com/mzabriskie/axios" target="_blank">axios</a> directly from npm.</p></div><div class="docs-prevnext"><a class="docs-next" href="timers.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+request<span class="token punctuation">.</span><span class="token function">send<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Please follow the <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" target="_blank">MDN Documentation</a> for a complete description of the API.</p><p>As a developer, you&#x27;re probably not going to use XMLHttpRequest directly as its API is very tedious to work with. But the fact that it is implemented and compatible with the browser API gives you the ability to use third-party libraries such as <a href="https://parse.com/products/javascript" target="_blank">Parse</a>, <a href="https://github.com/niftylettuce/frisbee" target="_blank">frisbee</a>, or <a href="https://github.com/mzabriskie/axios" target="_blank">axios</a> directly from npm.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/timers.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -185,7 +185,7 @@ are the responder.</p></li></ul></div></div></div></span></div><div><table width
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> PanResponderExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="pixelratio.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> PanResponderExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/pixelratio.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -185,7 +185,7 @@ inside of your <code>onPress</code> handler in <code>requestAnimationFrame</code
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span></div><h3><a class="anchor" name="profiling"></a>Profiling <a class="hash-link" href="#profiling">#</a></h3><p>Use the built-in Profiler to get detailed information about work done in
 the JavaScript thread and main thread side-by-side.</p><p>For iOS, Instruments are an invaluable tool, and on Android you should
-learn to use systrace.</p></div><div class="docs-prevnext"><a class="docs-next" href="upgrading.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+learn to use systrace.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/upgrading.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -3,10 +3,10 @@
  onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>lang<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>language<span class="token punctuation">:</span> lang<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
  &lt;Picker<span class="token punctuation">.</span>Item label<span class="token operator">=</span><span class="token string">&quot;Java&quot;</span> value<span class="token operator">=</span><span class="token string">&quot;java&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
  &lt;Picker<span class="token punctuation">.</span>Item label<span class="token operator">=</span><span class="token string">&quot;JavaScript&quot;</span> value<span class="token operator">=</span><span class="token string">&quot;js&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
-&lt;<span class="token operator">/</span>Picker<span class="token operator">&gt;</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange <span class="propType">function</span> <a class="hash-link" href="#onvaluechange">#</a></h4><div><p>Callback for when an item is selected. This is called with the following parameters:
+&lt;<span class="token operator">/</span>Picker<span class="token operator">&gt;</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange <span class="propType">function</span> <a class="hash-link" href="#onvaluechange">#</a></h4><div><p>Callback for when an item is selected. This is called with the following parameters:
  - <code>itemValue</code>: the <code>value</code> prop of the item that was selected
  - <code>itemPosition</code>: the index of the selected item in this picker</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectedvalue"></a>selectedValue <span class="propType">any</span> <a class="hash-link" href="#selectedvalue">#</a></h4><div><p>Value matching value of one of the items. Can be a string or an integer.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">pickerStyleType</span> <a class="hash-link" href="#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enabled"></a><span class="platform">android</span>enabled <span class="propType">bool</span> <a class="hash-link" href="#enabled">#</a></h4><div><p>If set to false, the picker will be disabled, i.e. the user will not be able to make a
-selection.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mode"></a><span class="platform">android</span>mode <span class="propType">enum(&#x27;dialog&#x27;, &#x27;dropdown&#x27;)</span> <a class="hash-link" href="#mode">#</a></h4><div><p>On Android, specifies how to display the selection items when the user taps on the picker:</p><ul><li>&#x27;dialog&#x27;: Show a modal dialog. This is the default.</li><li>&#x27;dropdown&#x27;: Shows a dropdown anchored to the picker view</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="prompt"></a><span class="platform">android</span>prompt <span class="propType">string</span> <a class="hash-link" href="#prompt">#</a></h4><div><p>Prompt string for this picker, used on Android in dialog mode as the title of the dialog.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemstyle"></a><span class="platform">ios</span>itemStyle <span class="propType">itemStylePropType</span> <a class="hash-link" href="#itemstyle">#</a></h4><div><p>Style to apply to each of the item labels.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="progressbarandroid.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+selection.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mode"></a><span class="platform">android</span>mode <span class="propType">enum(&#x27;dialog&#x27;, &#x27;dropdown&#x27;)</span> <a class="hash-link" href="#mode">#</a></h4><div><p>On Android, specifies how to display the selection items when the user taps on the picker:</p><ul><li>&#x27;dialog&#x27;: Show a modal dialog. This is the default.</li><li>&#x27;dropdown&#x27;: Shows a dropdown anchored to the picker view</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="prompt"></a><span class="platform">android</span>prompt <span class="propType">string</span> <a class="hash-link" href="#prompt">#</a></h4><div><p>Prompt string for this picker, used on Android in dialog mode as the title of the dialog.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemstyle"></a><span class="platform">ios</span>itemStyle <span class="propType">itemStylePropType</span> <a class="hash-link" href="#itemstyle">#</a></h4><div><p>Style to apply to each of the item labels.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/progressbarandroid.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -11,7 +11,7 @@ Settings &gt; Display &gt; Font size, on iOS it will always return the default p
@platform android</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getpixelsizeforlayoutsize"></a><span class="propType">static </span>getPixelSizeForLayoutSize<span class="propType">(layoutSize: number)</span> <a class="hash-link" href="#getpixelsizeforlayoutsize">#</a></h4><div><p>Converts a layout size (dp) to pixel size (px).</p><p>Guaranteed to return an integer number.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="roundtonearestpixel"></a><span class="propType">static </span>roundToNearestPixel<span class="propType">(layoutSize: number)</span> <a class="hash-link" href="#roundtonearestpixel">#</a></h4><div><p>Rounds a layout size (dp) to the nearest layout size that corresponds to
 an integer number of pixels. For example, on a device with a PixelRatio
 of 3, <code>PixelRatio.roundToNearestPixel(8.4) = 8.33</code>, which corresponds to
-exactly (8.33 * 3) = 25 pixels.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="startdetecting"></a><span class="propType">static </span>startDetecting<span class="propType">()</span> <a class="hash-link" href="#startdetecting">#</a></h4><div><p>// No-op for iOS, but used on the web. Should not be documented.</p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="description"></a>Description <a class="hash-link" href="#description">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/PixelRatio.md">Edit on GitHub</a></td></tr></tbody></table><div><h2><a class="anchor" name="pixel-grid-snapping"></a>Pixel Grid Snapping <a class="hash-link" href="#pixel-grid-snapping">#</a></h2><p>In iOS, you can specify positions and dimensions for elements with arbitrary precision, for example 29.674825. But, ultimately the physical display only have a fixed number of pixels, for example 640×960 for iphone 4 or 750×1334 for iphone 6. iOS tries to be as faithful as possible to the user value by spreading one original pixel into multiple ones to trick the eye. The downside of this technique is that it makes the resulting element look blurry.</p><p>In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.</p><p>We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you&#x27;re going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.</p><p>In React Native, everything in JS and within the layout engine work with arbitrary precision numbers. It&#x27;s only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.</p></div></div><div class="docs-prevnext"><a class="docs-next" href="pushnotificationios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+exactly (8.33 * 3) = 25 pixels.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="startdetecting"></a><span class="propType">static </span>startDetecting<span class="propType">()</span> <a class="hash-link" href="#startdetecting">#</a></h4><div><p>// No-op for iOS, but used on the web. Should not be documented.</p></div></div></div></span></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="description"></a>Description <a class="hash-link" href="#description">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/PixelRatio.md">Edit on GitHub</a></td></tr></tbody></table><div><h2><a class="anchor" name="pixel-grid-snapping"></a>Pixel Grid Snapping <a class="hash-link" href="#pixel-grid-snapping">#</a></h2><p>In iOS, you can specify positions and dimensions for elements with arbitrary precision, for example 29.674825. But, ultimately the physical display only have a fixed number of pixels, for example 640×960 for iphone 4 or 750×1334 for iphone 6. iOS tries to be as faithful as possible to the user value by spreading one original pixel into multiple ones to trick the eye. The downside of this technique is that it makes the resulting element look blurry.</p><p>In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.</p><p>We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you&#x27;re going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.</p><p>In React Native, everything in JS and within the layout engine work with arbitrary precision numbers. It&#x27;s only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.</p></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/pushnotificationios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -10,7 +10,7 @@ BigButton<span class="token punctuation">.</span>android<span class="token punct

 <span class="token keyword">if</span><span class="token punctuation">(</span>Platform<span class="token punctuation">.</span>Version <span class="token operator">===</span> <span class="token string">&#x27;5.0&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">&#x27;Running on Lollipop!&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span></div></div><div class="docs-prevnext"><a class="docs-next" href="native-modules-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/native-modules-ios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -12,7 +12,7 @@ that the app is loading or there is some activity in the app.</p><p>Example:</p>
      style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>loadingComponent<span class="token punctuation">}</span>
    <span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="color"></a>color <span class="propType"><a href="colors.html">color</a></span> <a class="hash-link" href="#color">#</a></h4><div><p>Color of the progress bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="indeterminate"></a>indeterminate <span class="propType">indeterminateType</span> <a class="hash-link" href="#indeterminate">#</a></h4><div><p>If the progress bar will show indeterminate progress. Note that this
+<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="color"></a>color <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="#color">#</a></h4><div><p>Color of the progress bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="indeterminate"></a>indeterminate <span class="propType">indeterminateType</span> <a class="hash-link" href="#indeterminate">#</a></h4><div><p>If the progress bar will show indeterminate progress. Note that this
 can only be false if styleAttr is Horizontal.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progress"></a>progress <span class="propType">number</span> <a class="hash-link" href="#progress">#</a></h4><div><p>The progress value (between 0 and 1).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="styleattr"></a>styleAttr <span class="propType">STYLE_ATTRIBUTES</span> <a class="hash-link" href="#styleattr">#</a></h4><div><p>Style of the ProgressBar. One of:</p><ul><li>Horizontal</li><li>Normal (default)</li><li>Small</li><li>Large</li><li>Inverse</li><li>SmallInverse</li><li>LargeInverse</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ProgressBarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>

 <span class="token keyword">var</span> ProgressBar <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;ProgressBarAndroid&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@@ -108,7 +108,7 @@ can only be false if styleAttr is Horizontal.</p></div></div><div class="prop"><
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ProgressBarAndroidExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="progressviewios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ProgressBarAndroidExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/progressviewios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -177,7 +177,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
  <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> React<span class="token punctuation">.</span>Component <span class="token punctuation">{</span>
    <span class="token keyword">return</span> &lt;NotificationPermissionExample <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="statusbarios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/statusbarios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -6,7 +6,7 @@ set the height of the view directly (discouraged) or make sure all parent
 views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the
 view stack can lead to errors here, which the element inspector makes
 easy to debug.</p><p>Doesn&#x27;t yet support other contained responders from blocking this scroll
-view from becoming the responder.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentcontainerstyle"></a>contentContainerStyle <span class="propType">StyleSheetPropType(ViewStylePropTypes)</span> <a class="hash-link" href="#contentcontainerstyle">#</a></h4><div><p>These styles will be applied to the scroll view content container which
+view from becoming the responder.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentcontainerstyle"></a>contentContainerStyle <span class="propType">StyleSheetPropType(ViewStylePropTypes)</span> <a class="hash-link" href="#contentcontainerstyle">#</a></h4><div><p>These styles will be applied to the scroll view content container which
 wraps all of the child views. Example:</p><p>  return (
    &lt;ScrollView contentContainerStyle={styles.contentContainer}&gt;
    &lt;/ScrollView&gt;
@@ -33,7 +33,7 @@ functionality for the ScrollView.</p><p>See <a href="docs/refreshcontrol.html" t
 <code>hidden</code>) are removed from their native backing superview when offscreen.
 This can improve scrolling performance on long lists. The default value is
 true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a>scrollEnabled <span class="propType">bool</span> <a class="hash-link" href="#scrollenabled">#</a></h4><div><p>When false, the content does not scroll.
-The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showshorizontalscrollindicator"></a>showsHorizontalScrollIndicator <span class="propType">bool</span> <a class="hash-link" href="#showshorizontalscrollindicator">#</a></h4><div><p>When true, shows a horizontal scroll indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showsverticalscrollindicator"></a>showsVerticalScrollIndicator <span class="propType">bool</span> <a class="hash-link" href="#showsverticalscrollindicator">#</a></h4><div><p>When true, shows a vertical scroll indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="shadowproptypesios.html#style">ShadowPropTypesIOS#style...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRightWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderStyle <span class="propType">enum(&#x27;solid&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>elevation <span class="propType">number</span> <div><p>(Android-only) Sets the elevation of a view, using Android&#x27;s underlying
+The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showshorizontalscrollindicator"></a>showsHorizontalScrollIndicator <span class="propType">bool</span> <a class="hash-link" href="#showshorizontalscrollindicator">#</a></h4><div><p>When true, shows a horizontal scroll indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showsverticalscrollindicator"></a>showsVerticalScrollIndicator <span class="propType">bool</span> <a class="hash-link" href="#showsverticalscrollindicator">#</a></h4><div><p>When true, shows a vertical scroll indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="shadowproptypesios.html#style">ShadowPropTypesIOS#style...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRightWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderStyle <span class="propType">enum(&#x27;solid&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>elevation <span class="propType">number</span> <div><p>(Android-only) Sets the elevation of a view, using Android&#x27;s underlying
 <a href="https://developer.android.com/training/material/shadows-clipping.html#Elevation" target="_blank">elevation API</a>.
 This adds a drop shadow to the item and affects z-order for overlapping views.
 Only supported on Android 5.0+, has no effect on earlier versions.</p></div></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="sendmomentumevents"></a><span class="platform">android</span>sendMomentumEvents <span class="propType">bool</span> <a class="hash-link" href="#sendmomentumevents">#</a></h4><div><p>When true, momentum events will be sent from Android
@@ -203,7 +203,7 @@ THUMBS <span class="token operator">=</span> THUMBS<span class="token punctuatio
    width<span class="token punctuation">:</span> <span class="token number">64</span><span class="token punctuation">,</span>
    height<span class="token punctuation">:</span> <span class="token number">64</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="segmentedcontrolios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/segmentedcontrolios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -34,7 +34,7 @@ android <span class="token punctuation">{</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
-<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span></div></div><div class="docs-prevnext"><a class="docs-next" href="android-ui-performance.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/android-ui-performance.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -15,7 +15,7 @@ mounted. One use case is to specify status bar styles per route using <code>Navi
     <span class="token punctuation">}</span>
   <span class="token operator">/</span><span class="token operator">&gt;</span>
 &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="animated"></a>animated <span class="propType">bool</span> <a class="hash-link" href="#animated">#</a></h4><div><p>If the transition between status bar property changes should be animated.
-Supported for backgroundColor, barStyle and hidden.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hidden"></a>hidden <span class="propType">bool</span> <a class="hash-link" href="#hidden">#</a></h4><div><p>If the status bar is hidden.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="backgroundcolor"></a><span class="platform">android</span>backgroundColor <span class="propType"><a href="colors.html">color</a></span> <a class="hash-link" href="#backgroundcolor">#</a></h4><div><p>The background color of the status bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="translucent"></a><span class="platform">android</span>translucent <span class="propType">bool</span> <a class="hash-link" href="#translucent">#</a></h4><div><p>If the status bar is translucent.
+Supported for backgroundColor, barStyle and hidden.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hidden"></a>hidden <span class="propType">bool</span> <a class="hash-link" href="#hidden">#</a></h4><div><p>If the status bar is hidden.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="backgroundcolor"></a><span class="platform">android</span>backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="#backgroundcolor">#</a></h4><div><p>The background color of the status bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="translucent"></a><span class="platform">android</span>translucent <span class="propType">bool</span> <a class="hash-link" href="#translucent">#</a></h4><div><p>If the status bar is translucent.
 When translucent is set to true, the app will draw under the status bar.
 This is useful when using a semi transparent status bar color.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="barstyle"></a><span class="platform">ios</span>barStyle <span class="propType">enum(&#x27;default&#x27;, &#x27;light-content&#x27;)</span> <a class="hash-link" href="#barstyle">#</a></h4><div><p>Sets the color of the status bar text.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="networkactivityindicatorvisible"></a><span class="platform">ios</span>networkActivityIndicatorVisible <span class="propType">bool</span> <a class="hash-link" href="#networkactivityindicatorvisible">#</a></h4><div><p>If the network activity indicator should be visible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showhidetransition"></a><span class="platform">ios</span>showHideTransition <span class="propType">enum(&#x27;fade&#x27;, &#x27;slide&#x27;)</span> <a class="hash-link" href="#showhidetransition">#</a></h4><div><p>The transition effect when showing and hiding the status bar using the <code>hidden</code>
 prop. Defaults to &#x27;fade&#x27;.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/StatusBarExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
@@ -208,7 +208,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
    marginBottom<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
    fontWeight<span class="token punctuation">:</span> <span class="token string">&#x27;bold&#x27;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="switch.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/switch.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -99,7 +99,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
    backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;#eeeeee&#x27;</span><span class="token punctuation">,</span>
    padding<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="stylesheet.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/stylesheet.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -35,7 +35,7 @@
 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token comment" spellcheck="true">
 // ... in another file ...
-</span>&lt;List style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>list<span class="token punctuation">}</span> elementStyle<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>listElement<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div><h2><a class="anchor" name="supported-properties"></a>Supported Properties <a class="hash-link" href="#supported-properties">#</a></h2><p>You can checkout latest support of CSS Properties in following Links.</p><ul><li><a href="docs/view.html#style" target="_blank">View Properties</a></li><li><a href="docs/image.html#style" target="_blank">Image Properties</a></li><li><a href="docs/text.html#style" target="_blank">Text Properties</a></li><li><a href="docs/flexbox.html#content" target="_blank">Flex Properties</a></li><li><a href="docs/transforms.html#content" target="_blank">Transform Properties</a></li></ul></div><div class="docs-prevnext"><a class="docs-next" href="images.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+</span>&lt;List style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>list<span class="token punctuation">}</span> elementStyle<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>listElement<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div><h2><a class="anchor" name="supported-properties"></a>Supported Properties <a class="hash-link" href="#supported-properties">#</a></h2><p>You can checkout latest support of CSS Properties in following Links.</p><ul><li><a href="docs/view.html#style" target="_blank">View Properties</a></li><li><a href="docs/image.html#style" target="_blank">Image Properties</a></li><li><a href="docs/text.html#style" target="_blank">Text Properties</a></li><li><a href="docs/flexbox.html#content" target="_blank">Flex Properties</a></li><li><a href="docs/transforms.html#content" target="_blank">Transform Properties</a></li></ul></div><div class="docs-prevnext"><a class="docs-next" href="docs/images.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -26,7 +26,7 @@ Example:</p><div class="prism language-javascript">  <span class="token punctuat
 by it look crisp) and will try to match the standard width of a thin line
 on the underlying platform. However, you should not rely on it being a
 constant size, because on different platforms and screen densities its
-value may be calculated differently.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="flatten"></a>flatten<span class="propType">: CallExpression</span> <a class="hash-link" href="#flatten">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="toastandroid.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+value may be calculated differently.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="flatten"></a>flatten<span class="propType">: CallExpression</span> <a class="hash-link" href="#flatten">#</a></h4></div></div></span></div><div class="docs-prevnext"><a class="docs-next" href="docs/toastandroid.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -19,7 +19,7 @@
    <span class="token string">&quot;source-map&quot;</span>
  <span class="token punctuation">]</span>
 <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span></div><p>Note: you may have to install/upgrade/link Node.js and other parts of your environment in order for the tests to run correctly.  Check out the latest setup in <a href="https://github.com/facebook/react-native/blob/master/.travis.yml#L11-24" target="_blank">.travis.yml</a></p><h2><a class="anchor" name="integration-tests-ios-only"></a>Integration Tests (iOS only) <a class="hash-link" href="#integration-tests-ios-only">#</a></h2><p>React Native provides facilities to make it easier to test integrated components that require both native and JS components to communicate across the bridge.  The two main components are <code>RCTTestRunner</code> and <code>RCTTestModule</code>.  <code>RCTTestRunner</code> sets up the ReactNative environment and provides facilities to run the tests as <code>XCTestCase</code>s in Xcode (<code>runTest:module</code> is the simplest method).  <code>RCTTestModule</code> is exported to JS as <code>NativeModules.TestModule</code>.  The tests themselves are written in JS, and must call <code>TestModule.markTestCompleted()</code> when they are done, otherwise the test will timeout and fail.  Test failures are primarily indicated by throwing a JS exception.  It is also possible to test error conditions with <code>runTest:module:initialProps:expectErrorRegex:</code> or <code>runTest:module:initialProps:expectErrorBlock:</code> which will expect an error to be thrown and verify the error matches the provided criteria.  See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestHarnessTest.js" target="_blank"><code>IntegrationTestHarnessTest.js</code></a>, <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerIntegrationTests.m" target="_blank"><code>UIExplorerIntegrationTests.m</code></a>, and <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestsApp.js" target="_blank">IntegrationTestsApp.js</a> for example usage and integration points.</p><p>You can run integration tests locally with cmd+U in the IntegrationTest and UIExplorer apps in Xcode.</p><h2><a class="anchor" name="snapshot-tests-ios-only"></a>Snapshot Tests (iOS only) <a class="hash-link" href="#snapshot-tests-ios-only">#</a></h2><p>A common type of integration test is the snapshot test.  These tests render a component, and verify snapshots of the screen against reference images using <code>TestModule.verifySnapshot()</code>, using the <a href="https://github.com/facebook/ios-snapshot-test-case" target="_blank"><code>FBSnapshotTestCase</code></a> library behind the scenes.  Reference images are recorded by setting <code>recordMode = YES</code> on the <code>RCTTestRunner</code>, then running the tests.  Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it&#x27;s recommended that you enforce tests are run with the correct configuration.  It&#x27;s also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies.  See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/SimpleSnapshotTest.js" target="_blank"><code>SimpleSnapshotTest</code></a> for a basic example.</p><p>If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you&#x27;ll need to re-record the snapshot reference image.  To do this, simply change to <code>_runner.recordMode = YES;</code> in <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m#L42" target="_blank">UIExplorer/UIExplorerSnapshotTests.m</a>, re-run the failing tests, then flip record back to <code>NO</code> and submit/update your PR and wait to see if the Travis build passes.</p></div><div class="docs-prevnext"><a class="docs-next" href="javascript-environment.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span></div><p>Note: you may have to install/upgrade/link Node.js and other parts of your environment in order for the tests to run correctly.  Check out the latest setup in <a href="https://github.com/facebook/react-native/blob/master/.travis.yml#L11-24" target="_blank">.travis.yml</a></p><h2><a class="anchor" name="integration-tests-ios-only"></a>Integration Tests (iOS only) <a class="hash-link" href="#integration-tests-ios-only">#</a></h2><p>React Native provides facilities to make it easier to test integrated components that require both native and JS components to communicate across the bridge.  The two main components are <code>RCTTestRunner</code> and <code>RCTTestModule</code>.  <code>RCTTestRunner</code> sets up the ReactNative environment and provides facilities to run the tests as <code>XCTestCase</code>s in Xcode (<code>runTest:module</code> is the simplest method).  <code>RCTTestModule</code> is exported to JS as <code>NativeModules.TestModule</code>.  The tests themselves are written in JS, and must call <code>TestModule.markTestCompleted()</code> when they are done, otherwise the test will timeout and fail.  Test failures are primarily indicated by throwing a JS exception.  It is also possible to test error conditions with <code>runTest:module:initialProps:expectErrorRegex:</code> or <code>runTest:module:initialProps:expectErrorBlock:</code> which will expect an error to be thrown and verify the error matches the provided criteria.  See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestHarnessTest.js" target="_blank"><code>IntegrationTestHarnessTest.js</code></a>, <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerIntegrationTests.m" target="_blank"><code>UIExplorerIntegrationTests.m</code></a>, and <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestsApp.js" target="_blank">IntegrationTestsApp.js</a> for example usage and integration points.</p><p>You can run integration tests locally with cmd+U in the IntegrationTest and UIExplorer apps in Xcode.</p><h2><a class="anchor" name="snapshot-tests-ios-only"></a>Snapshot Tests (iOS only) <a class="hash-link" href="#snapshot-tests-ios-only">#</a></h2><p>A common type of integration test is the snapshot test.  These tests render a component, and verify snapshots of the screen against reference images using <code>TestModule.verifySnapshot()</code>, using the <a href="https://github.com/facebook/ios-snapshot-test-case" target="_blank"><code>FBSnapshotTestCase</code></a> library behind the scenes.  Reference images are recorded by setting <code>recordMode = YES</code> on the <code>RCTTestRunner</code>, then running the tests.  Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it&#x27;s recommended that you enforce tests are run with the correct configuration.  It&#x27;s also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies.  See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/SimpleSnapshotTest.js" target="_blank"><code>SimpleSnapshotTest</code></a> for a basic example.</p><p>If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you&#x27;ll need to re-record the snapshot reference image.  To do this, simply change to <code>_runner.recordMode = YES;</code> in <a href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m#L42" target="_blank">UIExplorer/UIExplorerSnapshotTests.m</a>, re-run the failing tests, then flip record back to <code>NO</code> and submit/update your PR and wait to see if the Travis build passes.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/javascript-environment.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -25,9 +25,9 @@ each other on account of the literal newlines:</p><div class="prism language-jav
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 <span class="token punctuation">}</span><span class="token punctuation">;</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible  <a class="hash-link" href="#accessible">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="numberoflines"></a>numberOfLines <span class="propType">number</span> <a class="hash-link" href="#numberoflines">#</a></h4><div><p>Used to truncate the text with an ellipsis after computing the text
 layout, including line wrapping, such that the total number of lines
-does not exceed this number.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with</p><p>  <code>{nativeEvent: {layout: {x, y, width, height}}}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpress"></a>onPress <span class="propType">function</span> <a class="hash-link" href="#onpress">#</a></h4><div><p>This function is called on press.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="view.html#style">View#style...</a></h6></div><div class="prop"><h6 class="propTitle">color <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">fontFamily <span class="propType">string</span> </h6></div><div class="prop"><h6 class="propTitle">fontSize <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">fontStyle <span class="propType">enum(&#x27;normal&#x27;, &#x27;italic&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">fontWeight <span class="propType">enum(&#x27;normal&#x27;, &#x27;bold&#x27;, &#x27;100&#x27;, &#x27;200&#x27;, &#x27;300&#x27;, &#x27;400&#x27;, &#x27;500&#x27;, &#x27;600&#x27;, &#x27;700&#x27;, &#x27;800&#x27;, &#x27;900&#x27;)</span> <div><p>Specifies font weight. The values &#x27;normal&#x27; and &#x27;bold&#x27; are supported for
+does not exceed this number.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with</p><p>  <code>{nativeEvent: {layout: {x, y, width, height}}}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpress"></a>onPress <span class="propType">function</span> <a class="hash-link" href="#onpress">#</a></h4><div><p>This function is called on press.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="view.html#style">View#style...</a></h6></div><div class="prop"><h6 class="propTitle">color <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">fontFamily <span class="propType">string</span> </h6></div><div class="prop"><h6 class="propTitle">fontSize <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">fontStyle <span class="propType">enum(&#x27;normal&#x27;, &#x27;italic&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">fontWeight <span class="propType">enum(&#x27;normal&#x27;, &#x27;bold&#x27;, &#x27;100&#x27;, &#x27;200&#x27;, &#x27;300&#x27;, &#x27;400&#x27;, &#x27;500&#x27;, &#x27;600&#x27;, &#x27;700&#x27;, &#x27;800&#x27;, &#x27;900&#x27;)</span> <div><p>Specifies font weight. The values &#x27;normal&#x27; and &#x27;bold&#x27; are supported for
 most fonts. Not all fonts have a variant for each of the numeric values,
-in that case the closest one is chosen.</p></div></h6></div><div class="prop"><h6 class="propTitle">lineHeight <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">textAlign <span class="propType">enum(&#x27;auto&#x27;, &#x27;left&#x27;, &#x27;right&#x27;, &#x27;center&#x27;, &#x27;justify&#x27;)</span> <div><p>Specifies text alignment. The value &#x27;justify&#x27; is only supported on iOS.</p></div></h6></div><div class="prop"><h6 class="propTitle">textShadowColor <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">textShadowOffset <span class="propType">{width: number, height: number}</span> </h6></div><div class="prop"><h6 class="propTitle">textShadowRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>textAlignVertical <span class="propType">enum(&#x27;auto&#x27;, &#x27;top&#x27;, &#x27;bottom&#x27;, &#x27;center&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>letterSpacing <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationColor <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationLine <span class="propType">enum(&#x27;none&#x27;, &#x27;underline&#x27;, &#x27;line-through&#x27;, &#x27;underline line-through&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationStyle <span class="propType">enum(&#x27;solid&#x27;, &#x27;double&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>writingDirection <span class="propType">enum(&#x27;auto&#x27;, &#x27;ltr&#x27;, &#x27;rtl&#x27;)</span> </h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="allowfontscaling"></a><span class="platform">ios</span>allowFontScaling <span class="propType">bool</span> <a class="hash-link" href="#allowfontscaling">#</a></h4><div><p>Specifies should fonts scale to respect Text Size accessibility setting on iOS.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="suppresshighlighting"></a><span class="platform">ios</span>suppressHighlighting <span class="propType">bool</span> <a class="hash-link" href="#suppresshighlighting">#</a></h4><div><p>When true, no visual change is made when text is pressed down. By
+in that case the closest one is chosen.</p></div></h6></div><div class="prop"><h6 class="propTitle">lineHeight <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">textAlign <span class="propType">enum(&#x27;auto&#x27;, &#x27;left&#x27;, &#x27;right&#x27;, &#x27;center&#x27;, &#x27;justify&#x27;)</span> <div><p>Specifies text alignment. The value &#x27;justify&#x27; is only supported on iOS.</p></div></h6></div><div class="prop"><h6 class="propTitle">textShadowColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">textShadowOffset <span class="propType">{width: number, height: number}</span> </h6></div><div class="prop"><h6 class="propTitle">textShadowRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>textAlignVertical <span class="propType">enum(&#x27;auto&#x27;, &#x27;top&#x27;, &#x27;bottom&#x27;, &#x27;center&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>letterSpacing <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationLine <span class="propType">enum(&#x27;none&#x27;, &#x27;underline&#x27;, &#x27;line-through&#x27;, &#x27;underline line-through&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationStyle <span class="propType">enum(&#x27;solid&#x27;, &#x27;double&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>writingDirection <span class="propType">enum(&#x27;auto&#x27;, &#x27;ltr&#x27;, &#x27;rtl&#x27;)</span> </h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="allowfontscaling"></a><span class="platform">ios</span>allowFontScaling <span class="propType">bool</span> <a class="hash-link" href="#allowfontscaling">#</a></h4><div><p>Specifies should fonts scale to respect Text Size accessibility setting on iOS.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="suppresshighlighting"></a><span class="platform">ios</span>suppressHighlighting <span class="propType">bool</span> <a class="hash-link" href="#suppresshighlighting">#</a></h4><div><p>When true, no visual change is made when text is pressed down. By
 default, a gray oval highlights the text on press down.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="description"></a>Description <a class="hash-link" href="#description">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/Text.md">Edit on GitHub</a></td></tr></tbody></table><div><h2><a class="anchor" name="nested-text"></a>Nested Text <a class="hash-link" href="#nested-text">#</a></h2><p>In iOS, the way to display formatted text is by using <code>NSAttributedString</code>: you give the text that you want to display and annotate ranges with some specific formatting. In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.</p><div class="prism language-javascript">&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontWeight<span class="token punctuation">:</span> <span class="token string">&#x27;bold&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
  I am bold
  &lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">:</span> <span class="token string">&#x27;red&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
@@ -74,7 +74,7 @@ html <span class="token punctuation">{</span>
  &lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token punctuation">:</span> <span class="token string">&#x27;red&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
    and red
  &lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
-&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span></div><p>We believe that this more constrained way to style text will yield better apps:</p><ul><li><p>(Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.</p></li><li><p>(Implementor) The implementation of React Native is also simplified. We do not need to have a <code>fontFamily</code> field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn&#x27;t leak to other components or the system itself.</p></li></ul></div></div><div class="docs-prevnext"><a class="docs-next" href="textinput.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span></div><p>We believe that this more constrained way to style text will yield better apps:</p><ul><li><p>(Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.</p></li><li><p>(Implementor) The implementation of React Native is also simplified. We do not need to have a <code>fontFamily</code> field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn&#x27;t leak to other components or the system itself.</p></li></ul></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/textinput.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -8,7 +8,7 @@ example:</p><div class="prism language-javascript">  &lt;TextInput
    style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>height<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> borderColor<span class="token punctuation">:</span> <span class="token string">&#x27;gray&#x27;</span><span class="token punctuation">,</span> borderWidth<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
    onChangeText<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
    value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>text<span class="token punctuation">}</span>
-  <span class="token operator">/</span><span class="token operator">&gt;</span></div><p>Note that some props are only available with <code>multiline={true/false}</code>:</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autocapitalize"></a>autoCapitalize <span class="propType">enum(&#x27;none&#x27;, &#x27;sentences&#x27;, &#x27;words&#x27;, &#x27;characters&#x27;)</span> <a class="hash-link" href="#autocapitalize">#</a></h4><div><p>Can tell TextInput to automatically capitalize certain characters.</p><ul><li>characters: all characters,</li><li>words: first letter of each word</li><li>sentences: first letter of each sentence (default)</li><li>none: don&#x27;t auto capitalize anything</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autocorrect"></a>autoCorrect <span class="propType">bool</span> <a class="hash-link" href="#autocorrect">#</a></h4><div><p>If false, disables auto-correct. The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autofocus"></a>autoFocus <span class="propType">bool</span> <a class="hash-link" href="#autofocus">#</a></h4><div><p>If true, focuses the input on componentDidMount.
+  <span class="token operator">/</span><span class="token operator">&gt;</span></div><p>Note that some props are only available with <code>multiline={true/false}</code>:</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autocapitalize"></a>autoCapitalize <span class="propType">enum(&#x27;none&#x27;, &#x27;sentences&#x27;, &#x27;words&#x27;, &#x27;characters&#x27;)</span> <a class="hash-link" href="#autocapitalize">#</a></h4><div><p>Can tell TextInput to automatically capitalize certain characters.</p><ul><li>characters: all characters,</li><li>words: first letter of each word</li><li>sentences: first letter of each sentence (default)</li><li>none: don&#x27;t auto capitalize anything</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autocorrect"></a>autoCorrect <span class="propType">bool</span> <a class="hash-link" href="#autocorrect">#</a></h4><div><p>If false, disables auto-correct. The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autofocus"></a>autoFocus <span class="propType">bool</span> <a class="hash-link" href="#autofocus">#</a></h4><div><p>If true, focuses the input on componentDidMount.
 The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="defaultvalue"></a>defaultValue <span class="propType">string</span> <a class="hash-link" href="#defaultvalue">#</a></h4><div><p>Provides an initial value that will change when the user starts typing.
 Useful for simple use-cases where you don&#x27;t want to deal with listening
 to events and updating the value prop to keep the controlled state in sync.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="editable"></a>editable <span class="propType">bool</span> <a class="hash-link" href="#editable">#</a></h4><div><p>If false, text is not editable. The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardtype"></a>keyboardType <span class="propType">enum(&#x27;default&#x27;, &#x27;email-address&#x27;, &#x27;numeric&#x27;, &#x27;phone-pad&#x27;, &#x27;ascii-capable&#x27;, &#x27;numbers-and-punctuation&#x27;, &#x27;url&#x27;, &#x27;number-pad&#x27;, &#x27;name-phone-pad&#x27;, &#x27;decimal-pad&#x27;, &#x27;twitter&#x27;, &#x27;web-search&#x27;)</span> <a class="hash-link" href="#keyboardtype">#</a></h4><div><p>Determines which keyboard to open, e.g.<code>numeric</code>.</p><p>The following values work across platforms:
@@ -19,7 +19,7 @@ instead of implementing the logic in JS to avoid flicker.</p></div></div><div cl
 The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onblur"></a>onBlur <span class="propType">function</span> <a class="hash-link" href="#onblur">#</a></h4><div><p>Callback that is called when the text input is blurred</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchange"></a>onChange <span class="propType">function</span> <a class="hash-link" href="#onchange">#</a></h4><div><p>Callback that is called when the text input&#x27;s text changes.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchangetext"></a>onChangeText <span class="propType">function</span> <a class="hash-link" href="#onchangetext">#</a></h4><div><p>Callback that is called when the text input&#x27;s text changes.
 Changed text is passed as an argument to the callback handler.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendediting"></a>onEndEditing <span class="propType">function</span> <a class="hash-link" href="#onendediting">#</a></h4><div><p>Callback that is called when text input ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onfocus"></a>onFocus <span class="propType">function</span> <a class="hash-link" href="#onfocus">#</a></h4><div><p>Callback that is called when the text input is focused</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with <code>{x, y, width, height}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onselectionchange"></a>onSelectionChange <span class="propType">function</span> <a class="hash-link" href="#onselectionchange">#</a></h4><div><p>Callback that is called when the text input selection is changed</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onsubmitediting"></a>onSubmitEditing <span class="propType">function</span> <a class="hash-link" href="#onsubmitediting">#</a></h4><div><p>Callback that is called when the text input&#x27;s submit button is pressed.
 Invalid if multiline={true} is specified.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="placeholder"></a>placeholder <span class="propType">string</span> <a class="hash-link" href="#placeholder">#</a></h4><div><p>The string that will be rendered before text input has been entered</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="placeholdertextcolor"></a>placeholderTextColor <span class="propType">string</span> <a class="hash-link" href="#placeholdertextcolor">#</a></h4><div><p>The text color of the placeholder string</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="securetextentry"></a>secureTextEntry <span class="propType">bool</span> <a class="hash-link" href="#securetextentry">#</a></h4><div><p>If true, the text input obscures the text entered so that sensitive text
-like passwords stay secure. The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectioncolor"></a>selectionColor <span class="propType">string</span> <a class="hash-link" href="#selectioncolor">#</a></h4><div><p>The highlight (and cursor on ios) color of the text input</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType"><a href="text.html#style">Text#style</a></span> <a class="hash-link" href="#style">#</a></h4><div><p>Styles</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value <span class="propType">string</span> <a class="hash-link" href="#value">#</a></h4><div><p>The value to show for the text input. TextInput is a controlled
+like passwords stay secure. The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectioncolor"></a>selectionColor <span class="propType">string</span> <a class="hash-link" href="#selectioncolor">#</a></h4><div><p>The highlight (and cursor on ios) color of the text input</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType"><a href="docs/text.html#style">Text#style</a></span> <a class="hash-link" href="#style">#</a></h4><div><p>Styles</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value <span class="propType">string</span> <a class="hash-link" href="#value">#</a></h4><div><p>The value to show for the text input. TextInput is a controlled
 component, which means the native value will be forced to match this
 value prop if provided. For most uses this works great, but in some
 cases this may cause flickering - one common cause is preventing edits
@@ -34,7 +34,7 @@ onSubmitEditing event instead of inserting a newline into the field.</p></div></
 automatically enables it when there is text. The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardappearance"></a><span class="platform">ios</span>keyboardAppearance <span class="propType">enum(&#x27;default&#x27;, &#x27;light&#x27;, &#x27;dark&#x27;)</span> <a class="hash-link" href="#keyboardappearance">#</a></h4><div><p>Determines the color of the keyboard.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onkeypress"></a><span class="platform">ios</span>onKeyPress <span class="propType">function</span> <a class="hash-link" href="#onkeypress">#</a></h4><div><p>Callback that is called when a key is pressed.
 Pressed key value is passed as an argument to the callback handler.
 Fires before onChange callbacks.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="returnkeytype"></a><span class="platform">ios</span>returnKeyType <span class="propType">enum(&#x27;default&#x27;, &#x27;go&#x27;, &#x27;google&#x27;, &#x27;join&#x27;, &#x27;next&#x27;, &#x27;route&#x27;, &#x27;search&#x27;, &#x27;send&#x27;, &#x27;yahoo&#x27;, &#x27;done&#x27;, &#x27;emergency-call&#x27;)</span> <a class="hash-link" href="#returnkeytype">#</a></h4><div><p>Determines how the return key should look.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selecttextonfocus"></a><span class="platform">ios</span>selectTextOnFocus <span class="propType">bool</span> <a class="hash-link" href="#selecttextonfocus">#</a></h4><div><p>If true, all text will automatically be selected on focus</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectionstate"></a><span class="platform">ios</span>selectionState <span class="propType">DocumentSelectionState</span> <a class="hash-link" href="#selectionstate">#</a></h4><div><p>See DocumentSelectionState.js, some state that is responsible for
-maintaining selection information for a document</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="toolbarandroid.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+maintaining selection information for a document</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/toolbarandroid.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -14,7 +14,7 @@
      <span class="token number">500</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>We strongly discourage using the global <code>setTimeout(...)</code> and recommend instead that you use <code>this.setTimeout(...)</code> provided by react-timer-mixin. This will eliminate a lot of hard work tracking down bugs, such as crashes caused by timeouts firing after a component has been unmounted.</p></div><div class="docs-prevnext"><a class="docs-next" href="colors.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>We strongly discourage using the global <code>setTimeout(...)</code> and recommend instead that you use <code>this.setTimeout(...)</code> provided by react-timer-mixin. This will eliminate a lot of hard work tracking down bugs, such as crashes caused by timeouts firing after a component has been unmounted.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/colors.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -51,7 +51,7 @@ which takes the following parameters:</p><ol><li>String message: A string with t
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ToastExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="vibrationios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ToastExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/vibrationios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -18,7 +18,7 @@ onActionSelected<span class="token punctuation">:</span> <span class="token keyw
  <span class="token keyword">if</span> <span class="token punctuation">(</span>position <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment" spellcheck="true"> // index of &#x27;Settings&#x27;
 </span>    <span class="token function">showSettings<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="actions"></a>actions <span class="propType">[{title: string, icon: optionalImageSource, show: enum(&#x27;always&#x27;, &#x27;ifRoom&#x27;, &#x27;never&#x27;), showWithText: bool}]</span> <a class="hash-link" href="#actions">#</a></h4><div><p>Sets possible actions on the toolbar as part of the action menu. These are displayed as icons
+<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="actions"></a>actions <span class="propType">[{title: string, icon: optionalImageSource, show: enum(&#x27;always&#x27;, &#x27;ifRoom&#x27;, &#x27;never&#x27;), showWithText: bool}]</span> <a class="hash-link" href="#actions">#</a></h4><div><p>Sets possible actions on the toolbar as part of the action menu. These are displayed as icons
 or text on the right side of the widget. If they don&#x27;t fit they are placed in an &#x27;overflow&#x27;
 menu.</p><p>This property takes an array of objects, where each object has the following keys:</p><ul><li><code>title</code>: <strong>required</strong>, the title of this action</li><li><code>icon</code>: the icon for this action, e.g. <code>require(&#x27;./some_icon.png&#x27;)</code></li><li><code>show</code>: when to show this action as an icon or hide it in the overflow menu: <code>always</code>,
 <code>ifRoom</code> or <code>never</code></li><li><code>showWithText</code>: boolean, whether to show text alongside the icon or not</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinsetend"></a>contentInsetEnd <span class="propType">number</span> <a class="hash-link" href="#contentinsetend">#</a></h4><div><p>Sets the content inset for the toolbar ending edge.</p><p>The content inset affects the valid area for Toolbar content other than
@@ -31,7 +31,7 @@ along well-known gridlines.</p></div></div><div class="prop"><h4 class="propTitl
 callback is the position of the action in the actions array.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="oniconclicked"></a>onIconClicked <span class="propType">function</span> <a class="hash-link" href="#oniconclicked">#</a></h4><div><p>Callback called when the icon is selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overflowicon"></a>overflowIcon <span class="propType">optionalImageSource</span> <a class="hash-link" href="#overflowicon">#</a></h4><div><p>Sets the overflow icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rtl"></a>rtl <span class="propType">bool</span> <a class="hash-link" href="#rtl">#</a></h4><div><p>Used to set the toolbar direction to RTL.
 In addition to this property you need to add</p><p>  android:supportsRtl=&quot;true&quot;</p><p>to your application AndroidManifest.xml and then call
 <code>setLayoutDirection(LayoutDirection.RTL)</code> in your MainActivity
-<code>onCreate</code> method.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitle"></a>subtitle <span class="propType">string</span> <a class="hash-link" href="#subtitle">#</a></h4><div><p>Sets the toolbar subtitle.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitlecolor"></a>subtitleColor <span class="propType"><a href="colors.html">color</a></span> <a class="hash-link" href="#subtitlecolor">#</a></h4><div><p>Sets the toolbar subtitle color.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a>title <span class="propType">string</span> <a class="hash-link" href="#title">#</a></h4><div><p>Sets the toolbar title.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a>titleColor <span class="propType"><a href="colors.html">color</a></span> <a class="hash-link" href="#titlecolor">#</a></h4><div><p>Sets the toolbar title color.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ToolbarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
+<code>onCreate</code> method.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitle"></a>subtitle <span class="propType">string</span> <a class="hash-link" href="#subtitle">#</a></h4><div><p>Sets the toolbar subtitle.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitlecolor"></a>subtitleColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="#subtitlecolor">#</a></h4><div><p>Sets the toolbar subtitle color.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a>title <span class="propType">string</span> <a class="hash-link" href="#title">#</a></h4><div><p>Sets the toolbar title.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a>titleColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="#titlecolor">#</a></h4><div><p>Sets the toolbar title color.</p></div></div></div></div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ToolbarAndroidExample.android.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>

 <span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token keyword">var</span> <span class="token punctuation">{</span>
@@ -148,7 +148,7 @@ In addition to this property you need to add</p><p>  android:supportsRtl=&quot;t
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ToolbarAndroidExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="touchablehighlight.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ToolbarAndroidExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/touchablehighlight.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -12,9 +12,9 @@ backgroundColor of the wrapped view isn&#x27;t explicitly set to an opaque color
      <span class="token operator">/</span><span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span></div><blockquote><p><strong>NOTE</strong>: TouchableHighlight supports only one child</p><p>If you wish to have several child components, wrap them in a View.</p></blockquote></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="activeopacity"></a>activeOpacity <span class="propType">number</span> <a class="hash-link" href="#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
-active.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onhideunderlay"></a>onHideUnderlay <span class="propType">function</span> <a class="hash-link" href="#onhideunderlay">#</a></h4><div><p>Called immediately after the underlay is hidden</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshowunderlay"></a>onShowUnderlay <span class="propType">function</span> <a class="hash-link" href="#onshowunderlay">#</a></h4><div><p>Called immediately after the underlay is shown</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType"><a href="view.html#style">View#style</a></span> <a class="hash-link" href="#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="underlaycolor"></a>underlayColor <span class="propType"><a href="colors.html">color</a></span> <a class="hash-link" href="#underlaycolor">#</a></h4><div><p>The color of the underlay that will show through when the touch is
-active.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="touchablenativefeedback.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">,</span></div><blockquote><p><strong>NOTE</strong>: TouchableHighlight supports only one child</p><p>If you wish to have several child components, wrap them in a View.</p></blockquote></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="activeopacity"></a>activeOpacity <span class="propType">number</span> <a class="hash-link" href="#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
+active.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onhideunderlay"></a>onHideUnderlay <span class="propType">function</span> <a class="hash-link" href="#onhideunderlay">#</a></h4><div><p>Called immediately after the underlay is hidden</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshowunderlay"></a>onShowUnderlay <span class="propType">function</span> <a class="hash-link" href="#onshowunderlay">#</a></h4><div><p>Called immediately after the underlay is shown</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType"><a href="docs/view.html#style">View#style</a></span> <a class="hash-link" href="#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="underlaycolor"></a>underlayColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="#underlaycolor">#</a></h4><div><p>The color of the underlay that will show through when the touch is
+active.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/touchablenativefeedback.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -13,7 +13,7 @@ of RCTView node with some additional properties set.</p><p>Background drawable o
      &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>TouchableNativeFeedback<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="background"></a>background <span class="propType">backgroundPropType</span> <a class="hash-link" href="#background">#</a></h4><div><p>Determines the type of background drawable that&#x27;s going to be used to
+<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="background"></a>background <span class="propType">backgroundPropType</span> <a class="hash-link" href="#background">#</a></h4><div><p>Determines the type of background drawable that&#x27;s going to be used to
 display feedback. It takes an object with <code>type</code> property and extra data
 depending on the <code>type</code>. It&#x27;s recommended to use one of the following
 static methods to generate that dictionary:</p><p>1) TouchableNativeFeedback.SelectableBackground() - will create object
@@ -26,7 +26,7 @@ object that represents ripple drawable with specified color (as a
 string). If property <code>borderless</code> evaluates to true the ripple will
 render outside of the view bounds (see native actionbar buttons as an
 example of that behavior). This background type is available on Android
-API level 21+</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="touchableopacity.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+API level 21+</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/touchableopacity.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -10,8 +10,8 @@ easy to add to an app without weird side-effects.</p><p>Example:</p><div class="
      <span class="token operator">/</span><span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>TouchableOpacity<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="activeopacity"></a>activeOpacity <span class="propType">number</span> <a class="hash-link" href="#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
-active.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="touchablewithoutfeedback.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="activeopacity"></a>activeOpacity <span class="propType">number</span> <a class="hash-link" href="#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
+active.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/touchablewithoutfeedback.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -5,7 +5,7 @@ that steals the responder lock).</p></div></div><div class="prop"><h4 class="pro
 move off of the button, before deactivating the button. Once deactivated,
 try moving it back and you&#x27;ll see that the button is once again
 reactivated! Move it back and forth several times while the scroll view
-is disabled. Ensure you pass in a constant to reduce memory allocations.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="view.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+is disabled. Ensure you pass in a constant to reduce memory allocations.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/view.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -293,7 +293,7 @@ class <span class="token class-name">AwesomeProject</span> extends <span class="
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 <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> AwesomeProject<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="videos.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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> AwesomeProject<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/videos.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -6,7 +6,7 @@ version of React Native:</p><h2><a class="anchor" name="1-upgrade-the-react-nati
 run <code>react-native init</code>, like the iOS and the Android sub-projects. To get these latest changes,
 run this in a terminal:</p><div class="prism language-javascript">$ react<span class="token operator">-</span>native upgrade</div><p>This will check your files against the latest template and perform the following:</p><ul><li>If there is a new file in the template, it is simply created.</li><li>If a file in the template is identical to your file, it is skipped.</li><li>If a file is different in your project than the template, you will be prompted; you have options
 to view a diff between your file and the template file, keep your file or overwrite it with the
-template version. If you are unsure, press <code>h</code> to get a list of possible commands.</li></ul><h1><a class="anchor" name="manual-upgrades"></a>Manual Upgrades <a class="hash-link" href="#manual-upgrades">#</a></h1><p>Xcode project format is pretty complex and sometimes it&#x27;s tricky to upgrade and merge new changes.</p><h3><a class="anchor" name="from-0-13-to-0-14"></a>From 0.13 to 0.14 <a class="hash-link" href="#from-0-13-to-0-14">#</a></h3><p>The major change in this version happened to the CLI (<a href="https://github.com/facebook/react-native/releases/tag/v0.14.0-rc" target="_blank">see changelog</a>) and static images (<a href="docs/images.html" target="_blank">see docs</a>). To use the new asset system in existing Xcode project, do the following:</p><p>Add new &quot;Run Script&quot; step to your project&#x27;s build phases:</p><p><img src="https://cloud.githubusercontent.com/assets/192222/11050044/871bf926-86f7-11e5-8908-736106457bcb.png" alt=""></p><p>Set the script to</p><div class="prism language-javascript"><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token operator">/</span>node_modules<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token operator">/</span>packager<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token operator">-</span>xcode<span class="token punctuation">.</span>sh</div><p><img src="https://cloud.githubusercontent.com/assets/192222/11050052/8f098252-86f7-11e5-994a-364aabbaa7d1.png" alt=""></p><p>Move main.jsbundle to Trash (it will be generated automatically by Xcode using the script above)</p><p><img src="https://cloud.githubusercontent.com/assets/192222/11050104/f3d025e2-86f7-11e5-9101-a4622236338d.png" alt=""></p><p>If you installed Node via nvm, you might experience &quot;react-native: command not found&quot;. See <a href="https://github.com/facebook/react-native/issues/3974" target="_blank">issues/3974</a> for workaround and <a href="https://github.com/facebook/react-native/pull/4015" target="_blank">pull/4015</a> for the fix.</p></div><div class="docs-prevnext"><a class="docs-next" href="platform-specific-code.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+template version. If you are unsure, press <code>h</code> to get a list of possible commands.</li></ul><h1><a class="anchor" name="manual-upgrades"></a>Manual Upgrades <a class="hash-link" href="#manual-upgrades">#</a></h1><p>Xcode project format is pretty complex and sometimes it&#x27;s tricky to upgrade and merge new changes.</p><h3><a class="anchor" name="from-0-13-to-0-14"></a>From 0.13 to 0.14 <a class="hash-link" href="#from-0-13-to-0-14">#</a></h3><p>The major change in this version happened to the CLI (<a href="https://github.com/facebook/react-native/releases/tag/v0.14.0-rc" target="_blank">see changelog</a>) and static images (<a href="docs/images.html" target="_blank">see docs</a>). To use the new asset system in existing Xcode project, do the following:</p><p>Add new &quot;Run Script&quot; step to your project&#x27;s build phases:</p><p><img src="https://cloud.githubusercontent.com/assets/192222/11050044/871bf926-86f7-11e5-8908-736106457bcb.png" alt=""></p><p>Set the script to</p><div class="prism language-javascript"><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token operator">/</span>node_modules<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token operator">/</span>packager<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token operator">-</span>xcode<span class="token punctuation">.</span>sh</div><p><img src="https://cloud.githubusercontent.com/assets/192222/11050052/8f098252-86f7-11e5-994a-364aabbaa7d1.png" alt=""></p><p>Move main.jsbundle to Trash (it will be generated automatically by Xcode using the script above)</p><p><img src="https://cloud.githubusercontent.com/assets/192222/11050104/f3d025e2-86f7-11e5-9101-a4622236338d.png" alt=""></p><p>If you installed Node via nvm, you might experience &quot;react-native: command not found&quot;. See <a href="https://github.com/facebook/react-native/issues/3974" target="_blank">issues/3974</a> for workaround and <a href="https://github.com/facebook/react-native/pull/4015" target="_blank">pull/4015</a> for the fix.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/platform-specific-code.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -39,7 +39,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
    backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;#eeeeee&#x27;</span><span class="token punctuation">,</span>
    padding<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="flexbox.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/flexbox.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -21,7 +21,7 @@ This player is only available in HTML5 enabled browsers. Please update your brow
 <a download="146-jsj-react-with-christopher-chedeau-and-jordan-walke.mp3" href="http://www.podtrac.com/pts/redirect.mp3/media.devchat.tv/js-jabber/JSJ146React.mp3?download=true?download=true">download the episode</a>
 </p>
 </audio>
-</span></div><div class="docs-prevnext"><a class="docs-next" href="style.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+</span></div><div class="docs-prevnext"><a class="docs-next" href="docs/style.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -38,7 +38,7 @@ for scrolling content when there are many subviews, most of which are
 offscreen. For this property to be effective, it must be applied to a
 view that contains many subviews that extend outside its bound. The
 subviews must also have overflow: hidden, as should the containing view
-(or one of its superviews).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="shadowproptypesios.html#style">ShadowPropTypesIOS#style...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRightWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderStyle <span class="propType">enum(&#x27;solid&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType"><a href="colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>elevation <span class="propType">number</span> <div><p>(Android-only) Sets the elevation of a view, using Android&#x27;s underlying
+(or one of its superviews).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="shadowproptypesios.html#style">ShadowPropTypesIOS#style...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRightWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderStyle <span class="propType">enum(&#x27;solid&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>elevation <span class="propType">number</span> <div><p>(Android-only) Sets the elevation of a view, using Android&#x27;s underlying
 <a href="https://developer.android.com/training/material/shadows-clipping.html#Elevation" target="_blank">elevation API</a>.
 This adds a drop shadow to the item and affects z-order for overlapping views.
 Only supported on Android 5.0+, has no effect on earlier versions.</p></div></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests. NB: disables the &#x27;layout-only
@@ -263,7 +263,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
      <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="viewpagerandroid.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/viewpagerandroid.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -25,7 +25,7 @@ child.</p><p>Example:</p><div class="prism language-javascript">render<span clas
    alignItems<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
    padding<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
-<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialpage"></a>initialPage <span class="propType">number</span> <a class="hash-link" href="#initialpage">#</a></h4><div><p>Index of initial page that should be selected. Use <code>setPage</code> method to
+<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialpage"></a>initialPage <span class="propType">number</span> <a class="hash-link" href="#initialpage">#</a></h4><div><p>Index of initial page that should be selected. Use <code>setPage</code> method to
 update the page, and <code>onPageSelected</code> to monitor page changes</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboarddismissmode"></a>keyboardDismissMode <span class="propType">enum(&#x27;none&#x27;, &#x27;on-drag&#x27;)</span> <a class="hash-link" href="#keyboarddismissmode">#</a></h4><div><p>Determines whether the keyboard gets dismissed in response to a drag.
  - &#x27;none&#x27; (the default), drags do not dismiss the keyboard.
  - &#x27;on-drag&#x27;, the keyboard is dismissed when a drag begins.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpagescroll"></a>onPageScroll <span class="propType">function</span> <a class="hash-link" href="#onpagescroll">#</a></h4><div><p>Executed when transitioning between pages (ether because of animation for
@@ -290,7 +290,7 @@ import type <span class="token punctuation">{</span> ViewPagerScrollState <span
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

-module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ViewPagerAndroidExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="webview.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> ViewPagerAndroidExample<span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/webview.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -38,7 +38,7 @@

 &lt;CustomRadioButton
  accessibleComponentType<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>radioButton<span class="token punctuation">}</span>
-  onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">&gt;</span></div><p>In the above example we&#x27;ve created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.</p><h2><a class="anchor" name="testing-voiceover-support-ios"></a>Testing VoiceOver Support (iOS) <a class="hash-link" href="#testing-voiceover-support-ios">#</a></h2><p>To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver.</p><p>To enable VoiceOver, tap on VoiceOver under &quot;Vision&quot; and toggle the switch that appears at the top.</p><p>At the very bottom of the Accessibility settings, there is an &quot;Accessibility Shortcut&quot;. You can use this to toggle VoiceOver by triple clicking the Home button.</p></div><div class="docs-prevnext"><a class="docs-next" href="direct-manipulation.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+  onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">&gt;</span></div><p>In the above example we&#x27;ve created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.</p><h2><a class="anchor" name="testing-voiceover-support-ios"></a>Testing VoiceOver Support (iOS) <a class="hash-link" href="#testing-voiceover-support-ios">#</a></h2><p>To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver.</p><p>To enable VoiceOver, tap on VoiceOver under &quot;Vision&quot; and toggle the switch that appears at the top.</p><p>At the very bottom of the Accessibility settings, there is an &quot;Accessibility Shortcut&quot;. You can use this to toggle VoiceOver by triple clicking the Home button.</p></div><div class="docs-prevnext"><a class="docs-next" href="docs/direct-manipulation.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -150,7 +150,7 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
    title<span class="token punctuation">:</span> <span class="token string">&#x27;Show Share Action Sheet&#x27;</span><span class="token punctuation">,</span>
    <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;ShareActionSheetExample <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
-<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="alert.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/alert.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -133,7 +133,7 @@ of a neutral, negative and a positive button:</p><ul><li>If you specify one butt
 module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  AlertExample<span class="token punctuation">,</span>
  SimpleAlertExampleBlock<span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="alertios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/alertios.html#content">Next →</a></div></div><noscript></noscript></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -187,7 +187,7 @@ class <span class="token class-name">PromptOptions</span> extends <span class="t
    backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;#eeeeee&#x27;</span><span class="token punctuation">,</span>
    padding<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="animated.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="358" src="img/alertIOS.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/bypdk4jnjra5uwyj2kzd2aenv4?device=iphone5s&amp;scale=70&amp;autoplay=false&amp;orientation=portrait&amp;deviceColor=white&amp;params=%7B%22route%22%3A%22AlertIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/animated.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="358" src="img/alertIOS.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/bypdk4jnjra5uwyj2kzd2aenv4?device=iphone5s&amp;scale=70&amp;autoplay=false&amp;orientation=portrait&amp;deviceColor=white&amp;params=%7B%22route%22%3A%22AlertIOS%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
@@ -28,7 +28,7 @@ dependencies <span class="token punctuation">{</span>
    rootProject<span class="token punctuation">.</span>allprojects <span class="token punctuation">{</span>
        buildDir <span class="token operator">=</span> <span class="token string">&quot;/path/to/build/directory/${rootProject.name}/${project.name}&quot;</span>
    <span class="token punctuation">}</span>
-<span class="token punctuation">}</span></div></div><div class="docs-prevnext"><a class="docs-next" href="activityindicatorios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
+<span class="token punctuation">}</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/activityindicatorios.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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)
--- a/Show More
+++ b/Show More