Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rootstrap/react-native-use-animate
Animations in React native made simple
https://github.com/rootstrap/react-native-use-animate
animations react-native
Last synced: 4 days ago
JSON representation
Animations in React native made simple
- Host: GitHub
- URL: https://github.com/rootstrap/react-native-use-animate
- Owner: rootstrap
- License: mit
- Created: 2020-06-11T14:52:01.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T23:59:50.000Z (over 1 year ago)
- Last Synced: 2024-10-29T01:13:49.040Z (18 days ago)
- Topics: animations, react-native
- Language: JavaScript
- Homepage: https://rootstrap.com
- Size: 1.8 MB
- Stars: 41
- Watchers: 11
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# @rootstrap/react-native-use-animate
[](https://codeclimate.com/github/rootstrap/react-native-use-animate/maintainability) [](https://codeclimate.com/github/rootstrap/react-native-use-animate/test_coverage)
React Native animations made simple.
Whether you are looking to get started with animations in React Native or you need to add a simple animation to your app and are looking for a simple and light weight option, this is the library for you.
This library contains some simple animation hooks that will cover simple use cases and some complex ones as well.
## Demo
To test it out yourself you can clone this repo and go into the `demo` folder, then run `expo start` and open the app on a simulator or device.
#### Just for android
Since the demo is an expo project, we also have the app published on Expo. All you have to do is download the [expo client app](https://expo.io/tools#client) and scan the following QR code:
This is only available for Android since Apple has restrictions on how apps can be published.
## Installation
```
yarn add @rootstrap/react-native-use-animate
```
```
npm install @rootstrap/react-native-use-animate --save
```
And that's it! No linking needed no matter which version of react-native you are running.
## Usage
### Simple Animation
```js
import React from 'react';
import { Animated, StyleSheet } from 'react-native';
import { useAnimate } from '@rootstrap/react-native-use-animate';
const styles = StyleSheet.create({
box: {
width: 100,
height: 100,
backgroundColor: 'red',
},
});
const AnimatedBox = () => {
const animatedX = useAnimate({
fromValue: 0,
toValue: 100,
duration: 1000,
iterations: -1,
bounce: true,
});
return (
);
};
```
### Parallel Animations
```js
import React from 'react';
import { Animated, StyleSheet } from 'react-native';
import {
useAnimate,
useAnimateParallel,
} from '@rootstrap/react-native-use-animate';
const styles = StyleSheet.create({
box: {
width: 100,
height: 100,
backgroundColor: 'red',
},
});
const AnimatedBox = () => {
const animatedOpacity = useAnimate({
animate: false,
bounce: true,
});
const animatedRotation = useAnimate({
bounce: true,
animate: false,
});
useAnimateParallel({
animations: [animatedOpacity, animatedRotation],
iterations: -1,
duration: 1000,
});
return (
);
};
```
### Sequenced Animations
```js
import React from 'react';
import { Animated, StyleSheet } from 'react-native';
import {
useAnimate,
useAnimateSequence,
} from '@rootstrap/react-native-use-animate';
const styles = StyleSheet.create({
box: {
width: 100,
height: 100,
backgroundColor: 'red',
},
});
const AnimatedBox = () => {
const animatedX = useAnimate({
fromValue: 0,
toValue: 200,
animate: false,
});
const animatedY = useAnimate({
fromValue: 0,
toValue: 200,
bounce: true,
animate: false,
});
useAnimateSequence({
animations: [animatedX, animatedY],
iterations: -1,
duration: 1000,
});
return (
);
};
```
## Contributing
If you have an idea that could make this library better we would love to hear it. Please take a look at our [Contributing Guidelines](CONTRIBUTING.md) to get to know the rules and how to get started with your contribution.
## License
**@rootstrap/react-native-use-animate** is available under the MIT license. See the LICENSE file for more info.
## Credits
**@rootstrap/react-native-use-animate** is maintained by [Rootstrap](http://www.rootstrap.com) with the help of our [contributors](https://github.com/rootstrap/react-native-use-animate/contributors).
[
](http://www.rootstrap.com)