status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Document URI for Android asset folder images 

Summary:
How to load images from the Android assets folder was undocumented, and took us a little while to find out how to do it.

This is a documentation-only change.

To confirm the syntax works create a sample app with an image at `android/app/src/main/assets/foo.png`.

Then add JSX `<Image style={{width:100, height:100}} source={{uri: 'asset:/foo.png'}} />`.

See that the image is rendered (Android only).
Closes https://github.com/facebook/react-native/pull/14626

Differential Revision: D5316887

Pulled By: AaaChiuuu

fbshipit-source-id: f7d07b8b83d6460de86c1a2efac0955300cfcd78
This commit is contained in:
Ben Clayton 2017-06-23 20:32:45 -07:00 committed by Facebook Github Bot
parent 08b8216e4f
commit a38f5b6b6a
1 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/Images.md
View File

@ -75,14 +75,21 @@ A caveat is that videos must use absolute positioning instead of `flexGrow`, sin
## 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):
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:
```javascript
<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.
For images in the Android assets folder, use the `asset:/` scheme:
```javascript
<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