[tvOS] onPress animation with magnification #15455

JulienKode · 2017-08-10T21:44:28Z

Related to: #15454

Motivation: Improve tvOS feeling for TouchableHighlight

This is a new behaviour proposal with animation based on tvParallaxProperties :

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

Test Plan

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>

pull-bot · 2017-08-10T21:52:32Z

	Warnings
⚠️	📋 Release Notes - This PR appears to be missing Release Notes.

@facebook-github-bot label Needs more information

Attention: @shergin

Generated by 🚫 dangerJS

shergin · 2017-08-10T22:31:09Z

cc @dlowder-salesforce

douglowder · 2017-08-11T01:28:07Z

This is a nice idea. Two suggestions:

Enable this on other touchables, e.g. TouchableOpacity
Maybe have a separate magnification property for the press, like pressMagnification. The developer may not want magnification for the focus animation, but may want it for the press action.

JulienKode · 2017-08-11T07:33:19Z

@dlowder-salesforce Thanks for you answer 👍

I have added pressMagnification property
We can use it with TouchableOpacity

douglowder · 2017-08-24T22:26:54Z

@JulienKode thanks very much, I'll take another look at this today or tomorrow. Be advised that there is another PR in flight (#15561) that affects the same files, so once that is committed, please merge from upstream.

douglowder · 2017-08-26T00:09:42Z

Having a look now -- I made a branch from latest master that includes your changes, and trying this out to see how everything is working. https://github.com/dlowder-salesforce/react-native/tree/julien-kode-patch-3

JulienKode · 2017-09-12T00:23:36Z

@dlowder-salesforce Sorry for the time, I've apply your changes to the branch and I've update the test plan,

The test plan looks good to you ?

douglowder · 2017-09-12T00:36:16Z

Test plan is ok.

douglowder · 2017-09-12T00:37:56Z

React/Base/RCTMultipartStreamReader.m

  NSInteger headersContentLength = headers[@"Content-Length"] != nil ? [headers[@"Content-Length"] integerValue] : 0;
+=======


Please back out the changes to this file -- it's not related to your new feature and I think the issue with this file has already been fixed separately by someone else.

JulienKode · 2017-09-12T01:06:58Z

@dlowder-salesforce Sorry for my mistake, I have solve it

douglowder · 2017-09-22T23:58:16Z

@JulienKode I'm working on a modal bugfix, then I will get back to looking at this 👍

JulienKode · 2017-11-15T19:09:24Z

I should make the changes on TouchableNativeFeedback?

Because the fact that TouchableHighlight have a strange behavior on tvOS (for a Button), it does not make it pleasant to use

May be I'm wrong

hramos · 2017-11-15T19:24:41Z

If we fixed TouchableNativeFeedback, can we ask people to use it on tvOS instead of TouchableHighlight?

douglowder · 2017-11-15T19:43:26Z

I'm looking at @JulienKode 's changes again.... the way it's implemented, these are just part of tvParallaxProperties object, so they should work for any Touchable. Yes it would probably make sense to enable TouchableNativeFeedback for Apple TV, and these properties should be added to all the Touchable components (including TouchableHighlight and TouchableOpacity).

JulienKode · 2017-11-15T19:49:26Z

@dlowder-salesforce You're right 👍

douglowder · 2017-11-29T19:05:40Z

@shergin or @hramos could you please go ahead and import this... I'll take an action item to work with @JulienKode on a separate PR to add the new properties to other Touchable components.

shergin · 2017-11-30T17:21:34Z

Can we start from fixing code style issues?

JulienKode · 2017-12-11T10:08:14Z

@shergin What is the part that need for you to be fix ?

pull-bot · 2018-01-04T11:06:57Z

	Warnings
⚠️	📋 Release Notes - This PR appears to be missing Release Notes.

@facebook-github-bot label Needs more information

Attention: @shergin

Generated by 🚫 dangerJS

JulienKode · 2018-01-31T22:02:03Z

Any update ?

hramos · 2018-02-02T20:08:58Z

Libraries/Components/AppleTV/TVViewPropTypes.js

@@ -39,6 +39,9 @@ var TVViewPropTypes = {
     * shiftDistanceY: Defaults to 2.0.
     * tiltAngle: Defaults to 0.05.
     * magnification: Defaults to 1.0.
+     * pressMagnification: Defaults to 1.0.


Let's document these in https://github.com/facebook/react-native-website as well, since those are the docs that are displayed on the website itself.

Thanks for the information @hramos I've created a pull request here facebook/react-native-website#176

hramos · 2018-02-02T20:09:20Z

Libraries/Components/Touchable/TouchableHighlight.js

@@ -174,6 +175,9 @@ const TouchableHighlight = createReactClass({
     * shiftDistanceY: Defaults to 2.0.
     * tiltAngle: Defaults to 0.05.
     * magnification: Defaults to 1.0.
+     * pressMagnification: Defaults to 1.0.


Ditto. These will need to be copied over to the react-native-website repo as well.

facebook-github-bot

@hramos is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

JulienKode · 2018-02-03T01:03:07Z

@hramos Thanks for the review I've added the new properties to the docs facebook/react-native-website#176

facebook-github-bot · 2018-02-03T09:48:16Z

I tried to merge this pull request into the Facebook internal repo but some checks failed. To unblock yourself please check the following: Does this pull request pass all open source tests on GitHub? If not please fix those. Does the code still apply cleanly on top of GitHub master? If not can please rebase. In all other cases this means some internal test failed, for example a part of a fb app won't work with this pull request. I've added the Import Failed label to this pull request so it is easy for someone at fb to find the pull request and check what failed. If you don't see anyone comment in a few days feel free to comment mentioning one of the core contributors to the project so they get a notification.

hramos · 2018-02-27T19:39:52Z

This PR should land soon. I had to rebase the PR internally. Once tests finish running, I'll merge it.

JulienKode · 2018-02-27T20:18:59Z

@hramos Thank you

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

JulienKode and others added 4 commits August 10, 2017 22:31

[tvOS] Change behavior of onPress

4aed47d

[tvOS] Allow to anim on press on tvOS

b0c6ec4

[Enable checking]

812e6ac

[TouchableHighlight] Update documentation

da967ca

JulienKode requested review from javache and shergin as code owners August 10, 2017 21:44

facebook-github-bot added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Aug 10, 2017

JulienKode mentioned this pull request Aug 10, 2017

[tvOS] Change behavior of onPress #15454

Closed

JulienKode added 2 commits August 11, 2017 09:32

[RCTTVView] add pressMagnification property

6990bdc

[Docs] Update

94ea7c8

[TouchableOpacity] Add documentation for tvParallaxProperties

7560ce0

[Resolve]

e3688b5

douglowder reviewed Sep 12, 2017

View reviewed changes

JulienKode force-pushed the patch-3 branch 2 times, most recently from b6b1269 to e3688b5 Compare September 12, 2017 00:58

douglowder and others added 4 commits September 12, 2017 02:59

[dlowder-salesforce] Changes

b9a1c42

Animate from mag->pressMag->mag

43cac24

Better momentary magnification on press

eb7cbe4

Update TouchableHighlight.js

1b52876

JulienKode added 3 commits December 11, 2017 11:14

Update ListExampleShared.js

ba13cbe

Update RCTTVView.m

1990467

Merge branch 'master' into patch-3

6a18f99

hramos reviewed Feb 2, 2018

View reviewed changes

hramos added 2 commits February 2, 2018 12:12

Fix code style, remove whitespace

c26f992

Update RCTTVView.m to match code style

3c4489a

facebook-github-bot added the Import Started This pull request has been imported. This does not imply the PR has been approved. label Feb 2, 2018

facebook-github-bot approved these changes Feb 2, 2018

View reviewed changes

JulienKode mentioned this pull request Feb 2, 2018

[TVOS] Add new properties for tvParallaxProperties facebook/react-native-website#176

Merged

facebook-github-bot added cla signed and removed Import Started This pull request has been imported. This does not imply the PR has been approved. labels Feb 3, 2018

facebook-github-bot closed this in 6c353fd Feb 27, 2018

hramos added the Merged This PR has been merged. label Mar 8, 2019

react-native-bot removed the Import Failed label Mar 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[tvOS] onPress animation with magnification #15455

[tvOS] onPress animation with magnification #15455

JulienKode commented Aug 10, 2017 •

edited

Loading

pull-bot commented Aug 10, 2017 •

edited

Loading

shergin commented Aug 10, 2017

douglowder commented Aug 11, 2017

JulienKode commented Aug 11, 2017 •

edited

Loading

douglowder commented Aug 24, 2017

douglowder commented Aug 26, 2017

JulienKode commented Sep 12, 2017

douglowder commented Sep 12, 2017

douglowder Sep 12, 2017

JulienKode commented Sep 12, 2017

douglowder commented Sep 22, 2017

JulienKode commented Nov 15, 2017

hramos commented Nov 15, 2017

douglowder commented Nov 15, 2017

JulienKode commented Nov 15, 2017

douglowder commented Nov 29, 2017

shergin commented Nov 30, 2017

JulienKode commented Dec 11, 2017

pull-bot commented Jan 4, 2018 •

edited

Loading

JulienKode commented Jan 31, 2018

hramos Feb 2, 2018

JulienKode Feb 2, 2018 •

edited

Loading

hramos Feb 2, 2018

facebook-github-bot left a comment

JulienKode commented Feb 3, 2018

facebook-github-bot commented Feb 3, 2018

hramos commented Feb 27, 2018 •

edited

Loading

JulienKode commented Feb 27, 2018

		NSInteger headersContentLength = headers[@"Content-Length"] != nil ? [headers[@"Content-Length"] integerValue] : 0;
		=======

[tvOS] onPress animation with magnification #15455

[tvOS] onPress animation with magnification #15455

Conversation

JulienKode commented Aug 10, 2017 • edited Loading

This is a new behaviour proposal with animation based on tvParallaxProperties :

Test Plan

pull-bot commented Aug 10, 2017 • edited Loading

shergin commented Aug 10, 2017

douglowder commented Aug 11, 2017

JulienKode commented Aug 11, 2017 • edited Loading

douglowder commented Aug 24, 2017

douglowder commented Aug 26, 2017

JulienKode commented Sep 12, 2017

douglowder commented Sep 12, 2017

douglowder Sep 12, 2017

Choose a reason for hiding this comment

JulienKode commented Sep 12, 2017

douglowder commented Sep 22, 2017

JulienKode commented Nov 15, 2017

hramos commented Nov 15, 2017

douglowder commented Nov 15, 2017

JulienKode commented Nov 15, 2017

douglowder commented Nov 29, 2017

shergin commented Nov 30, 2017

JulienKode commented Dec 11, 2017

pull-bot commented Jan 4, 2018 • edited Loading

JulienKode commented Jan 31, 2018

hramos Feb 2, 2018

Choose a reason for hiding this comment

JulienKode Feb 2, 2018 • edited Loading

Choose a reason for hiding this comment

hramos Feb 2, 2018

Choose a reason for hiding this comment

facebook-github-bot left a comment

Choose a reason for hiding this comment

JulienKode commented Feb 3, 2018

facebook-github-bot commented Feb 3, 2018

hramos commented Feb 27, 2018 • edited Loading

JulienKode commented Feb 27, 2018

JulienKode commented Aug 10, 2017 •

edited

Loading

pull-bot commented Aug 10, 2017 •

edited

Loading

JulienKode commented Aug 11, 2017 •

edited

Loading

pull-bot commented Jan 4, 2018 •

edited

Loading

JulienKode Feb 2, 2018 •

edited

Loading

hramos commented Feb 27, 2018 •

edited

Loading