Permalink
Browse files

Fixed ImageBackground could't be wrapped by Touchable* component

Summary:
In 0.46, as warning's advice, I use `ImageBackground` to replace `Image`s which used as background image wrapper, and in some cases, I also wrap `ImageBackground` with `TouchableHighlight` to make it clickable.

But here comes an error:

> Touchable child must either be native or forward setNativeProps to a native component

![2017-07-07 3 25 19](https://user-images.githubusercontent.com/3055294/27948869-f7c5832c-632d-11e7-97ba-5074cca82961.png)

So I pick some code from `Image.ios.js` into `ImageBackground.js` to solve it.

Please help to review, thanks!
Closes #14884

Reviewed By: shergin

Differential Revision: D5380988

Pulled By: javache

fbshipit-source-id: 35fda029030a39e720b6266f5d0a27ea3ff145ef
  • Loading branch information...
patw0929 authored and facebook-github-bot committed Jul 10, 2017
1 parent e694199 commit dc97e3fb4e1a297d18b9361710290468060626fc
Showing with 20 additions and 1 deletion.
  1. +20 −1 Libraries/Image/ImageBackground.js
@@ -17,6 +17,10 @@ const React = require('React');
const StyleSheet = require('StyleSheet');
const View = require('View');
const ensureComponentIsNative = require('ensureComponentIsNative');
import type {NativeMethodsMixinType} from 'ReactNativeTypes';
/**
* Very simple drop-in replacement for <Image> which supports nesting views.
*
@@ -42,11 +46,26 @@ const View = require('View');
* ```
*/
class ImageBackground extends React.Component {
setNativeProps(props: Object) {
// Work-around flow
const viewRef = this._viewRef;
if (viewRef) {
ensureComponentIsNative(viewRef);
viewRef.setNativeProps(props);
}
}
_viewRef: ?NativeMethodsMixinType = null;
_captureRef = ref => {
this._viewRef = ref;
};
render() {
const {children, style, imageStyle, imageRef, ...props} = this.props;
return (
<View style={style}>
<View style={style} ref={this._captureRef}>
<Image
{...props}
style={[

0 comments on commit dc97e3f

Please sign in to comment.