From 4885857b7553b71a8a5fce3ae06e4609dae716a3 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Sat, 24 Jun 2017 04:16:41 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/images.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/releases/next/docs/images.html b/releases/next/docs/images.html index f75755d3f37..d099809de57 100644 --- a/releases/next/docs/images.html +++ b/releases/next/docs/images.html @@ -11,7 +11,7 @@ // GOOD var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png'); -<Image source={icon} />

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 { width: undefined, height: undefined } on the style attribute.

Static Non-Image Resources #

The require 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 .mp3, .wav, .mp4, .mov, .html and .pdf. See packager defaults for the full list.

You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).

A caveat is that videos must use absolute positioning instead of flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.

Images From Hybrid App's Resources #

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 (via Xcode asset catalogs or Android drawable folder):

<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

This approach provides no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.

Network Images #

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, you will need to manually specify the dimensions of your image. It's highly recommended that you use https as well in order to satisfy App Transport Security requirements on iOS.

// GOOD +<Image source={icon} />

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 { width: undefined, height: undefined } on the style attribute.

Static Non-Image Resources #

The require 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 .mp3, .wav, .mp4, .mov, .html and .pdf. See packager defaults for the full list.

You can add support for other types by creating a packager config file (see the packager config file for the full list of configuration options).

A caveat is that videos must use absolute positioning instead of flexGrow, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.

Images From Hybrid App's Resources #

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.

For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension:

<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

For images in the Android assets folder, use the asset:/ scheme:

<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />

These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.

Network Images #

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, you will need to manually specify the dimensions of your image. It's highly recommended that you use https as well in order to satisfy App Transport Security requirements on iOS.

// GOOD <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />