Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ericpkerr/react-native-animated-styles
Easily animate react-native components between two styles.
https://github.com/ericpkerr/react-native-animated-styles
Last synced: about 1 month ago
JSON representation
Easily animate react-native components between two styles.
- Host: GitHub
- URL: https://github.com/ericpkerr/react-native-animated-styles
- Owner: EricPKerr
- License: mit
- Created: 2017-09-13T20:40:59.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T02:35:50.000Z (almost 2 years ago)
- Last Synced: 2024-11-01T04:26:28.475Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 1.39 MB
- Stars: 24
- Watchers: 3
- Forks: 3
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-animated-styles ★7 - Easily animate/transition react components between two style states. (Components / UI)
- awesome-reactnative-ui - react-native-animated-styles - native components between two styles.|<ul><li>Last updated : 2 months ago</li><li>Stars : 12</li><li>Open issues : 0</li></ul>|![]()| (Others)
- awesome-react-native - react-native-animated-styles ★7 - Easily animate/transition react components between two style states. (Components / UI)
- awesome-reactnative-ui - react-native-animated-styles - native components between two styles.|<ul><li>Last updated : 2 months ago</li><li>Stars : 12</li><li>Open issues : 0</li></ul>|![]()| (Others)
- awesome-react-native - react-native-animated-styles ★7 - Easily animate/transition react components between two style states. (Components / UI)
- awesome-react-native - react-native-animated-styles ★7 - Easily animate/transition react components between two style states. (Components / UI)
README
# react-native-animated-styles
Easily animate react-native components between two styles. Similar concept to adding and removing a CSS class to animate HTML Elements for the web.
# Install
`npm install --save react-native-animated-styles`
# Properties
```
```
# Example Usage
```
import AnimatedStyles from 'react-native-animated-styles';
import { useEffect, useState } from 'react';
const MyComponent = () => {
const [ active, setActive ] = useState(true);
useEffect(() => {
setInterval(() => {
setActive((active) => !active);
}, 3000);
}, []);
return (
)
};
const styles = StyleSheet.create({
wrap: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
box: {
backgroundColor: 'rgb(73, 0, 9)', // normalizes colors
width: 80,
height: 80
},
boxActive: {
width: 100,
height: 100,
backgroundColor: '#AC0E28',
transform: [
{ rotate: '45deg' } // uses default values for transform properties
]
}
});
```
