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

Add static non-image assets section 

Summary:
Support for non-image assets like audio and video was added a while back
Closes https://github.com/facebook/react-native/pull/12053

Differential Revision: D4489209

Pulled By: mkonicek

fbshipit-source-id: 4e2bdf7ef07bcc8c563c055ed0a4fe5cc51bd0bc
This commit is contained in:
moses gunesch 2017-01-31 13:20:35 -08:00 committed by Facebook Github Bot
parent b5421410ba
commit 28ea2d6261
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/Images.md
View File

@ -10,7 +10,7 @@ previous: colors
## Static Image Resources
React Native provides a unified way of managing images in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:
React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:
```javascript
<Image source={require('./my-icon.png')} />
@ -65,6 +65,12 @@ var icon = this.props.active ? require('./my-icon-active.png') : require('./my-i
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 the [packager defaults](https://github.com/facebook/react-native/blob/master/packager/defaults.js) file for the full list).
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):