Supported Material motion shared element container transforms (Android)#528
Merged
grahammendick merged 47 commits intomasterfrom Sep 6, 2021
Merged
Supported Material motion shared element container transforms (Android)#528grahammendick merged 47 commits intomasterfrom
grahammendick merged 47 commits intomasterfrom
Conversation
Brings in MaterialContainerTransform transition (android motion)
MaterialContainerTransform is all-purpose transition for shared elements. It's part of android's Material Motion. It allows transitions 'between UI elements that include a container'. Much better for react native because we're transitioning between view groups - but also more suited for navigating between scenes
Used to make the child of the SharedElementView the shared element. That was when transitions were for elements rather than containers. Much better to use the SharedElementView because, e.g., can have multiple children, makes code clearer
It was the default transition but now MaterialContainerTransform is. It's created programmatically so don't need xml resource anymore
Material motion recommend different transitions when running shared elements - like MaterialElevateScale to fades and scales the exiting scene. Don't want to use transitions (Enter, Exit, Return and Reenter on Fragment) because it's confusing to have transitions and animations. Transitions don't seem as flexible for scenes (how to do a basic scale?!) so can't get rid of animations. Also, Android doesn't wait for the transitions to complete before calling onDestroy!!! This means the leaving scene disappears as it's immediately unmounted on React side. So allowed user to write their own 'MaterialElevateScale' as an animation and use it for the shared el transition
Don't need the enter and exit transitions anymore
Will need props to configure the MaterialContainerTransform (both coming and going) but these enter and exit ones aren't used
React Native supports Android 5.0 (API 21) so no need for lollipop check
With fragment A and B, the shared element enter and return transition need to be set on B! But the enter transition needs to be postponed on B when entering and A when returning! So passed 2 fragments into the transitioner. Means can let the shared element PreDraw listener take care of loading when returning (same as when entering)
Will be useful for accessing props to configure the MaterialContainerTransform, like duration and drawingViewId
Can set props, like duration, directly onto transition from the shared element manager Also defaulted the direction - probably auto is sufficient, but may as well set it because know what the real direction is based on.whether the two fragments are the same
Enter scene is always the target of the initial navigation. Scene is the current scene - B when going forward and A when returning
The MaterialContainerTransform expects the id to be a resource?! The React Native ids aren't resources so android throws error when it can't find it. Could get round it by overriding getResources of SharedElementView, providing custom Resources and catching error from getResourceName. Not sure of consequences. Also, it didn't work that well - the scrim was only applied over the drawing view but the from shared element disappeared completely at start of animation and then came back (not sure why - set duration to 5000 so could see it). Also not sure of the timings. Maybe setting the drawingViewId from findNodeHandle will happen too late? Can't make it part of the postpone enter transition. All in all, simplest to remove for now. See material-components/material-components-android#1224 for why drawing view id is helpful - this example prevents the scrim appearing over the top of the toolbar.
Removed redundant transition and added duration and fadeMode
Material Motion only supports one shared element transition - the shared element is a container now so only need one. It didn't used to support containers so would need multiple to share an image and text, for example. Did investigate whether could support non-container and container shared elements so could still support multiple but it was complicated and don't think would have helped user - user would have to know that if doing multiple can only do single element. It was complicated because if single the shared element must be the child of the shared element view (image, text etc.). Further complicated because old shared elements didn't work with androidx transitions - select 'red', change to 'sienna', go back and the 'red' would be gone!? (Bug with the ChangeTransform)
Transitioner was an odd word and now using Material Motion makes sense to rename. Also matches with SharedElementMotion from navigation-react-mobile
And removed shared elements when clicking search. Simplifies the code and wouldn't expect the share element to run from search
Shows off the container transform from material motion
Matches the one in navigation react native. Although it ran before this change the MaterialContainerTransform had red squiggles, saying it couldn't be found
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A container transform is a shared element transition that supports containers like ViewGroups.
Updated Android material components to v1.4.0.
Dropped support for traditional Android shared element transitions because they only support single elements like an image. Think the only loss of functionality is there can only be one container transform at a time. But only needed multiple for traditional shared elements because they couldn’t handle containers. For example, sharing a photo and description would’ve required 2 shared elements but can now share the parent view container instead.