[iOS] Add "peek and pop" (3d touch) capabilities to RN #3113

Closed
rricard opened this Issue Sep 29, 2015 · 21 comments

Comments

Projects
None yet
8 participants
@rricard

rricard commented Sep 29, 2015

#3055 will transmit 3d touch props during touch events. However the "peek and pop" feature presented by Apple is still very hard to implement just using pressure events. My goal would be to implement in a related PR a wrapper around iOS's UIViewControllerPreviewingDelegate Protocol that makes it easy to create "peek and pop" previews. This protocol works well on iOS but may not be really friendly with the way React does things. On that, I would like to get your input.

In my opinion, the React way of doing things is still handling an event but use a component or an API that would wrap UIPreviewAction, UIPreviewActionGroup and the UIPreviewActionItem Protocol to display the preview and its action group.

How would you do that ? Once I get the right way of doing things here, I can try to implement it!

@astreet astreet added the 🔷iOS label Sep 29, 2015

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Sep 29, 2015

Collaborator

We may want to borrow the concept of peek and pop and implement in JS so that it's not coupled to UIViewController and will work on Android too. For example on older devices you might want a long press to trigger the same "peek" action. We could implement it a couple of ways and see which is best too.

Collaborator

ide commented Sep 29, 2015

We may want to borrow the concept of peek and pop and implement in JS so that it's not coupled to UIViewController and will work on Android too. For example on older devices you might want a long press to trigger the same "peek" action. We could implement it a couple of ways and see which is best too.

@rricard

This comment has been minimized.

Show comment
Hide comment
@rricard

rricard Sep 29, 2015

Seems even better to me. Maybe in this case, we could think of it as an external component (ie. in an another repo). If you want it committed to the "core", that would be a pleasure to me but we could externalize something like this easily if you prefer!

rricard commented Sep 29, 2015

Seems even better to me. Maybe in this case, we could think of it as an external component (ie. in an another repo). If you want it committed to the "core", that would be a pleasure to me but we could externalize something like this easily if you prefer!

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Sep 29, 2015

Collaborator

Personally I find it awesome when people add more npm packages to a blossoming ecosystem, and by keeping code out of core it reduces the maintenance burden on Facebook's shoulders and gives you more agency to keep your code up-to-date.

Collaborator

ide commented Sep 29, 2015

Personally I find it awesome when people add more npm packages to a blossoming ecosystem, and by keeping code out of core it reduces the maintenance burden on Facebook's shoulders and gives you more agency to keep your code up-to-date.

@rricard

This comment has been minimized.

Show comment
Hide comment
@rricard

rricard Sep 29, 2015

Yep, I agree, I'll keep this issue open and when I have a package, I'll publish a link here and close the issue!

rricard commented Sep 29, 2015

Yep, I agree, I'll keep this issue open and when I have a package, I'll publish a link here and close the issue!

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Sep 29, 2015

Collaborator

-- That said, sometimes there are good reasons to make a change to core e.g. adding 3D touch info to the existing gesture system. So "core" is not a good or bad thing, the answer is "it depends" =)

Collaborator

ide commented Sep 29, 2015

-- That said, sometimes there are good reasons to make a change to core e.g. adding 3D touch info to the existing gesture system. So "core" is not a good or bad thing, the answer is "it depends" =)

@rricard

This comment has been minimized.

Show comment
Hide comment
@rricard

rricard Sep 29, 2015

yeah, I agree that in the case of #3055, core is a great thing! The Peek and pop component is more of an easy way to implement a 3d touch behavior. I think I'll do my package! If I have something coupled to the core, I'll reping you but I don't think, that's necessary!

rricard commented Sep 29, 2015

yeah, I agree that in the case of #3055, core is a great thing! The Peek and pop component is more of an easy way to implement a 3d touch behavior. I think I'll do my package! If I have something coupled to the core, I'll reping you but I don't think, that's necessary!

@rricard

This comment has been minimized.

Show comment
Hide comment
@rricard

rricard Sep 29, 2015

The only thing I feel stuck on is the blur effect, maybe I didn't read enough doc for now but I don't see how to achieve it for now.

rricard commented Sep 29, 2015

The only thing I feel stuck on is the blur effect, maybe I didn't read enough doc for now but I don't see how to achieve it for now.

@rricard

This comment has been minimized.

Show comment
Hide comment
@rricard

rricard Sep 29, 2015

That also give me an idea of something that should get to the core this time: a QuickActionIOS API to define the app icon's 3d touch quick actions. I'll do a PR about it.

rricard commented Sep 29, 2015

That also give me an idea of something that should get to the core this time: a QuickActionIOS API to define the app icon's 3d touch quick actions. I'll do a PR about it.

@boourns

This comment has been minimized.

Show comment
Hide comment
@boourns

boourns Sep 29, 2015

@ide can a JS implementation match the experience of the native implementation? I just tried this feature on a 6s; it is extremely polished. Blur increases as I increase finger pressure in a very delightful manner.

I mean, anything's possible, but by going the javascript route you give up a lot of the functionality you get for "free" on iOS if you were to use a UIViewController.

boourns commented Sep 29, 2015

@ide can a JS implementation match the experience of the native implementation? I just tried this feature on a 6s; it is extremely polished. Blur increases as I increase finger pressure in a very delightful manner.

I mean, anything's possible, but by going the javascript route you give up a lot of the functionality you get for "free" on iOS if you were to use a UIViewController.

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Sep 29, 2015

Collaborator

@boourns I don't think we can get gradual blur without a lot of work so if that's important then I'd use UIViewController-based APIs.

Collaborator

ide commented Sep 29, 2015

@boourns I don't think we can get gradual blur without a lot of work so if that's important then I'd use UIViewController-based APIs.

@boourns

This comment has been minimized.

Show comment
Hide comment
@boourns

boourns Sep 29, 2015

@ide Cool, thanks for your thoughts!

boourns commented Sep 29, 2015

@ide Cool, thanks for your thoughts!

@rricard

This comment has been minimized.

Show comment
Hide comment
@rricard

rricard Sep 29, 2015

Yeah, ok, I think I'll start with the quick actions in order to get a first taste of the codebase then move on to "peek and pop" if that's ok. Thanks for your input!

rricard commented Sep 29, 2015

Yeah, ok, I think I'll start with the quick actions in order to get a first taste of the codebase then move on to "peek and pop" if that's ok. Thanks for your input!

@b00giZm

This comment has been minimized.

Show comment
Hide comment
@b00giZm

b00giZm Oct 5, 2015

@rricard

I'm pretty new to RN and, to be honest, still kinda skeptical if it's worth considering. Over the weekend, I did a little experiment to see if it's possible create a little POC project which uses "peek & pop" together with RN without hacking the core. Turned out, it was pretty easy to write a UI component with static / hard-coded peek & pop controllers. The thing is that I still have no clue where to go from here. I could think about some ways how to make a flexible component, but all of them were pretty messy, involved a lot of code digging and did not feel right at all.

You wrote about publishing a NPM package. I'd love if you could share some of your ideas, because I really want to figure this out :) Maybe we could collaborate on this as well.

b00giZm commented Oct 5, 2015

@rricard

I'm pretty new to RN and, to be honest, still kinda skeptical if it's worth considering. Over the weekend, I did a little experiment to see if it's possible create a little POC project which uses "peek & pop" together with RN without hacking the core. Turned out, it was pretty easy to write a UI component with static / hard-coded peek & pop controllers. The thing is that I still have no clue where to go from here. I could think about some ways how to make a flexible component, but all of them were pretty messy, involved a lot of code digging and did not feel right at all.

You wrote about publishing a NPM package. I'd love if you could share some of your ideas, because I really want to figure this out :) Maybe we could collaborate on this as well.

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Oct 5, 2015

Collaborator

I have a working (yet not fully featured) example here: https://github.com/brentvatne/PeekPopAttempt

Feel free to flesh it out and distribute as a package on npm. The main missing features are:

  • need to be able to set the height of the peek preview, which you can do by setting preferredContentSize of the controller being peeked.
  • need to be able to specify what actions can be taken / fire appropriate callbacks in JS when they are.

Usage looks like this:

<Peekable.View renderPreview={this._renderPreviewOne} onPop={this._handlePopOne}>
   <View style={styles.button}>
     <Text>Tap me to peek!</Text>
   </View>
</Peekable.View>

and..

  _renderPreviewOne() {
    return (
      <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />
    )
  },

and...

  _handlePopOne() {
    alert('pop first one!');
   // You could push some route to navigator or setState or whatever here
  },
Collaborator

brentvatne commented Oct 5, 2015

I have a working (yet not fully featured) example here: https://github.com/brentvatne/PeekPopAttempt

Feel free to flesh it out and distribute as a package on npm. The main missing features are:

  • need to be able to set the height of the peek preview, which you can do by setting preferredContentSize of the controller being peeked.
  • need to be able to specify what actions can be taken / fire appropriate callbacks in JS when they are.

Usage looks like this:

<Peekable.View renderPreview={this._renderPreviewOne} onPop={this._handlePopOne}>
   <View style={styles.button}>
     <Text>Tap me to peek!</Text>
   </View>
</Peekable.View>

and..

  _renderPreviewOne() {
    return (
      <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />
    )
  },

and...

  _handlePopOne() {
    alert('pop first one!');
   // You could push some route to navigator or setState or whatever here
  },
@b00giZm

This comment has been minimized.

Show comment
Hide comment
@b00giZm

b00giZm Oct 5, 2015

@brentvatne

Thank you so much. It finally clicked for me :)

b00giZm commented Oct 5, 2015

@brentvatne

Thank you so much. It finally clicked for me :)

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Oct 5, 2015

Collaborator

@b00giZm yay :)

Collaborator

brentvatne commented Oct 5, 2015

@b00giZm yay :)

@rricard

This comment has been minimized.

Show comment
Hide comment
@rricard

rricard Oct 6, 2015

@brentvatne, this seems awesome, I'll take note to take a good peek at your code and see what I can do ;)

I think I'm going to close the issue then!

If you came here to find the peek and pop feature, go check out https://github.com/brentvatne/PeekPopAttempt

rricard commented Oct 6, 2015

@brentvatne, this seems awesome, I'll take note to take a good peek at your code and see what I can do ;)

I think I'm going to close the issue then!

If you came here to find the peek and pop feature, go check out https://github.com/brentvatne/PeekPopAttempt

@rricard rricard closed this Oct 6, 2015

@alvaromb

This comment has been minimized.

Show comment
Hide comment
@alvaromb

alvaromb Oct 15, 2015

Contributor

@ide instead of long press, have you considered something like https://github.com/b3ll/Pseudo3DTouch to handle 3D touch on older devices?

Contributor

alvaromb commented Oct 15, 2015

@ide instead of long press, have you considered something like https://github.com/b3ll/Pseudo3DTouch to handle 3D touch on older devices?

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Oct 15, 2015

Collaborator

Any idea how well it works? If it's really really good we could consider including it in the touch system. Otherwise I'd recommend forking RN and using it in your fork if that lib is useful to you.

Collaborator

ide commented Oct 15, 2015

Any idea how well it works? If it's really really good we could consider including it in the touch system. Otherwise I'd recommend forking RN and using it in your fork if that lib is useful to you.

@rricard

This comment has been minimized.

Show comment
Hide comment
@rricard

rricard Oct 15, 2015

Seems to work with the surface your finger is taking on the screen. That's actually very smart!

rricard commented Oct 15, 2015

Seems to work with the surface your finger is taking on the screen. That's actually very smart!

@birkir

This comment has been minimized.

Show comment
Hide comment
@birkir

birkir Nov 22, 2017

For anyone interested wix/react-native-navigation#2186

This featured is highly integrated with a navigation controller so I doubt this will ever be supported natively by React Native.

birkir commented Nov 22, 2017

For anyone interested wix/react-native-navigation#2186

This featured is highly integrated with a navigation controller so I doubt this will ever be supported natively by React Native.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment