Comments (18)
I just published a project as an add-on to React Navigation supporting shared element transitions and regular transitions when navigating. Not an update to the RFC, only my 2 cents on an implementation.
Creds to @lintonye for his initial work.
Github:
https://github.com/fram-x/FluidTransitions/
Medium Article:
https://medium.com/@christian.falch/fluid-transitions-with-react-navigation-a049d2f71494
from rfcs.
I wouldn't have the bandwidth to create an RFC in the next few months. However, I want to chime in quickly in case if someone wants to get started soon.
I think it makes more sense to start with a more generic custom transition API, and then use that API to implement SET, compared to the other way around.
Since SET is a really common use case, we'd want a simplified API for it, but under the hood, it'd be useful to be based on a generic transition framework which can do a lot more, such as disabling transition altogether.
The feedback to my previous effort on the generic API (#175) has been that it was too complicated and difficult to use. I think the first step would be to put together a better API proposal.
from rfcs.
This is really hard to make things smooth with the current RN primitives, especially on iOS since the Image component tends to flicker. I worked on a snapshot API a while back to allow creating a copy of a view using platform primitives so it is performant. Implementation is Android only currently: janicduplessis/react-native@5284d89.
I think if we want production quality shared element transitions we will need to upstream something like this in RN.
from rfcs.
Personally I think that RN primitives should be robust enough to implement SET. If they aren't, we can fix them. Problems like the iOS Image flicker need to get fixed for so many reasons, not just navigation.
There may be cases where a new native API could be exposed to optimize performance. For example, native reparenting would be extremely valuable for this use case. But native reparenting may come in handy for other reasons, so I don't think it necessarily makes sense to implement SET in RN core. Also, the RN team is trying to make core lighter right now, so a heavy feature would probably get a lot of pushback.
from rfcs.
Specifically rather than being an Android thing, this is a Material Design thing. Material Design is just the preferred design for apps on Android and is used by most of the system apps. So this goes beyond just Android, it's also used anywhere else you might want Material Design.
from rfcs.
Fluid Transitions does not support the Tab Router. A new version in the making will probably support both Stacks and Tabs.
from rfcs.
Whoa, this sounds awesome, @chrfalch! š Iām going to try out your add-on later today. The Transition
component looks like a nice, succinct way of handling this.
from rfcs.
nice work @chrfalch! I'll have to read this over more carefully later but I love the API!
from rfcs.
I like the API suggested by @chrfalch.
To summarize what I know, we need to depend on useNativeDriver
for a smooth 60fps animation and for that we can only animate non layout properties. Considering that we need to think about how we animate for Text
which needs to change from one size to another and also Image
with different aspect ratio.
To get started, I see a beta version which is only for position and scaling.
What do you think?
PS: I would love to contribute for this RFC and api :)
from rfcs.
@narendrashetty A new version is already in the works with support for non-native animations for properties like width/height, background color etc.
from rfcs.
@chrfalch Nice! Are you using useNativeDriver
with it?
from rfcs.
I'm using a little trick where the native driver drivers a non-native animation through an Animated.event ;-) My hope is that we can use a combination to achieve both performance and great looking results.
from rfcs.
Interesting! I should dig into your code
from rfcs.
@chrfalch I have gone through the implementation and it's really clever but I am afraid that would not work :(.
Was not sure if my findings are useful for everyone here, so I have created an issue in your repo. (fram-x/FluidTransitions#5).
If we think it's fine to discuss here about it, I am happy to continue.
from rfcs.
I was also thinking, since it's not possible for layout properties with native driver, is it realistic to build an addon which works with layout properties too. Just thinking out loud. @brentvatne @ericvicenti
from rfcs.
Is anybody still looking at this as fluid transitions doesn't play nice with tab navigation I would like it just supported as a first class citizen???
from rfcs.
Do you know when that will be we go live in production in July?
from rfcs.
Don't think it would be ready that soon for production. Sorry.
from rfcs.
Related Issues (20)
- Action property that indicates to routes that they should not change index HOT 1
- Improve ergonomics of back HOT 1
- Navigator config to pass params down HOT 1
- Add unsetParams to navigation prop HOT 2
- Reset state action HOT 2
- Expose logic for initializing state of createAppContainer HOT 4
- On will/didFocus subscribe, stop firing the listener if current screen is focused HOT 2
- Idea: Preloading HOT 6
- <StaticNavigator> for tests/storybook HOT 14
- StackActions.popToRouteName(routeName) HOT 2
- Alternative API for defining navigators HOT 12
- how to send navigation events between peer navigators? HOT 4
- Deep linking with authentication
- How to hide tab bar item n react-navigation HOT 3
- Ability to show screens on top of native modals
- useNavigationParams hook HOT 1
- Add useMaterialTabsHeight HOT 1
- Typesafe Stack & Navigation HOT 1
- devTools prop HOT 5
- [RFC] TabView API change
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ššš
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ā¤ļø Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rfcs.