diff --git a/docs/image.html b/docs/image.html index 58e35ca1c36..3b66f173f87 100644 --- a/docs/image.html +++ b/docs/image.html @@ -33,7 +33,7 @@ network.

// GOOD var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive'); -<Image source={icon} />

When your entire codebase respects this convention, you'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.

Adding Static Resources to your iOS App using Images.xcassets #

NOTE: App build required for new resources

Any time you add a new resource to Images.xcassets you will need to re-build your app through Xcode before you can use it - a reload from within the simulator is not enough.

This process is currently being improved, a much better workflow will be available shortly.

Adding Static Resources to your Android app #

Add your images as bitmap drawables to the android project (<yourapp>/android/app/src/main/res). To provide different resolutions of your assets, check out using configuration qualifiers. Normally, you will want to put your assets in the following directories (create them under res if they don't exist):

If you're missing a resolution for your asset, Android will take the next best thing and resize it for you.

NOTE: App build required for new resources

Any time you add a new resource to your drawables you will need to re-build your app by running react-native run-android before you can use it - reloading the JS is not enough.

This process is currently being improved, a much better workflow will be available shortly.

Network Resources #

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.

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

When your entire codebase respects this convention, you'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.

Adding Static Resources to your iOS App using Images.xcassets #

NOTE: App build required for new resources

Any time you add a new resource to Images.xcassets you will need to re-build your app through Xcode before you can use it - a reload from within the simulator is not enough.

This process is currently being improved, a much better workflow will be available shortly.

NOTE: PNG images are required when loading with require('image!my-icon')

At this time, only PNG images are supported in iOS. There is an issue 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 uri property like: source={{ uri: 'my-icon' }} instead of require().

Adding Static Resources to your Android app #

Add your images as bitmap drawables to the android project (<yourapp>/android/app/src/main/res). To provide different resolutions of your assets, check out using configuration qualifiers. Normally, you will want to put your assets in the following directories (create them under res if they don't exist):

If you're missing a resolution for your asset, Android will take the next best thing and resize it for you.

NOTE: App build required for new resources

Any time you add a new resource to your drawables you will need to re-build your app by running react-native run-android before you can use it - reloading the JS is not enough.

This process is currently being improved, a much better workflow will be available shortly.

Network Resources #

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.

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