search

kristerkari / react-native-css-modules

Style React Native components using CSS, PostCSS, Sass, Less or Stylus.
MIT License
328 stars 21 forks source link

Support for keyframes / animations #24

Open CoreyKaylor opened 5 years ago

CoreyKaylor commented 5 years ago

It would be great to have a CSS-based way of handling animations. I'm guessing it would be possible to delegate to the underlying Animated api?

kristerkari commented 5 years ago

Thanks!

As far as I know and have experience, the Animated API works differently from CSS animations and requires a stateful React component to be used.

I'm of course open to suggestions on how to make it work, but at the same time I'm a bit skeptic that it is possible to implement it in a sensible way.

CoreyKaylor commented 5 years ago

Maybe this implementation might prove some inspiration?

https://github.com/jacobp100/cssta/blob/master/src/native/enhancers/Animation.js

CoreyKaylor commented 5 years ago

Even if there had to be a wrapper component to maintain that state, would that not work? Realize I might be naive thinking about this, but it seems like that could work.

kristerkari commented 5 years ago

Maybe this implementation might prove some inspiration?

https://github.com/jacobp100/cssta/blob/master/src/native/enhancers/Animation.js

Interesting. Do you have an example of how to use it? Or is it just normal CSS animations that you write?

Even if there had to be a wrapper component to maintain that state, would that not work? Realize I might be naive thinking about this, but it seems like that could work.

That might work, I guess it would be good to try to do a proof of concept first.

CoreyKaylor commented 5 years ago

Here is a link to their docs regarding the animations. https://jacobp100.github.io/cssta/native/animations/

kristerkari commented 5 years ago

Thanks a lot for the examples!

I had a look at the code, and it seems that by borrowing the code from cssta it would be quite easy to add a runtime component wrapper that would work the same way.

kristerkari commented 5 years ago

I opened a new issue to cssta repo about how could the code of that library be used in this project to implement the same features: https://github.com/jacobp100/cssta/issues/32