Fix TouchableWithoutFeedback's Lack of View #23871

RyanElliott10 · 2019-03-12T18:34:49Z

Summary

This PR addresses the issue regarding TouchableWithoutFeedback components not correctly working without a <View> embedded within them. The most current issue can be found here.

render() now returns a View -- rather than just cloning the children -- with all of the props passed into the TouchableWithoutFeedback component, as well as all children. This addresses the issue where the children's props weren't being properly passed down into a View.

Changelog

[General] [Fixed] - render() now wraps all props and child props correctly in a view

Test Plan

Pass all CircleCI Tests

facebook-github-bot · 2019-03-12T18:34:57Z

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!

analysis-bot

Code analysis results:

eslint found some issues. Run yarn lint --fix to automatically fix problems.
flow found some issues.

Libraries/Components/Touchable/TouchableWithoutFeedback.js

analysis-bot · 2019-03-12T18:36:21Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        nativeID={this.props.nativeID}
+        testID={this.props.testID}
+        onLayout={this.props.onLayout}
+        hitSlop={this.props.hitStop}


Cannot get this.props.hitStop because property hitStop is missing in propTypes of React component [1].

analysis-bot · 2019-03-12T18:36:21Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        onResponderMove={this.touchableHandleResponderMove}
+        onResponderRelease={this.touchableHandleResponderRelease}
+        onResponderTerminate={this.touchableHandleResponderTerminate}>
+        {this.props.children}


Cannot get this.props.children because property children is missing in propTypes of React component [1].

analysis-bot · 2019-03-12T18:36:22Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        {this.props.children}
+        {Touchable.renderDebugView({
+          color: 'red',
+          hitSlop: this.props.hitSlop


Cannot call Touchable.renderDebugView with object literal bound to the first parameter because inexact undefined [1] is incompatible with exact EdgeInsetsProp [2] in property hitSlop.

analysis-bot · 2019-03-12T18:36:22Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        {this.props.children}
+        {Touchable.renderDebugView({
+          color: 'red',
+          hitSlop: this.props.hitSlop


Cannot call Touchable.renderDebugView with object literal bound to the first parameter because inexact object type [1] is incompatible with exact EdgeInsetsProp [2] in property hitSlop.

analysis-bot

Code analysis results:

flow found some issues.

analysis-bot · 2019-03-12T18:50:17Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        nativeID={this.props.nativeID}
+        testID={this.props.testID}
+        onLayout={this.props.onLayout}
+        hitSlop={this.props.hitSlop}


Cannot create View element because inexact object type [1] is incompatible with exact EdgeInsetsProp [2] in property hitSlop.

analysis-bot · 2019-03-12T18:50:18Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        onResponderMove={this.touchableHandleResponderMove}
+        onResponderRelease={this.touchableHandleResponderRelease}
+        onResponderTerminate={this.touchableHandleResponderTerminate}>
+        {this.props.children}


Cannot get this.props.children because property children is missing in propTypes of React component [1].

analysis-bot · 2019-03-12T18:50:18Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        onResponderRelease={this.touchableHandleResponderRelease}
+        onResponderTerminate={this.touchableHandleResponderTerminate}>
+        {this.props.children}
+        {Touchable.renderDebugView({color: 'red', hitSlop: this.props.hitSlop})}


Cannot call Touchable.renderDebugView with object literal bound to the first parameter because inexact undefined [1] is incompatible with exact EdgeInsetsProp [2] in property hitSlop.

analysis-bot · 2019-03-12T18:50:18Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        onResponderRelease={this.touchableHandleResponderRelease}
+        onResponderTerminate={this.touchableHandleResponderTerminate}>
+        {this.props.children}
+        {Touchable.renderDebugView({color: 'red', hitSlop: this.props.hitSlop})}


Cannot call Touchable.renderDebugView with object literal bound to the first parameter because inexact object type [1] is incompatible with exact EdgeInsetsProp [2] in property hitSlop.

analysis-bot

Code analysis results:

eslint found some issues. Run yarn lint --fix to automatically fix problems.
flow found some issues.

Libraries/Components/Touchable/TouchableWithoutFeedback.js

analysis-bot · 2019-03-12T19:09:24Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        onResponderMove={that.touchableHandleResponderMove}
+        onResponderRelease={that.touchableHandleResponderRelease}
+        onResponderTerminate={that.touchableHandleResponderTerminate}>
+        {that.props.children}


Cannot get that.props.children because property children is missing in propTypes of React component [1].

analysis-bot · 2019-03-12T19:09:24Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        onResponderRelease={that.touchableHandleResponderRelease}
+        onResponderTerminate={that.touchableHandleResponderTerminate}>
+        {that.props.children}
+        {Touchable.renderDebugView({color: 'red', hitSlop: that.props.hitSlop})}


Cannot call Touchable.renderDebugView with object literal bound to the first parameter because inexact undefined [1] is incompatible with exact EdgeInsetsProp [2] in property hitSlop.

analysis-bot · 2019-03-12T19:09:25Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        onResponderRelease={that.touchableHandleResponderRelease}
+        onResponderTerminate={that.touchableHandleResponderTerminate}>
+        {that.props.children}
+        {Touchable.renderDebugView({color: 'red', hitSlop: that.props.hitSlop})}


Cannot call Touchable.renderDebugView with object literal bound to the first parameter because inexact object type [1] is incompatible with exact EdgeInsetsProp [2] in property hitSlop.

analysis-bot

Code analysis results:

flow found some issues.

analysis-bot · 2019-03-12T19:17:39Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        nativeID={that.props.nativeID}
+        testID={that.props.testID}
+        onLayout={that.props.onLayout}
+        hitSlop={that.props.hitSlop}


Cannot create View element because inexact object type [1] is incompatible with exact EdgeInsetsProp [2] in property hitSlop.

analysis-bot · 2019-03-12T19:17:39Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        onResponderMove={that.touchableHandleResponderMove}
+        onResponderRelease={that.touchableHandleResponderRelease}
+        onResponderTerminate={that.touchableHandleResponderTerminate}>
+        {that.props.children}


Cannot get that.props.children because property children is missing in propTypes of React component [1].

analysis-bot · 2019-03-12T19:17:40Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        onResponderRelease={that.touchableHandleResponderRelease}
+        onResponderTerminate={that.touchableHandleResponderTerminate}>
+        {that.props.children}
+        {Touchable.renderDebugView({color: 'red', hitSlop: that.props.hitSlop})}


Cannot call Touchable.renderDebugView with object literal bound to the first parameter because inexact undefined [1] is incompatible with exact EdgeInsetsProp [2] in property hitSlop.

analysis-bot · 2019-03-12T19:17:40Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        onResponderRelease={that.touchableHandleResponderRelease}
+        onResponderTerminate={that.touchableHandleResponderTerminate}>
+        {that.props.children}
+        {Touchable.renderDebugView({color: 'red', hitSlop: that.props.hitSlop})}


Cannot call Touchable.renderDebugView with object literal bound to the first parameter because inexact object type [1] is incompatible with exact EdgeInsetsProp [2] in property hitSlop.

facebook-github-bot · 2019-03-12T20:00:51Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

analysis-bot

Code analysis results:

flow found some issues.

analysis-bot · 2019-03-12T20:14:24Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
+        onResponderTerminationRequest={
+          this.touchableHandleResponderTerminationRequest
+        }


Cannot get this.props.children because property children is missing in propTypes of React component [1].

analysis-bot · 2019-03-12T20:14:24Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        }
+        onResponderGrant={this.touchableHandleResponderGrant}
+        onResponderMove={this.touchableHandleResponderMove}
+        onResponderRelease={this.touchableHandleResponderRelease}


Cannot call Touchable.renderDebugView with object literal bound to the first parameter because inexact undefined [1] is incompatible with exact EdgeInsetsProp [2] in property hitSlop.

analysis-bot

Code analysis results:

eslint found some issues. Run yarn lint --fix to automatically fix problems.
flow found some issues.

analysis-bot · 2019-03-12T20:15:07Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

-      onResponderTerminationRequest: this
-        .touchableHandleResponderTerminationRequest,
-      onResponderGrant: this.touchableHandleResponderGrant,
-      onResponderMove: this.touchableHandleResponderMove,


react/jsx-no-undef: 'Animated' is not defined.

analysis-bot · 2019-03-12T20:15:07Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -60,7 +59,7 @@ export type Props = $ReadOnly<{|
  delayPressIn?: ?number,
  delayPressOut?: ?number,
  disabled?: ?boolean,


Cannot use exports as a type because exports is a value. To get the type of a value use typeof.

analysis-bot · 2019-03-12T20:15:07Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -69,7 +68,7 @@ export type Props = $ReadOnly<{|
  onPress?: ?(event: PressEvent) => mixed,
  onPressIn?: ?(event: PressEvent) => mixed,


Cannot use exports as a type because exports is a value. To get the type of a value use typeof.

analysis-bot · 2019-03-12T20:15:07Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -161,7 +160,7 @@ const TouchableWithoutFeedback = ((createReactClass({
     * reactivated! Move it back and forth several times while the scroll view


exports [1] is not a React propType.

analysis-bot · 2019-03-12T20:15:07Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

exports [1] is not a React propType.

analysis-bot · 2019-03-12T20:15:08Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

-      onResponderTerminationRequest: this
-        .touchableHandleResponderTerminationRequest,
-      onResponderGrant: this.touchableHandleResponderGrant,
-      onResponderMove: this.touchableHandleResponderMove,


Cannot resolve name Animated.

analysis-bot · 2019-03-12T20:15:08Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        hitSlop={this.props.hitSlop}
+        onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
+        onResponderTerminationRequest={
+          this.touchableHandleResponderTerminationRequest


Cannot get this.props.children because property children is missing in propTypes of React component [1].

analysis-bot · 2019-03-12T20:15:08Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+          this.touchableHandleResponderTerminationRequest
+        }
+        onResponderGrant={this.touchableHandleResponderGrant}
+        onResponderMove={this.touchableHandleResponderMove}


Cannot call Touchable.renderDebugView with object literal bound to the first parameter because inexact undefined [1] is incompatible with exact EdgeInsetsProp [2] in property hitSlop.

analysis-bot

Code analysis results:

flow found some issues.

analysis-bot · 2019-03-12T20:15:40Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -60,7 +59,7 @@ export type Props = $ReadOnly<{|
  delayPressIn?: ?number,
  delayPressOut?: ?number,
  disabled?: ?boolean,


Cannot use exports as a type because exports is a value. To get the type of a value use typeof.

analysis-bot · 2019-03-12T20:15:41Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -69,7 +68,7 @@ export type Props = $ReadOnly<{|
  onPress?: ?(event: PressEvent) => mixed,
  onPressIn?: ?(event: PressEvent) => mixed,


Cannot use exports as a type because exports is a value. To get the type of a value use typeof.

analysis-bot · 2019-03-12T20:15:41Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        }
+        onResponderGrant={this.touchableHandleResponderGrant}
+        onResponderMove={this.touchableHandleResponderMove}
+        onResponderRelease={this.touchableHandleResponderRelease}


Cannot call Touchable.renderDebugView with object literal bound to the first parameter because inexact undefined [1] is incompatible with exact EdgeInsetsProp [2] in property hitSlop.

analysis-bot

Code analysis results:

flow found some issues.

analysis-bot · 2019-03-12T20:24:24Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -60,7 +61,7 @@ export type Props = $ReadOnly<{|
  delayPressIn?: ?number,
  delayPressOut?: ?number,
  disabled?: ?boolean,


Cannot use exports as a type because exports is a value. To get the type of a value use typeof.

analysis-bot · 2019-03-12T20:24:24Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -69,7 +70,7 @@ export type Props = $ReadOnly<{|
  onPress?: ?(event: PressEvent) => mixed,
  onPressIn?: ?(event: PressEvent) => mixed,


Cannot use exports as a type because exports is a value. To get the type of a value use typeof.

analysis-bot · 2019-03-12T20:24:24Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -161,7 +162,7 @@ const TouchableWithoutFeedback = ((createReactClass({
     * reactivated! Move it back and forth several times while the scroll view


exports [1] is not a React propType.

analysis-bot · 2019-03-12T20:24:24Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

exports [1] is not a React propType.

analysis-bot · 2019-03-12T20:24:25Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+        hitSlop={this.props.hitSlop}
+        onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
+        onResponderTerminationRequest={
+          this.touchableHandleResponderTerminationRequest


Cannot get this.props.children because property children is missing in propTypes of React component [1].

analysis-bot · 2019-03-12T20:24:25Z

Libraries/Components/Touchable/TouchableWithoutFeedback.js

+          this.touchableHandleResponderTerminationRequest
+        }
+        onResponderGrant={this.touchableHandleResponderGrant}
+        onResponderMove={this.touchableHandleResponderMove}


Cannot call Touchable.renderDebugView with object literal bound to the first parameter because inexact undefined [1] is incompatible with exact EdgeInsetsProp [2] in property hitSlop.

cpojer · 2019-03-13T04:44:03Z

Thanks for your PR. We are planning on deprecating these components in the near future and will be open sourcing a new way of handling pressable elements. I don't think it makes sense at this point to introduce such a big change to a component like this so I'm going to close this PR but feel free to use this in your own code :)

mgcrea · 2019-04-25T12:51:21Z

This issue keeps re-surfacing, would have been nice to properly fix it as it breaks a lot of code, (eg. #23740).

I haven't been able to make this PR work (encounters a <View> inside <Text> error).

@cpojer Any idea when the new touchables will be released?

Thanks!

Ryan Elliott and others added 4 commits March 11, 2019 17:36

Embedded in view

813a35c

Update TouchableWithoutFeedback.js

44262ee

Update TouchableWithoutFeedback.js

a20163f

Update TouchableWithoutFeedback.js

45e69b3

react-native-bot added the Component: TouchableWithoutFeedback label Mar 12, 2019

analysis-bot suggested changes Mar 12, 2019

View reviewed changes

react-native-bot added the PR: Includes Changelog label Mar 12, 2019

Correct prettier errors

c15b70a

analysis-bot suggested changes Mar 12, 2019

View reviewed changes

Update TouchableWithoutFeedback.js

6c554f4

analysis-bot suggested changes Mar 12, 2019

View reviewed changes

Update TouchableWithoutFeedback.js

1a437ed

analysis-bot suggested changes Mar 12, 2019

View reviewed changes

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Mar 12, 2019

RyanElliott10 added 3 commits March 12, 2019 13:07

Update TouchableWithoutFeedback.js

260d657

Update TouchableWithoutFeedback.js

dcbb16c

Update TouchableWithoutFeedback.js

45a9adf

analysis-bot suggested changes Mar 12, 2019

View reviewed changes

Update TouchableWithoutFeedback.js

497c485

analysis-bot suggested changes Mar 12, 2019

View reviewed changes

cpojer closed this Mar 13, 2019

radeno mentioned this pull request Mar 14, 2019

TouchableNativeFeedback onPress never fired when child isn't View #23928

Closed

		@@ -69,7 +68,7 @@ export type Props = $ReadOnly<{\|
		onPress?: ?(event: PressEvent) => mixed,
		onPressIn?: ?(event: PressEvent) => mixed,

		@@ -161,7 +160,7 @@ const TouchableWithoutFeedback = ((createReactClass({
		* reactivated! Move it back and forth several times while the scroll view

		@@ -69,7 +70,7 @@ export type Props = $ReadOnly<{\|
		onPress?: ?(event: PressEvent) => mixed,
		onPressIn?: ?(event: PressEvent) => mixed,

		@@ -161,7 +162,7 @@ const TouchableWithoutFeedback = ((createReactClass({
		* reactivated! Move it back and forth several times while the scroll view

Fix TouchableWithoutFeedback's Lack of View #23871

Fix TouchableWithoutFeedback's Lack of View #23871

Conversation

RyanElliott10 commented Mar 12, 2019 • edited Loading

Summary

Changelog

Test Plan

facebook-github-bot commented Mar 12, 2019

analysis-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

analysis-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

analysis-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

analysis-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

facebook-github-bot commented Mar 12, 2019

analysis-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

analysis-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

analysis-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

analysis-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cpojer commented Mar 13, 2019

mgcrea commented Apr 25, 2019 • edited Loading

RyanElliott10 commented Mar 12, 2019 •

edited

Loading

mgcrea commented Apr 25, 2019 •

edited

Loading