From 28ea2d62616aeb458e86a55e8027ce3fb7454bf3 Mon Sep 17 00:00:00 2001 From: moses gunesch Date: Tue, 31 Jan 2017 13:20:35 -0800 Subject: [PATCH] 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 --- docs/Images.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/Images.md b/docs/Images.md index 21fa52df5ba..c8db2866958 100644 --- a/docs/Images.md +++ b/docs/Images.md @@ -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 @@ -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):