Skip to content
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/Images.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@ And `button.js` code contains
<Image source={require('./img/check.png')} />
```

Packager will bundle and serve the image corresponding to device's screen density, e.g. on iPhone 5s `[email protected]` will be used, on Nexus 5 – `[email protected]`. If there is no image matching the screen density, the closest best option will be selected.
Packager will bundle and serve the image corresponding to the device's screen density, e.g. on iPhone 5s `[email protected]` will be used, on Nexus 5 – `[email protected]`. If there is no image matching the screen density, the closest best option will be selected.
Copy link
Contributor

@davidaurelio davidaurelio Sep 26, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’m not a native speaker, but wouldn’t “to the screen density of the device” be even better?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey David, it can go both ways. I didn't want to get into changing the wording and grammar.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feel free to go all the way, or keep it like this – your call :-)


On Windows, you might need to restart the packager if you add new images to your project.

Here are some benefits that you get:

1. Same system on iOS and Android.
2. Images live in the same folder as your JS code. Components are self-contained.
3. No global namespace, i.e. you don't have worry about name collisions.
3. No global namespace, i.e. you don't have to worry about name collisions.
4. Only the images that are actually used will be packaged into your app.
5. Adding and changing images doesn't require app recompilation, just refresh the simulator as you normally do.
6. The packager knows the image dimensions, no need to duplicate it in the code.
Expand Down Expand Up @@ -138,4 +138,4 @@ return (

## Off-thread Decoding

Image decoding can take more than a frame-worth of time. This is one of the major source of frame drops on the web because decoding is done in the main thread. In React Native, image decoding is done in a different thread. In practice, you already need to handle the case when the image is not downloaded yet, so displaying the placeholder for a few more frames while it is decoding does not require any code change.
Image decoding can take more than a frame-worth of time. This is one of the major sources of frame drops on the web because decoding is done in the main thread. In React Native, image decoding is done in a different thread. In practice, you already need to handle the case when the image is not downloaded yet, so displaying the placeholder for a few more frames while it is decoding does not require any code change.