update website

docs/image.html

@@ -33,7 +33,7 @@ network.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor
 <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 class="token punctuation">(</span></span><span class="token string">&#x27;image!my-icon-active&#x27;</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;image!my-icon-inactive&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-&lt;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>When your entire codebase respects this convention, you&#x27;re able to do interesting things like automatically packaging the assets that are being used in your app. Note that in the current form, nothing is enforced, but it will be in the future.</p><h3><a class="anchor" name="adding-static-resources-to-your-ios-app-using-images-xcassets"></a>Adding Static Resources to your iOS App using Images.xcassets <a class="hash-link" href="#adding-static-resources-to-your-ios-app-using-images-xcassets">#</a></h3><p><img src="/react-native/img/StaticImageAssets.png" alt=""></p><blockquote><p><strong>NOTE</strong>: App build required for new resources</p><p>Any time you add a new resource to <code>Images.xcassets</code> you will need to re-build your app through Xcode before you can use it - a reload from within the simulator is not enough.</p></blockquote><p><em>This process is currently being improved, a much better workflow will be available shortly.</em></p><h3><a class="anchor" name="adding-static-resources-to-your-android-app"></a>Adding Static Resources to your Android app <a class="hash-link" href="#adding-static-resources-to-your-android-app">#</a></h3><p>Add your images as <a href="http://developer.android.com/guide/topics/resources/drawable-resource.html#Bitmap" target="_blank">bitmap drawables</a> to the android project (<code>&lt;yourapp&gt;/android/app/src/main/res</code>). To provide different resolutions of your assets, check out <a href="http://developer.android.com/guide/practices/screens_support.html#qualifiers" target="_blank">using configuration qualifiers</a>. Normally, you will want to put your assets in the following directories (create them under <code>res</code> if they don&#x27;t exist):</p><ul><li><code>drawable-mdpi</code> (1x)</li><li><code>drawable-hdpi</code> (1.5x)</li><li><code>drawable-xhdpi</code> (2x)</li><li><code>drawable-xxhdpi</code> (3x)</li></ul><p>If you&#x27;re missing a resolution for your asset, Android will take the next best thing and resize it for you.</p><blockquote><p><strong>NOTE</strong>: App build required for new resources</p><p>Any time you add a new resource to your drawables you will need to re-build your app by running <code>react-native run-android</code> before you can use it - reloading the JS is not enough.</p></blockquote><p><em>This process is currently being improved, a much better workflow will be available shortly.</em></p><h2><a class="anchor" name="network-resources"></a>Network Resources <a class="hash-link" href="#network-resources">#</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></p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// GOOD
+&lt;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>When your entire codebase respects this convention, you&#x27;re able to do interesting things like automatically packaging the assets that are being used in your app. Note that in the current form, nothing is enforced, but it will be in the future.</p><h3><a class="anchor" name="adding-static-resources-to-your-ios-app-using-images-xcassets"></a>Adding Static Resources to your iOS App using Images.xcassets <a class="hash-link" href="#adding-static-resources-to-your-ios-app-using-images-xcassets">#</a></h3><p><img src="/react-native/img/StaticImageAssets.png" alt=""></p><blockquote><p><strong>NOTE</strong>: App build required for new resources</p><p>Any time you add a new resource to <code>Images.xcassets</code> you will need to re-build your app through Xcode before you can use it - a reload from within the simulator is not enough.</p></blockquote><p><em>This process is currently being improved, a much better workflow will be available shortly.</em></p><blockquote><p><strong>NOTE</strong>: PNG images are required when loading with <code>require(&#x27;image!my-icon&#x27;)</code></p><p>At this time, only PNG images are supported in iOS. There is an <a href="https://github.com/facebook/react-native/issues/646" target="_blank">issue</a> that is currently addressing this bug. In the meantime a quick fix is to rename your files to my-icon.png or to use the <code>uri</code> property like: <code>source={{ uri: &#x27;my-icon&#x27; }}</code> instead of <code>require()</code>.</p></blockquote><h3><a class="anchor" name="adding-static-resources-to-your-android-app"></a>Adding Static Resources to your Android app <a class="hash-link" href="#adding-static-resources-to-your-android-app">#</a></h3><p>Add your images as <a href="http://developer.android.com/guide/topics/resources/drawable-resource.html#Bitmap" target="_blank">bitmap drawables</a> to the android project (<code>&lt;yourapp&gt;/android/app/src/main/res</code>). To provide different resolutions of your assets, check out <a href="http://developer.android.com/guide/practices/screens_support.html#qualifiers" target="_blank">using configuration qualifiers</a>. Normally, you will want to put your assets in the following directories (create them under <code>res</code> if they don&#x27;t exist):</p><ul><li><code>drawable-mdpi</code> (1x)</li><li><code>drawable-hdpi</code> (1.5x)</li><li><code>drawable-xhdpi</code> (2x)</li><li><code>drawable-xxhdpi</code> (3x)</li></ul><p>If you&#x27;re missing a resolution for your asset, Android will take the next best thing and resize it for you.</p><blockquote><p><strong>NOTE</strong>: App build required for new resources</p><p>Any time you add a new resource to your drawables you will need to re-build your app by running <code>react-native run-android</code> before you can use it - reloading the JS is not enough.</p></blockquote><p><em>This process is currently being improved, a much better workflow will be available shortly.</em></p><h2><a class="anchor" name="network-resources"></a>Network Resources <a class="hash-link" href="#network-resources">#</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></p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// GOOD
 </span>&lt;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/img/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">