-
Notifications
You must be signed in to change notification settings - Fork 24.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fixed ImageBackground could't be wrapped by Touchable* component #14884
Fixed ImageBackground could't be wrapped by Touchable* component #14884
Conversation
Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed. If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks! |
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks! |
React.createClass is deprecated. Can you instead implement setNativeProps on this class and forward it to the child view? |
c71d227
to
9383abe
Compare
Got it, I have revised it at 9383abe. |
96519ad
to
9383abe
Compare
Libraries/Image/ImageBackground.js
Outdated
@@ -42,11 +42,23 @@ const View = require('View'); | |||
* ``` | |||
*/ | |||
class ImageBackground extends React.Component { | |||
setNativeProps(props: Object) { | |||
if (this._viewRef) { | |||
this._viewRef.setNativeProps(props); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you call ensureComponentIsNative
here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry, updated at 0109635.
Thanks again!
9383abe
to
f94ff87
Compare
f94ff87
to
0109635
Compare
@javache has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator. |
@@ -42,11 +43,24 @@ const View = require('View'); | |||
* ``` | |||
*/ | |||
class ImageBackground extends React.Component { | |||
setNativeProps(props: Object) { | |||
if (this._viewRef) { | |||
ensureComponentIsNative(this._viewRef); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just curious, why do we need this? We know that is "native".
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah good point, we're always rendering View. It doesn't hurt to check.
render() { | ||
const {children, style, imageStyle, imageRef, ...props} = this.props; | ||
|
||
return ( | ||
<View style={style}> | ||
<View style={style} ref={this._captureRef}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
N00b question: Will this conflict with ref prop existed in this.props (...)?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nope, because those go on Image, not View
|
||
_viewRef: View; | ||
|
||
_captureRef = ref => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we harmlessly can inline it. No?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There's some difference with function binding, which can be expensive. Doing it like this will guarantee it's only bound once I believe.
Summary: This sync includes the following changes: - **[8e25ed20b](facebook/react@8e25ed20b )**: Unify noop and test renderer assertion APIs (#14952) //<Andrew Clark>// - **[870214f37](facebook/react@870214f37 )**: Deprecate ref.setNativeProps in favor of ReactNative.setNativeProps (#14912) //<Eli White>// - **[3989c0950](facebook/react@3989c0950 )**: eslint-plugin-react-hooks@1.3.0 //<Dan Abramov>// - **[1bbfbc98d](facebook/react@1bbfbc98d )**: [ESLint] Add more cases to exhaustive-deps rule (#14930) //<Dan Abramov>// - **[412f88296](facebook/react@412f88296 )**: fix(eslint-plugin-react-hooks): node engine updated to version 7 because of object.entries(#14951) //<Farhad Yasir>// - **[ba708fa79](facebook/react@ba708fa79 )**: Remove ReactNoop.flushDeferredPri and flushUnitsOfWork (#14934) //<Andrew Clark>// - **[920b0bbb3](facebook/react@920b0bbb3 )**: [scheduler] Pass didTimeout argument to callbacks (#14931) //<Andrew Clark>// - **[f99fca3cb](facebook/react@f99fca3cb )**: Fix sample ESLint configuration (#14926) //<Matt Thomson>// - **[22bb94764](facebook/react@22bb94764 )**: Release eslint-plugin-react-hooks@1.2.0 //<Dan Abramov>// - **[a77bbf1a1](facebook/react@a77bbf1a1 )**: [ESLint] Warn against assignments from inside Hooks (#14916) //<Dan Abramov>// - **[219ce8a9c](facebook/react@219ce8a9c )**: Fix tracing fixture (#14917) //<Dan Abramov>// - **[8c1966590](facebook/react@8c1966590 )**: Release 16.8.3 //<Dan Abramov>// - **[7de4d2391](facebook/react@7de4d2391 )**: Fix UMD builds by re-exporting the scheduler priorities (#14914) //<Dan Abramov>// - **[d0318fb3f](facebook/react@d0318fb3f )**: Updating copyright headers, dropping the year (#14893) //<Nathan Hunzaker>// - **[f978d5fde](facebook/react@f978d5fde )**: Fix warning message for new setNativeProps method. on -> with (#14909) //<Eli White>// - **[b0f45c0fc](facebook/react@b0f45c0fc )**: Adding ReactNative.setNativeProps that takes a ref (#14907) //<Eli White>// - **[4f4aa69f1](facebook/react@4f4aa69f1 )**: Adding setNativeProps tests for NativeMethodsMixin (#14901) //<Eli White>// - **[b96b61dc4](facebook/react@b96b61dc4 )**: Use the canonical nativeTag for Fabric's setNativeProps (#14900) //<Eli White>// - **[dab2fdbbb](facebook/react@dab2fdbbb )**: Add eslint-plugin-react-hooks/exhaustive-deps rule to check stale closure dependencies (#14636) //<Dan Abramov>// - **[1493abd7e](facebook/react@1493abd7e )**: Deleted empty App.css (#14149) //<Josh R>// - **[13645d224](facebook/react@13645d224 )**: Deal with fallback content in Partial Hydration (#14884) //<Sebastian Markbåge>// - **[c506ded3b](facebook/react@c506ded3b )**: Don't discard render phase state updates with the eager reducer optimization (#14852) //<Dan Abramov>// - **[0e67969cb](facebook/react@0e67969cb )**: Prompt to include UMD build artifact links in GitHub release (#14864) //<Brian Vaughn>// - **[fad0842fd](facebook/react@fad0842fd )**: Release scripts documentation (#14863) //<Brian Vaughn>// - **[ab7a67b1d](facebook/react@ab7a67b1d )**: Fix react-dom/server context leaks when render stream destroyed early (#14706) //<overlookmotel>// - **[3e5556043](facebook/react@3e5556043 )**: Release 16.8.2 //<Dan Abramov>// - **[dfabb77a9](facebook/react@dfabb77a9 )**: Include another change in 16.8.2 //<Dan Abramov>// - **[c555c008b](facebook/react@c555c008b )**: Include component stack in 'act(...)' warning (#14855) //<Sunil Pai>// - **[ff188d666](facebook/react@ff188d666 )**: Add React 16.8.2 changelog (#14851) //<Dan Abramov>// - **[c4d8ef643](facebook/react@c4d8ef643 )**: Fix typo in code comment (#14836) //<Deniz Susman>// - **[08e955435](facebook/react@08e955435 )**: Statically enable suspense/partial hydration flag in www (#14842) //<Sebastian Markbåge>// - **[0e4135e8c](facebook/react@0e4135e8c )**: Revert "[ShallowRenderer] Queue/rerender on dispatched action after render component with hooks (#14802)" (#14839) //<Dan Abramov>// - **[6d4038f0a](facebook/react@6d4038f0a )**: [ShallowRenderer] Queue/rerender on dispatched action after render component with hooks (#14802) //<Rodrigo Ribeiro>// - **[fa6205d52](facebook/react@fa6205d52 )**: Special case crossOrigin for SVG image elements (#14832) //<Brandon Dail>// - **[c6bee765b](facebook/react@c6bee765b )**: Remove false positive warning and add TODOs about `current` being non-null (#14821) //<DanAbramov>// - **[3ae94e188](facebook/react@3ae94e188 )**: Fix ignored sync work in passive effects (#14799) //<Dan Abramov>// - **[f3a14951a](facebook/react@f3a14951a )**: Partial Hydration (#14717) //<Sebastian Markbåge>// Changelog: [GENERAL] [Changed] React sync for revisions f24a0da...22bb947 Reviewed By: gaearon Differential Revision: D14160361 fbshipit-source-id: fffdc922f3ee5dfeeee656a8f213a6d3c03e8481
Summary: This sync includes the following changes: - **[8e25ed20b](facebook/react@8e25ed20b )**: Unify noop and test renderer assertion APIs (#14952) //<Andrew Clark>// - **[870214f37](facebook/react@870214f37 )**: Deprecate ref.setNativeProps in favor of ReactNative.setNativeProps (#14912) //<Eli White>// - **[3989c0950](facebook/react@3989c0950 )**: eslint-plugin-react-hooks@1.3.0 //<Dan Abramov>// - **[1bbfbc98d](facebook/react@1bbfbc98d )**: [ESLint] Add more cases to exhaustive-deps rule (#14930) //<Dan Abramov>// - **[412f88296](facebook/react@412f88296 )**: fix(eslint-plugin-react-hooks): node engine updated to version 7 because of object.entries(#14951) //<Farhad Yasir>// - **[ba708fa79](facebook/react@ba708fa79 )**: Remove ReactNoop.flushDeferredPri and flushUnitsOfWork (#14934) //<Andrew Clark>// - **[920b0bbb3](facebook/react@920b0bbb3 )**: [scheduler] Pass didTimeout argument to callbacks (#14931) //<Andrew Clark>// - **[f99fca3cb](facebook/react@f99fca3cb )**: Fix sample ESLint configuration (#14926) //<Matt Thomson>// - **[22bb94764](facebook/react@22bb94764 )**: Release eslint-plugin-react-hooks@1.2.0 //<Dan Abramov>// - **[a77bbf1a1](facebook/react@a77bbf1a1 )**: [ESLint] Warn against assignments from inside Hooks (#14916) //<Dan Abramov>// - **[219ce8a9c](facebook/react@219ce8a9c )**: Fix tracing fixture (#14917) //<Dan Abramov>// - **[8c1966590](facebook/react@8c1966590 )**: Release 16.8.3 //<Dan Abramov>// - **[7de4d2391](facebook/react@7de4d2391 )**: Fix UMD builds by re-exporting the scheduler priorities (#14914) //<Dan Abramov>// - **[d0318fb3f](facebook/react@d0318fb3f )**: Updating copyright headers, dropping the year (#14893) //<Nathan Hunzaker>// - **[f978d5fde](facebook/react@f978d5fde )**: Fix warning message for new setNativeProps method. on -> with (#14909) //<Eli White>// - **[b0f45c0fc](facebook/react@b0f45c0fc )**: Adding ReactNative.setNativeProps that takes a ref (#14907) //<Eli White>// - **[4f4aa69f1](facebook/react@4f4aa69f1 )**: Adding setNativeProps tests for NativeMethodsMixin (#14901) //<Eli White>// - **[b96b61dc4](facebook/react@b96b61dc4 )**: Use the canonical nativeTag for Fabric's setNativeProps (#14900) //<Eli White>// - **[dab2fdbbb](facebook/react@dab2fdbbb )**: Add eslint-plugin-react-hooks/exhaustive-deps rule to check stale closure dependencies (#14636) //<Dan Abramov>// - **[1493abd7e](facebook/react@1493abd7e )**: Deleted empty App.css (#14149) //<Josh R>// - **[13645d224](facebook/react@13645d224 )**: Deal with fallback content in Partial Hydration (#14884) //<Sebastian Markbåge>// - **[c506ded3b](facebook/react@c506ded3b )**: Don't discard render phase state updates with the eager reducer optimization (#14852) //<Dan Abramov>// - **[0e67969cb](facebook/react@0e67969cb )**: Prompt to include UMD build artifact links in GitHub release (#14864) //<Brian Vaughn>// - **[fad0842fd](facebook/react@fad0842fd )**: Release scripts documentation (#14863) //<Brian Vaughn>// - **[ab7a67b1d](facebook/react@ab7a67b1d )**: Fix react-dom/server context leaks when render stream destroyed early (#14706) //<overlookmotel>// - **[3e5556043](facebook/react@3e5556043 )**: Release 16.8.2 //<Dan Abramov>// - **[dfabb77a9](facebook/react@dfabb77a9 )**: Include another change in 16.8.2 //<Dan Abramov>// - **[c555c008b](facebook/react@c555c008b )**: Include component stack in 'act(...)' warning (#14855) //<Sunil Pai>// - **[ff188d666](facebook/react@ff188d666 )**: Add React 16.8.2 changelog (#14851) //<Dan Abramov>// - **[c4d8ef643](facebook/react@c4d8ef643 )**: Fix typo in code comment (#14836) //<Deniz Susman>// - **[08e955435](facebook/react@08e955435 )**: Statically enable suspense/partial hydration flag in www (#14842) //<Sebastian Markbåge>// - **[0e4135e8c](facebook/react@0e4135e8c )**: Revert "[ShallowRenderer] Queue/rerender on dispatched action after render component with hooks (#14802)" (#14839) //<Dan Abramov>// - **[6d4038f0a](facebook/react@6d4038f0a )**: [ShallowRenderer] Queue/rerender on dispatched action after render component with hooks (#14802) //<Rodrigo Ribeiro>// - **[fa6205d52](facebook/react@fa6205d52 )**: Special case crossOrigin for SVG image elements (#14832) //<Brandon Dail>// - **[c6bee765b](facebook/react@c6bee765b )**: Remove false positive warning and add TODOs about `current` being non-null (#14821) //<DanAbramov>// - **[3ae94e188](facebook/react@3ae94e188 )**: Fix ignored sync work in passive effects (#14799) //<Dan Abramov>// - **[f3a14951a](facebook/react@f3a14951a )**: Partial Hydration (#14717) //<Sebastian Markbåge>// Changelog: [GENERAL] [Changed] React sync for revisions f24a0da...22bb947 Reviewed By: gaearon Differential Revision: D14160361 fbshipit-source-id: fffdc922f3ee5dfeeee656a8f213a6d3c03e8481
In 0.46, as warning's advice, I use
ImageBackground
to replaceImage
s which used as background image wrapper, and in some cases, I also wrapImageBackground
withTouchableHighlight
to make it clickable.But here comes an error:
So I pick some code from
Image.ios.js
intoImageBackground.js
to solve it.Please help to review, thanks!