Updated docs for next

releases/next/docs/images.html

@@ -11,7 +11,7 @@
 <span class="token comment" spellcheck="true">
 // GOOD
 </span><span class="token keyword">var</span> icon <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>active <span class="token operator">?</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#x27;./my-icon-active.png&#x27;</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#x27;./my-icon-inactive.png&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token operator">&lt;</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span>icon<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div><p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p><h2><a class="anchor" name="static-non-image-resources"></a>Static Non-Image Resources <a class="hash-link" href="docs/images.html#static-non-image-resources">#</a></h2><p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/metro-bundler/blob/master/packages/metro-bundler/src/defaults.js#L13-L18" target="_blank">packager defaults</a> for the full list.</p><p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L34-L39" target="_blank">packager config file</a> for the full list of configuration options).</p><p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn&#x27;t occur for videos that are linked directly into Xcode or the Assets folder for Android.</p><h2><a class="anchor" name="images-from-hybrid-app-s-resources"></a>Images From Hybrid App&#x27;s Resources <a class="hash-link" href="docs/images.html#images-from-hybrid-app-s-resources">#</a></h2><p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p><p>For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension:</p><div class="prism language-javascript"><span class="token operator">&lt;</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">&#x27;app_icon&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div><p>For images in the Android assets folder, use the <code>asset:/</code> scheme:</p><div class="prism language-javascript"><span class="token operator">&lt;</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">&#x27;asset:/app_icon.png&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div><p>These approaches provide no safety checks. It&#x27;s up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.</p><h2><a class="anchor" name="network-images"></a>Network Images <a class="hash-link" href="docs/images.html#network-images">#</a></h2><p>Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, <em>you will need to manually specify the dimensions of your image</em>. It&#x27;s highly recommended that you use https as well in order to satisfy <a href="docs/running-on-device.html#app-transport-security" target="_blank">App Transport Security</a> requirements on iOS.</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// GOOD
+<span class="token operator">&lt;</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span>icon<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div><p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p><h2><a class="anchor" name="static-non-image-resources"></a>Static Non-Image Resources <a class="hash-link" href="docs/images.html#static-non-image-resources">#</a></h2><p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L13-L18" target="_blank">packager defaults</a> for the full list.</p><p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L34-L39" target="_blank">packager config file</a> for the full list of configuration options).</p><p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn&#x27;t occur for videos that are linked directly into Xcode or the Assets folder for Android.</p><h2><a class="anchor" name="images-from-hybrid-app-s-resources"></a>Images From Hybrid App&#x27;s Resources <a class="hash-link" href="docs/images.html#images-from-hybrid-app-s-resources">#</a></h2><p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p><p>For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension:</p><div class="prism language-javascript"><span class="token operator">&lt;</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">&#x27;app_icon&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div><p>For images in the Android assets folder, use the <code>asset:/</code> scheme:</p><div class="prism language-javascript"><span class="token operator">&lt;</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">&#x27;asset:/app_icon.png&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div><p>These approaches provide no safety checks. It&#x27;s up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.</p><h2><a class="anchor" name="network-images"></a>Network Images <a class="hash-link" href="docs/images.html#network-images">#</a></h2><p>Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, <em>you will need to manually specify the dimensions of your image</em>. It&#x27;s highly recommended that you use https as well in order to satisfy <a href="docs/running-on-device.html#app-transport-security" target="_blank">App Transport Security</a> requirements on iOS.</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// GOOD
 </span><span class="token operator">&lt;</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">&#x27;https://facebook.github.io/react/logo-og.png&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
        style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
 <span class="token comment" spellcheck="true">

releases/next/docs/performance.html

@@ -66,7 +66,7 @@ we might calculate a list of all x-offsets for the new scene when we are startin
 Now that the JavaScript thread is freed of this responsibility,
 it&#x27;s not a big deal if it drops a few frames while rendering the scene -- you probably won&#x27;t even notice because you will be too distracted by the pretty transition.</p><p>Solving this is one of the main goals behind the new <a href="docs/navigation.html" target="_blank">React Navigation</a> library.
 The views in React Navigation use native components and the <a href="docs/animated.html" target="_blank"><code>Animated</code></a> library to deliver 60 FPS animations that are run on the native thread.</p><h2><a class="anchor" name="profiling"></a>Profiling <a class="hash-link" href="docs/performance.html#profiling">#</a></h2><p>Use the built-in profiler to get detailed information about work done in the JavaScript thread and main thread side-by-side.
-Access it by selecting Perf Monitor from the Debug menu.</p><p>For iOS, Instruments is an invaluable tool, and on Android you should learn to use <a href="docs/performance.html#profiling-android-ui-performance-with-systrace" target="_blank"><code>systrace</code></a>.</p><p>You can also use <a href="https://facebook.github.io/react/docs/perf.html" target="_blank"><code>react-addons-perf</code></a> to get insights into where React is spending time when rendering your components.</p><p>Another way to profile JavaScript is to use the Chrome profiler while debugging.
+Access it by selecting Perf Monitor from the Debug menu.</p><p>For iOS, Instruments is an invaluable tool, and on Android you should learn to use <a href="docs/performance.html#profiling-android-ui-performance-with-systrace" target="_blank"><code>systrace</code></a>.</p><p>Another way to profile JavaScript is to use the Chrome profiler while debugging.
 This won&#x27;t give you accurate results as the code is running in Chrome but will give you a general idea of where bottlenecks might be.</p><p>But first, <a href="docs/performance.html#running-in-development-mode-dev-true" target="_blank"><strong>make sure that Development Mode is OFF!</strong></a> You should see <code>__DEV__ === false, development-level warning are OFF, performance optimizations are ON</code> in your application logs.</p><h3><a class="anchor" name="profiling-android-ui-performance-with-systrace"></a>Profiling Android UI Performance with <code>systrace</code> <a class="hash-link" href="docs/performance.html#profiling-android-ui-performance-with-systrace">#</a></h3><p>Android supports 10k+ different phones and is generalized to support software rendering:
 the framework architecture and need to generalize across many hardware targets unfortunately means you get less for free relative to iOS.
 But sometimes, there are things you can improve -- and many times it&#x27;s not native code&#x27;s fault at all!</p><p>The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame.