Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS animation and transformation in react-native

Just wondering if we can use CSS animation and transformation in react-native? i.e.

 <Image style={animateImage} / >

StyleSheet.create({

 animateImage {
   width: 100px;
   height: 100px;
   background: red;
   transition: width 3s;
   transition-delay: 1s;
 }

});
like image 849
user3162979 Avatar asked May 02 '17 15:05

user3162979


People also ask

Can we use CSS animation in React Native?

No, you can't use CSS animations and transformations in React Native.

What is animation in React Native?

Animations allow you to convey physically believable motion in your interface. React Native provides two complementary animation systems: Animated for granular and interactive control of specific values, and LayoutAnimation for animated global layout transactions.

Can I use CSS transitions in react?

ReactCSSTransitionGroup is a high-level API based on ReactTransitionGroup and is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It's inspired by the excellent ng-animate library.


1 Answers

No, you cannot. React Native's Stylesheet properties are pretty limited when compared with vanilla CSS.

For animations look into the Animated API.

like image 182
Viktor Sec Avatar answered Sep 24 '22 16:09

Viktor Sec