3D Touch Preview API by birkir · Pull Request #2186 · wix/react-native-navigation

birkir · 2017-11-19T11:09:04Z

Added the preview and pop feature.

It is currently implemented so the javascript API is untouched (uses passProps) but I would like to see if anyone has interest in this feature so we can give it some API love.

To use the feature you simply call navigator.push() but with additional parameter previewViewID which is a React Node.

<TouchableOpacity
  onPressIn={() => this.props.navigator.push({
    screen: 'screenid',
    previewView: this.viewRef,
    previewActions: [{
      title: 'Foo',
      style: 'selected', // none, selected, destructive
      actions: [{ title: 'Bar' }],
    }],
 })
/>

Going forward with this would include some of the next steps:

Move previewViewID from passProps to it's parent.
Added some fail-safe wrappers around the added class methods
Added preview actions (with groups).
Moved away from passProps to actionParams.
Added action navigator events.
Conditionally commit to pop on deep press.
Option to set explicit height for the preview on shallow press.
Documentation

messense · 2017-11-20T02:25:39Z

This is awesome!

eliperkins

So, as I understand it, we need to have already rendered our previewView somewhere in React, since we need to pass along the node handle in passProps? How will this work with cases where we want to preview a different view than one we already have rendered (say, a new view controller)?

eliperkins · 2017-11-20T21:08:57Z

 - (void)setStyleOnInit;
 - (void)updateStyle;
 - (void)setNavBarVisibilityChange:(BOOL)animated;
+- (void)setPreviewController:(RCCViewController *)controller;


This should be implemented as a @property, rather than explicit getters and setters with private ivars.

eliperkins · 2017-11-20T21:11:48Z


+    NSString *previewViewID = passProps[@"previewViewID"];
+    if (previewViewID) {
+      RCCViewController *topViewController = ((RCCViewController*)self.topViewController);


This seems a little scary. Do we have a way to guarantee that this view controller will be a RCCViewController? Perhaps we should wrap this cast with a check to see if the view controller responds to the specific selector that we're calling on it (@selector(setPreviewController:)).

Yes you're right, in the if(keepStyleAcrossPushBool) statement above it is actually doing an if ([self.topViewController isKindOfClass:[RCCViewController class]]).

I will incorporate this, which one would you prefer?

Either isKindOfClass or respondsToSelector is fine with me!

birkir · 2017-11-20T21:48:12Z

So, as I understand it, we need to have already rendered our previewView somewhere in React, since we need to pass along the node handle in passProps? How will this work with cases where we want to preview a different view than one we already have rendered (say, a new view controller)?

Thank you for the feedback!

previewViewID is actually a react view that will have the 3D touch enabled on it. When you press it it will blur the background out (Image 1)
When you press it harder, it will show the view controller given in the push configuration (Image 2)
And if you press even harder, it will "pop" the view controller as a newly pushed screen (Image 3)

I like to think of it as a different way to navigator.push.

brunolemos · 2017-11-20T22:56:44Z

Awesome!

API love would be great.
Ideally it should receive any normal component instead of an id, no?
But I can imagine it could lag if it wasn't already rendered.

Also add support for action buttons:

birkir · 2017-11-21T06:04:42Z

Yes, that is what the Preview component would just do behind the scene (get the ref etc.)

It must be rendered before the force touch is started.

Actions is good and easy addon, but providing extensive api for it would require some work (like click action and show another set of actions)

Example of this is in the Apollo app, force press an item, click share, and you will be promted with another set of actions (share image / share link to image)

…feature/preview-peek-pop

…tive-navigation into feature/preview-peek-pop

birkir · 2017-11-22T02:09:23Z

Added some fail-safe wrappers around the added class methods
Added preview actions (with groups).
Moved away from passProps to actionParams.
Added action navigator events.

I am actually thinking about moving away from providing specific component that will act as previewViewID. The preview view component is only used to create and measure a rectangle on the screen to not blur on force press. We could remove the need for providing the actual react id and just provide the ref by handling findNodeHandle internally.

What do you think?

messense · 2017-11-22T02:13:58Z

+1 on handling findNodeHandle internally, findNodehandle API might not be as well known as ref.

birkir · 2017-11-22T02:40:36Z

Ok. Then I think we are good to go, at least to begin with. We could iterate on this if we get some feedback from people.

messense · 2017-11-22T03:10:14Z

  const screenInstanceID = _.uniqueId('screenInstanceID');
+  if (params.previewView instanceof Component) {
+    previewViewID = findNodeHandle(params.previewView)
+  }


I think it should have an else branch to treat previewView as previewViewID directly?

Great idea, thanks!

brunolemos · 2017-11-22T03:41:33Z

Looking great!

Did you test this two cases:

The preview component will probably be a View hidden in the screen, right? Not like the example that you used the visible "Row". How should the user proceed? Hide it's parent with height: 0 or what?
On top of the example above, did you test with dynamic content? E.g. If I force touch Row1 it should show Photo1 and if I force touch Row2 it should show Photo2 inside and reuse the same preview component

birkir · 2017-11-22T05:35:04Z

I don't think it will. The previewView will always be something already visible on the screen (like a Row or a picture cell like in the GIF's above).
The content of the preview is always the screen you defined in the navigator.push (with all its settings). The screen will be immediately rendered in the background and transitioned into an preview based on the force of your touch.

With our current implementation we can replicate every app I've seen yet that has this feature.

Only limitation is the preview height (Like the image preview), but once we implement showLightbox, the preview controller should be able to use that height.

Also we need to implement a configurable boolean flag to skip the actual push on hard press.

Does this make sense to you?

birkir · 2017-11-22T05:46:25Z

Ok after reading your second point again I realized that this could actually be done, but as to my understanding we don't have any easy way to update props of an RCCViewController yet?

But it should be easy to check if the previewController is is the same as the proposed one and just re-use it and update its styles and props.

birkir · 2017-11-22T05:51:21Z

+}
+
+- (void)previewingContext:(id<UIViewControllerPreviewing>)previewingContext commitViewController:(UIViewController *)viewControllerToCommit {
+  [self.navigationController pushViewController:self.previewController animated:false];


Here we may want to provide the user to skip this operation if he doesn't want the screen to be pushed.

brunolemos · 2017-11-22T06:10:13Z

The previewView will always be something already visible on the screen

Ok sorry, I had misunderstood the API. I thought previewView was the small preview view that shows while you are force touching. But it seems to be the component that receives the touch, right?

So I'll rephrase my question. Let's suppose this use case:

While you force touch on Instagram (peek), it shows a minimal preview screen with just 3 components: the profile photo, the profile name and the photo. When you finish force touching (pop), it shows the full page with all other contents (follow button, like button, etc).

Is this case supported?
By your example and code I get the idea that will always show the full page, just without the navigation bar.

If not, one possible solution is to pass a prop to the screen saying if it's on the peek/preview state or not. Another way would be by using events (might be boring to always have to listen to it and set the state accordingly, on the other hand it's more flexible as the prop name is not fixed).

birkir · 2017-11-22T13:28:20Z

Gotcha! No problem.

We can pass a prop saying it's a preview and then send ScreenChanged event once it's pushed (didPreview etc.)

For the instagram case, what is really happening is just cropping + conditional rendering. How they do the height thing, IDK.

Maybe it would just work by setting fixed height to the first View inside the screen. I will verify and come back to you.

birkir · 2017-11-22T15:14:40Z

Allright guys, I have tested all cases discussed in the thread. I added the option conditionally commit to pop the controller and to set explicit height to the preview with the recommended preferredContentSize suggested by Apple.

Please let me know if you have any more concerns about this PR, I'd like to get it merged to get some feedback from real users and see if anybody will find an limitation with the current implementation.

rgoldiez · 2017-11-26T00:03:01Z

@birkir - This is really awesome. Thank you for your work on this. However, like @enahum I'm seeing the onPress fire when the preview shows and then is dismissed from the onPressIn. I suppose this is expected since onPressIn fires, followed by onPress, followed by onPressOut. I'm using onLongPress for now and it seems to work well!

rgoldiez · 2017-11-26T02:13:23Z

@birkir - Does the previewView need to be an instance of a Component? I get an error if referencing a View? So, in the case where I wanted to reference a View, I simply changed my component from a View to an Animated.View (even though I'm not animating it) and it worked just fine.

rgoldiez · 2017-11-26T18:32:49Z

@birkir - so I’ve been playing around with this new functionality and it’s super easy to use. One thing that would be nice to have is a prop that goes true when a preview has been committed. I’m currently listening for the event, which works as expected, but if I want to conditionally block rendering of a component when in preview mode, I need to tract state for when a preview gets committed. Not a huge deal but this could be a small improvement that makes use even easier.

brunolemos · 2017-11-26T22:39:53Z

One thing that would be nice to have is a prop that goes true when a preview has been committed. I’m currently listening for the event, which works as expected, but if I want to conditionally block rendering of a component when in preview mode, I need to tract state for when a preview gets committed

Yep that's exactly what I meant with:

pass a prop to the screen saying if it's on the peek/preview state or not. Another way would be by using events (might be boring to always have to listen to it and set the state accordingly

rgoldiez · 2017-11-26T23:02:34Z

@brunolemos - Can you explain what you mean?

brunolemos · 2017-11-26T23:46:18Z

@rgoldiez I meant: "+1"

birkir · 2017-11-27T05:09:28Z

Cool thanks for the feedback guys. Can we update screen props somehow dynamically? I don't think this is done anywhere in RNN at the moment.

I know it's a hassle to add a listener and a state mechanism, but it's very common pattern with RNN in general (didAppear+didDisappear).

* master: (22 commits) setTabButton to change the label of the TabButton (wix#2215) 3D Touch Preview API (wix#2186) Update android-specific-use-cases.md Update android-specific-use-cases.md Load props from props registry for redux screens Nav bar save props (wix#2211) Support passing unserializable props to custom navBar component Save buttons props for root screens Ensure that styles set on individual buttons are not overridden (wix#2200) Update top-level-api.md (Android) Allow disableOpenGesture right or left in the drawer (wix#2189) Revert "Support iOS 11 prefersLargeTitles #1643 (wix#2090)" (wix#2204) Support iOS 11 prefersLargeTitles #1643 (wix#2090) Support passing unserializable props to custom button (wix#2192) addOnNavigatorEvent improvements (wix#2175) Fix missing props (wix#2179) Revert "Don't custom button props over the bridge (wix#2174)" (wix#2177) Don't custom button props over the bridge (wix#2174) Set missing TopBar background color Register multiple navigatorEventListeners (wix#2173) ...

enahum · 2017-11-27T18:11:22Z

@birkir lets say I have a list of components that onLongPress will do the 3D touch peek&pop and it looks like is working, while doing the peek I can see how it sometimes shows me a peek with the props that I've passed to a previews peek.

for instance:
long press component A -> shows peek of A
long press component B -> shows peek of B
long press component A -> shows peek of B

have you or anyone else seen this?

enahum · 2017-11-27T18:24:50Z

from the logs

Running application ChannelPeek ({
    initialProps =     {
        channelId = 775qkerugp8cmk7cbx1r1em8sa;
        commandType = Push;
        isPreview = 1;
        navigatorEventID = "screenInstanceID5_events";
        navigatorID = "controllerID1_nav";
        previewViewID = 153;
        screenInstanceID = screenInstanceID5;
        timestamp = 1511806967339;
    };
    rootTag = 31;
})

Running application ChannelPeek ({
    initialProps =     {
        channelId = bkzo93oum38b8p3bzgspyguyyy;
        commandType = Push;
        isPreview = 1;
        navigatorEventID = "screenInstanceID6_events";
        navigatorID = "controllerID1_nav";
        previewViewID = 164;
        screenInstanceID = screenInstanceID6;
        timestamp = 1511806971471;
    };
    rootTag = 41;
})

Running application ChannelPeek ({
    initialProps =     {
        channelId = 775qkerugp8cmk7cbx1r1em8sa;
        commandType = Push;
        isPreview = 1;
        navigatorEventID = "screenInstanceID7_events";
        navigatorID = "controllerID1_nav";
        previewViewID = 153;
        screenInstanceID = screenInstanceID7;
        timestamp = 1511806975328;
    };
    rootTag = 51;
})

first preview = OK
second preview = OK
third preview = FAIL (this one shows the content of the previewViewID = 164 instead of 153

birkir · 2017-11-27T19:00:02Z

Thanks. It seems that If you do a peek and then cancel quickly, the next peeking screen will actually be the top view controller and I think that is what is happening for you.

I will need some help debugging why this is happening, as apple says that the previewing api will handle deallocating the previewing view controller, but doesn't seem to be the case.

Maybe it would work to simply set the previewController to nil after successful push. I'll investigate but any help would be greatly appreciated.

enahum · 2017-11-27T19:12:03Z

I really don't know much about object-C but I was looking at the docs and I'm wondering if you ever do unregisterForPreviewing?

enahum · 2017-11-27T19:33:10Z

an example of how to use it https://github.com/alexhillc/AXPhotoViewer/blob/master/Example/AXPhotoViewerExample/TableViewController.swift#L62 dunno if this helps

birkir · 2017-11-28T17:44:43Z

Yes, Apple's docs say:

The system calls this method automatically when a 3D Touch-registered view controller is deallocated.
In some circumstances, you must explicitly call this method. This is the case if a registered view controller’s view hierarchy changes state, or if presenting a preview is otherwise no longer possible. In such cases, call this method.

https://developer.apple.com/documentation/uikit/uiviewcontroller/1621395-unregisterforpreviewing

But yes, we may have to call it manually.

birkir · 2017-11-28T18:47:24Z

@enahum #2239

niktonic21 · 2017-12-11T12:45:24Z

@messense Did you run preview with FlatList? I have same issue. With single page its ok.

messense · 2017-12-11T14:35:09Z

@niktonic21 Yes, I did run preview with FlatList.

birkir · 2017-12-12T14:39:54Z

@messense @niktonic21 We are still waiting for the fix to be merged. It is ready!

guyca · 2017-12-13T10:40:28Z

Hey guys, sorry about the delay. Merged now, please ping me on discord if I'm not responsive here 👍

Add the preview and pop feature To use the feature you simply call `navigator.push()` but with additional parameter `previewViewID` which is a React Node. ```js <TouchableOpacity onPressIn={() => this.props.navigator.push({ screen: 'screenid', previewView: this.viewRef, previewActions: [{ title: 'Foo', style: 'selected', // none, selected, destructive actions: [{ title: 'Bar' }], }], }) /> ```

anonrig · 2017-12-29T14:09:33Z

Hello, does anybody have a working example of this preview 3d touch feature?

birkir · 2017-12-29T18:31:57Z

https://github.com/wix/react-native-navigation/blob/master/example/src/screens/NavigationTypes.js#L132-L138

charliesbot · 2017-12-30T05:35:17Z

Hi, I'm seeing a weird case. if you peek a view several times (without popping it), and then you actually decide to pop a view, it will do the animation, but it won't show the new view. Even if you just press the view, it won't go to the "details" view.

anonrig · 2017-12-30T13:14:37Z

@charliesbox I face the same issue. After this issue persists, onPress doesn't get fired at all. So, I can't access the detail page as shown below:

charliesbot · 2017-12-30T15:32:26Z

@anonrig I opened an issue to track it better

#2445

anonrig · 2017-12-30T17:14:52Z

@charliesbox Can you also add my gif animation to the issue?

charliesbot · 2017-12-30T20:24:38Z

@anonrig sure thing 👍

harisb2012 · 2018-10-06T08:27:55Z

What happened with this guys?

milesscherrer · 2020-05-04T15:58:45Z

What happened with this?

birkir added 2 commits November 19, 2017 06:01

Preview API

0bca26d

Merge branch 'master' into feature/preview-peek-pop

1fa55e0

birkir mentioned this pull request Nov 19, 2017

3D Touch preview and pop iOS #2181

Closed

Merge branch 'master' into feature/preview-peek-pop

ea7c9c5

eliperkins reviewed Nov 20, 2017

View reviewed changes

birkir added 5 commits November 21, 2017 20:38

Added preview actions and fail-guard wrappers

43729dc

Merge branch 'master' of github.com:wix/react-native-navigation into …

c75059d

…feature/preview-peek-pop

Merge branch 'feature/preview-peek-pop' of github.com:birkir/react-na…

7348b5e

…tive-navigation into feature/preview-peek-pop

Remove old setters

11a90e7

Moved from passProps to actionParams

62f6b38

birkir added 2 commits November 21, 2017 21:35

Move findNodeHandle to internal method

8fbb7dd

Removing findNodeHandle

8fde44c

messense reviewed Nov 22, 2017

View reviewed changes

brunolemos mentioned this pull request Nov 22, 2017

Did anyone ever get further than this implementing Peek/Pop? brentvatne/PeekPopAttempt#2

Open

birkir commented Nov 22, 2017

View reviewed changes

birkir added 2 commits November 22, 2017 10:08

Added height and option to dont 'pop' the view controller

5c0c1dc

Merge branch 'master' into feature/preview-peek-pop

1ee66f5

Conversation

birkir commented Nov 19, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

messense commented Nov 20, 2017

Uh oh!

eliperkins left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

birkir commented Nov 20, 2017

Uh oh!

brunolemos commented Nov 20, 2017

Uh oh!

birkir commented Nov 21, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

birkir commented Nov 22, 2017

Uh oh!

messense commented Nov 22, 2017

Uh oh!

birkir commented Nov 22, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brunolemos commented Nov 22, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

birkir commented Nov 22, 2017

Uh oh!

birkir commented Nov 22, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brunolemos commented Nov 22, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

birkir commented Nov 22, 2017

Uh oh!

birkir commented Nov 22, 2017

Uh oh!

rgoldiez commented Nov 26, 2017

Uh oh!

rgoldiez commented Nov 26, 2017

Uh oh!

rgoldiez commented Nov 26, 2017

Uh oh!

brunolemos commented Nov 26, 2017

Uh oh!

rgoldiez commented Nov 26, 2017

Uh oh!

brunolemos commented Nov 26, 2017

Uh oh!

birkir commented Nov 27, 2017

Uh oh!

enahum commented Nov 27, 2017

Uh oh!

enahum commented Nov 27, 2017

Uh oh!

birkir commented Nov 27, 2017

Uh oh!

enahum commented Nov 27, 2017

Uh oh!

enahum commented Nov 27, 2017

Uh oh!

birkir commented Nov 28, 2017

Uh oh!

birkir commented Nov 28, 2017

birkir commented Nov 19, 2017 •

edited

Loading

birkir commented Nov 21, 2017 •

edited

Loading

birkir commented Nov 22, 2017 •

edited

Loading

brunolemos commented Nov 22, 2017 •

edited

Loading

brunolemos commented Nov 22, 2017 •

edited

Loading

charliesbot commented Dec 30, 2017 •

edited

Loading

anonrig commented Dec 30, 2017 •

edited

Loading