onPress animation with magnification

JulienKode · facebook-github-bot · commit 4ffb70af2e34 · 2018-02-27T13:10:02.000-08:00
Summary: Related to: #15454 Motivation: Improve tvOS feeling for TouchableHighlight ![changewithaniamtion](https://user-images.githubusercontent.com/7658664/29193477-b99b4a10-7e25-11e7-8b31-e0e4ca9d7720.gif) - When you select the button he is focus and the underlay is show - When you press the button, there is an animation, but after the animation, the focus is on the button and the underlay is show Play with tvParallaxProperties on tvOS, test with and without patch just to see the actual behaviour ``` <TouchableHighlight tvParallaxProperties={{ enabled: true, shiftDistanceX: 0, shiftDistanceY: 0, tiltAngle: 0, magnification: 1.1, pressMagnification: 1.0, pressDuration: 0.3, }} underlayColor="black" onShowUnderlay={() => (console.log("onShowUnderlay")} onHideUnderlay={() => (console.log("onHideUnderlay")} onPress={() => (console.log("onPress")} > <Image style={styles.image} source={ uri: 'https://www.facebook.com/images/fb_icon_325x325.png' } /> </TouchableHighlight> ``` Closes facebook/react-native#15455 Differential Revision: D6887437 Pulled By: hramos fbshipit-source-id: e18b695068bc99643ba4006fb3f39215b38a74c1
diff --git a/js/ListExampleShared.js b/js/ListExampleShared.js
@@ -62,6 +62,9 @@ class ItemComponent extends React.PureComponent<{
         onPress={this._onPress}
         onShowUnderlay={this.props.onShowUnderlay}
         onHideUnderlay={this.props.onHideUnderlay}
+        tvParallaxProperties={{
+          pressMagnification: 1.1,
+        }}
         style={horizontal ? styles.horizItem : styles.item}>
         <View style={[
           styles.row, horizontal && {width: HORIZ_WIDTH}, fixedHeight && {height: ITEM_HEIGHT}]}>
diff --git a/js/RNTesterList.ios.js b/js/RNTesterList.ios.js
@@ -189,7 +189,7 @@ const ComponentExamples: Array<RNTesterExample> = [
   {
     key: 'TouchableExample',
     module: require('./TouchableExample'),
-    supportsTVOS: false,
+    supportsTVOS: true,
   },
   {
     key: 'TransparentHitTestExample',
diff --git a/js/TouchableExample.js b/js/TouchableExample.js
@@ -55,6 +55,7 @@ exports.examples = [
             style={styles.wrapper}
             activeOpacity={1}
             animationVelocity={0}
+            tvParallaxProperties={{pressMagnification: 1.3, pressDuration: 0.6}}
             underlayColor="rgb(210, 230, 255)"
             onPress={() => console.log('custom THW text - highlight')}>
             <View style={styles.wrapperCustom}>

Original file line number	Diff line number	Diff line change
`@@ -189,7 +189,7 @@ const ComponentExamples: Array<RNTesterExample> = [`
`189`	`189`	`{`
`190`	`190`	`key: 'TouchableExample',`
`191`	`191`	`module: require('./TouchableExample'),`
`192`		`- supportsTVOS: false,`
	`192`	`+ supportsTVOS: true,`
`193`	`193`	`},`
`194`	`194`	`{`
`195`	`195`	`key: 'TransparentHitTestExample',`