Skip to content

Commit

Permalink
Implement Image.defaultSource property on Android
Browse files Browse the repository at this point in the history
Summary:
This pull request implements Image.defaultSource property on Android, using Fresco (http://frescolib.org/docs/placeholder-failure-retry.html), which will show placeholder image (local asset) while loading remote image. Implementation code is almost same with loadingIndicatorSource, but without rotation.

This requires release or production to bundle local images in an APK file.

This provides feature parity with iOS.

Set Image.defaultSource on Android, and will show it while loading Image.source.

```JSX
<Image
  defaultSource={require('<path to image>')}
  source={{uri: '<url to remote image>'}}
  style={{ height: 300, width: 300 }}
/>
```

[ANDROID] [FEATURE] [IMAGE] - Image.defaultSource will show local image as placeholder while loading remote Image.source.
Closes #18588

Differential Revision: D7540489

Pulled By: himabindugadupudi

fbshipit-source-id: 908ceb659b3416e517bba64c76a31879d965ec09
  • Loading branch information
dulmandakh authored and facebook-github-bot committed Apr 6, 2018
1 parent bf7601f commit b0fa322
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 0 deletions.
15 changes: 15 additions & 0 deletions Libraries/Image/Image.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,10 @@ var Image = createReactClass({
* See https://facebook.github.io/react-native/docs/image.html#blurradius
*/
blurRadius: PropTypes.number,
/**
* See https://facebook.github.io/react-native/docs/image.html#defaultsource
*/
defaultSource: PropTypes.number,
/**
* See https://facebook.github.io/react-native/docs/image.html#loadingindicatorsource
*/
Expand Down Expand Up @@ -197,6 +201,7 @@ var Image = createReactClass({

render: function() {
const source = resolveAssetSource(this.props.source);
const defaultSource = resolveAssetSource(this.props.defaultSource);
const loadingIndicatorSource = resolveAssetSource(
this.props.loadingIndicatorSource,
);
Expand All @@ -220,6 +225,12 @@ var Image = createReactClass({
);
}

if (this.props.defaultSource && this.props.loadingIndicatorSource) {
throw new Error(
'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
);
}

if (source && (source.uri || Array.isArray(source))) {
let style;
let sources;
Expand All @@ -243,6 +254,9 @@ var Image = createReactClass({
),
src: sources,
headers: source.headers,
defaultSrc: defaultSource
? defaultSource.uri
: null,
loadingIndicatorSrc: loadingIndicatorSource
? loadingIndicatorSource.uri
: null,
Expand All @@ -268,6 +282,7 @@ var cfg = {
nativeOnly: {
src: true,
headers: true,
defaultSrc: true,
loadingIndicatorSrc: true,
shouldNotifyLoadEvents: true,
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,12 @@ public void setBlurRadius(ReactImageView view, float blurRadius) {
view.setBlurRadius(blurRadius);
}

// In JS this is Image.props.defaultSource
@ReactProp(name = "defaultSrc")
public void setDefaultSource(ReactImageView view, @Nullable String source) {
view.setDefaultSource(source);
}

// In JS this is Image.props.loadingIndicatorSource.uri
@ReactProp(name = "loadingIndicatorSrc")
public void setLoadingIndicatorSource(ReactImageView view, @Nullable String source) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@ public CloseableReference<Bitmap> process(Bitmap source, PlatformBitmapFactory b

private @Nullable ImageSource mImageSource;
private @Nullable ImageSource mCachedImageSource;
private @Nullable Drawable mDefaultImageDrawable;
private @Nullable Drawable mLoadingImageDrawable;
private @Nullable RoundedColorDrawable mBackgroundImageDrawable;
private int mBackgroundColor = 0x00000000;
Expand Down Expand Up @@ -369,6 +370,11 @@ public void setSource(@Nullable ReadableArray sources) {
mIsDirty = true;
}

public void setDefaultSource(@Nullable String name) {
mDefaultImageDrawable = ResourceDrawableIdHelper.getInstance().getResourceDrawable(getContext(), name);
mIsDirty = true;
}

public void setLoadingIndicatorSource(@Nullable String name) {
Drawable drawable = ResourceDrawableIdHelper.getInstance().getResourceDrawable(getContext(), name);
mLoadingImageDrawable =
Expand Down Expand Up @@ -428,6 +434,10 @@ public void maybeUpdateView() {
GenericDraweeHierarchy hierarchy = getHierarchy();
hierarchy.setActualImageScaleType(mScaleType);

if (mDefaultImageDrawable != null) {
hierarchy.setPlaceholderImage(mDefaultImageDrawable, ScalingUtils.ScaleType.CENTER);
}

if (mLoadingImageDrawable != null) {
hierarchy.setPlaceholderImage(mLoadingImageDrawable, ScalingUtils.ScaleType.CENTER);
}
Expand Down

0 comments on commit b0fa322

Please sign in to comment.