search

necolas / react-native-web

Cross-platform React UI packages
https://necolas.github.io/react-native-web
MIT License
21.67k stars 1.79k forks source link

LayoutAnimation support? #78

Closed IjzerenHein closed 8 years ago

IjzerenHein commented 8 years ago

Hi, do you have any plans of supporting LayoutAnimation? https://facebook.github.io/react-native/docs/layoutanimation.html

Or would this not be possible?

cheers

necolas commented 8 years ago

I don't have any plans. I'm not sure if it makes sense on web or how you would implement it effectively if it did.

IjzerenHein commented 8 years ago

I think this would be a really cool feature to have. Doing transitional layout-animations on react-native is so easy and awesome, I think it would be really nice if we could run that on the web as well. I can only imagine all the possibilities this would open up..

But anyway (apart from my fanboyish admiration of LayoutAnimation..), Ben Alpert of Facebook (@spicyj) talks about this kind of thing during React conf 2016 (https://www.youtube.com/watch?v=-RJf2jYzs8A&index=2&list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY). If we were to move the layouting from the browser to the javascript domain, we would be able to easily implement the LayoutAnimation mechanism. Basically we could use the same layout engine as is used in react-native (https://github.com/facebook/css-layout). This would probably also eliminate all the layout differences that there currently are between react-native-web and react-native.

IjzerenHein commented 8 years ago

Hey what would think of having this API as just an empty stub? Just to be API compliant and that any react-native code compiles without having to write any platform specific code. The stub would then write a warning to the console (once/everytime?) indicating that this api is provided for completeness but doesn't actually do anything.

mrlaessig commented 8 years ago

Maybe have a look at this repo https://github.com/animatedjs/animated. When they are done the RN animated library will depend on animatedjs.

necolas commented 8 years ago

That won't provide an implementation of LayoutAnimation

faceyspacey commented 8 years ago

"react-web" seems to support LayoutAnimation: https://github.com/taobaofed/react-web#apis

@necolas what are the thoughts on synergies between these 2 projects?

yawetse commented 8 years ago

@faceyspacey @necolas I would love that, I have a pretty big app written in react-web, but would love to see these projects merge

RangerMauve commented 8 years ago

@faceyspacey This project seems to be backed by Twitter, whereas react-web is backed by Taobao. It'd probably require a bunch of politics to get them to work together, and I really doubt either party is particularly interested in doing so. It also seems that the core project structure is different for Taobao so there'd be a bunch of bikeshedding conflicts to get past before any merge could happen. More likely is that they'll end up implementing more or less the same features and have separate communities.

dralletje commented 8 years ago

Also, I got this weird feeling that it actually doesn't support layout animation... https://github.com/taobaofed/react-web/blob/master/Libraries/LayoutAnimation/LayoutAnimation.web.js

dralletje commented 8 years ago

Also, I'm afraid something like LayoutAnimation would require a dedicated react renderer, or require the react-native-web components to diff their own children, and apply animations (and keep children rendered during them).

faceyspacey commented 8 years ago

@RangerMauve yea, i figured neither party would want to, given the amount of work.

@dralletje I've also experienced some of their widgets not working, most specifically the slider, which seems to me on the more basic side of widgets.

I could be wrong, but it seems they advertise that they have support for a large # of widgets, but in actuality they aren't ready for primetime. The feel of it as though react-native-web tries to do less (mainly the core), but it does what it does do more solidly. In addition, react-web's documentation is both harder to understand (obviously because of the language differences) and in general requires more setup. I, for example, got started using https://github.com/grabcode/react-native-web-starter and was up and running with React Storybook and React Native Web in no time. It has been quite beautiful.

So from my perspective--and given things like the # of stars--React Native Web seems like the clear market leader. React Web has more forks, but perhaps that's not a good thing--i.e. it could mean more problems lol.

So based on all that, to me the most practical thing to do seems to be to take what we can learn from React Web's larger number of components/apis and see if we can more quickly replicate them for React Native Web's environment. I'm not sure the best way to go about that and even if there is any way it can be systematized--it may just require someone with the time on their hands (and strong need) to dive in. I think if we could do some initial research in this perhaps we could glean some insights about a general pattern we can individually replicate as we need to pull some widgets over. Of course the other options is to not look at it and do each component from scratch when we need it, but that to me is a waste of time without at least looking at how React Web approached/solved the problem.

necolas commented 8 years ago

React Web doesn't support LayoutAnimation and a lot of their implementations are incorrect.

I'm going to close this issue because no one is working on a mobile web implementation of LayoutAnimation and it's not essential at this time.

peacechen commented 6 years ago

I'm using react-native-elements, a boilerplate collection of UI controls which calls LayoutAnimation. It's a very handy library which I would like to use even if the animations don't happen (e.g. immediately change size is ok). Would love to see a LayoutAnimation stub so that 3rd party libraries can be used.

Would a PR for this be accepted?

PeterKottas commented 6 years ago

Same here @peacechen. @necolas it would be quite nice to have the option of using 3rd parties that use this feature without polluting console with warnings/errors. Is there any reasonable way to stub this maybe on our end? I am having issues with this https://www.npmjs.com/package/react-native-material-bottom-navigation as an example. Having at least stub support would enable people to use much more already existing libs

samueljmurray commented 6 years ago

This is an interesting approach: https://youtu.be/S6fHb5ChG0A?t=56m3s Definitely not production-ready but maybe something to keep in mind for the future.

Related tweet: https://twitter.com/vincentriemer/status/971019226923393024