New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shared Element Transitions? #860

Closed
braco opened this Issue Mar 15, 2017 · 25 comments

Comments

Projects
None yet
@guyca

This comment has been minimized.

Copy link
Collaborator

guyca commented Mar 16, 2017

Hey @braco
This feature has been in the works for sometime, hope to merge it in earlier next week

@guyca guyca self-assigned this Mar 16, 2017

@Kureev

This comment has been minimized.

Copy link

Kureev commented Apr 1, 2017

Hi @guyca, do you have any updates on this? Maybe you need any assistance with the release or smth?

@guyca

This comment has been minimized.

Copy link
Collaborator

guyca commented Apr 3, 2017

Hey @Kureev
The story of Shared Element Transition (SET) on Android is pretty interesting. SET is supported natively on Android in Activities and Fragments (ick). RN forces single activity architecture, which is great, so can't use SET with Activity transitions, that leaves us with Fragments.

Since we really detest fragment and wanted to avoid them if we could, I implemented SET my self. The example app in this branch has two screens which demonstrate the api.

I'll try to merge the branch in it's current experimental state tonight. If it won't be good enough as the native implementation, we'll switch to Fragments 😢

@guyca

This comment has been minimized.

Copy link
Collaborator

guyca commented Apr 9, 2017

Hey guys,
I merged the code a few days ago, you can check it out in the example app. Just make sure to switch this field to true. I'll also update the docs this week.

Keep in mind this is still an incubating feature, Any feedback you have would be most welcome. Regarding the api. It's pretty simple right now - if there's anything missing let me know (callbacks?)

anyways, I'm closing this for now. If any issues arise lets discuss them in different issues.

@guyca guyca closed this Apr 9, 2017

@Kureev

This comment has been minimized.

Copy link

Kureev commented Apr 9, 2017

Thanks for you hard work, @guyca!

Should I use any specific attributes to mark which elements should be re-used (shared)?

@guyca

This comment has been minimized.

Copy link
Collaborator

guyca commented Apr 9, 2017

Thanks @Kureev 👍
So I started working on the first shared element view in the Wix app, as you can see here.

Implementation is pretty simple:

From view:

<SharedElementTransition
  sharedElementId={`SET${this.props.data.id}`}>
  <View style={{backgroundColor: 'transparent'}}>
    <Avatar initials={utils.getNameInitials(this.props.clientName)} url={this.props.avatar} size={50}/>
  </View>
</SharedElementTransition>

To view:

<SharedElementTransition
    sharedElementId={`SET${this.props.data.id}`}
    showDuration={SHOW_DURATION}
    hideDuration={HIDE_DURATION}
    showInterpolation={
      {
        type: 'linear',
        easing: 'FastOutSlowIn'
      }
    }
    hideInterpolation={
      {
        type: 'linear',
        easing:'FastOutSlowIn'
      }
    }
  >
    <View style={{backgroundColor: 'transparent'}}>
      <Avatar
        initials={utils.getNameInitials(this.props.data.participants[0].name)}
        url={this.props.avatar}
        size={70}
      />
    </View>
  </SharedElementTransition>

Both SharedElementTransition need to have the same sharedElementId.

These two screens were already defined when I started adding the SET to them. In this example out shared element in the Avatar, just has to wrap it in the SharedElementTransition and thats it.
Also I noticed a bug when transitioning views with rounded corners, so I wrapped the Avatar with a transparent View as a workaround for now 😝

The example app also has a screen where shared elements animate with curved motion (Similar to app icons in the google play app)

@Kureev

This comment has been minimized.

Copy link

Kureev commented Apr 9, 2017

Thanks for such an exhaustive documentation of the feature! ❤️

I'll give it a try in the nearest future! Once again, great feature! Looking forward for the 2.0 release. Let me know if I can do something to make it happen faster 😉

@guyca

This comment has been minimized.

Copy link
Collaborator

guyca commented Apr 23, 2017

Hey guys
I added basic documentation of the Shared Element feature to the docs.

Still need to document the available interpolation and easing values. There are two example screens in the example app which can be found here.

@Ehesp is working on adding another very nice screen to the example app. @gran33 has started iOS implementation.

cc @Kureev @brianjd @henrikra

@varungupta85

This comment has been minimized.

Copy link
Contributor

varungupta85 commented Apr 23, 2017

@guyca I have been itching to make use of this feature in the app, just as soon as I find the time. I always use to wonder how do apps such as whatsapp have such cool animations when I move from one screen to another with avatars animating into full screen images. Just realized that that was the magic of shared element transitions. Thanks for adding this awesome feature.

@kuma-guy

This comment has been minimized.

Copy link

kuma-guy commented May 15, 2017

@guyca Can I use Shared Element Transitions on iOS?

@Kureev

This comment has been minimized.

Copy link

Kureev commented May 15, 2017

@kuma-guy yes, you can

@matpaul

This comment has been minimized.

Copy link

matpaul commented May 16, 2017

@Kureev, how? - I can't find implementation in iOS side

@sagark1510

This comment has been minimized.

Copy link

sagark1510 commented May 24, 2017

@guyca @Kureev How to make it work on iOS?

@williambout

This comment has been minimized.

Copy link

williambout commented May 24, 2017

Implementation is not ready yet on iOS, it'll do a simple push animation for now.

@sagark1510

This comment has been minimized.

Copy link

sagark1510 commented May 25, 2017

@williambout How can I achieve it on iOS in some other ways?

@guyca

This comment has been minimized.

Copy link
Collaborator

guyca commented May 25, 2017

@sagark1510 You'll probably need to research how this is implemented in native iOS since each screen is a different react root view displayed in a different ViewController, then implement the js api which interacts with the native framework. I also suggest taking a look at how AirBnb implemented this feature in native-navigation - they did a very impressive job and the apis are pretty similar.

@kuma-guy

This comment has been minimized.

Copy link

kuma-guy commented May 25, 2017

@guyca Do you guys have a plan to implement this feature in iOS any time soon? It seems that native-navigation by Airbnb is not ready for production yet, so I am happy to help it if this feature is going to be implemented in this project (I am not a Swift/Obj-C expert though)

@luispuig

This comment has been minimized.

Copy link

luispuig commented May 25, 2017

I'm playing with this feature and its incredible great!!! And It will be great to get it on iOS too. The app seems awesome on Android and very Poor on iPhone.

Is there a plan to port it?

@Ehesp

This comment has been minimized.

Copy link
Collaborator

Ehesp commented May 25, 2017

There are plans yes, however v2 is currently the priority as it'll make such features as this much easier to implement.

@luispuig

This comment has been minimized.

Copy link

luispuig commented May 26, 2017

@Ehesp Great to know.

@williambout

This comment has been minimized.

Copy link

williambout commented Jun 10, 2017

@gran33 @Ehesp @guyca Any ETA for the iOS implementation?

@guyca

This comment has been minimized.

Copy link
Collaborator

guyca commented Jun 11, 2017

@williambout No ETA 😢 We had to prioritize other issues over this. If someone from the community wants to implement it, please ping me on discord 👍

@omarchacinortega13

This comment has been minimized.

Copy link

omarchacinortega13 commented Aug 10, 2017

Any plans of releasing this feature for iOS soon?

@zsajjad

This comment has been minimized.

Copy link

zsajjad commented Mar 1, 2018

We need it in iOS as well, are there any plans in near future? Also if anyone can confirm this happening with them as well.

@alejoasotelo

This comment has been minimized.

Copy link

alejoasotelo commented Jun 3, 2018

Any news for iOS?

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