Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/terrysahaidak/rn-search-header
https://github.com/terrysahaidak/rn-search-header
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/terrysahaidak/rn-search-header
- Owner: terrysahaidak
- License: mit
- Created: 2019-12-10T19:45:21.000Z (about 5 years ago)
- Default Branch: tr-experiments
- Last Pushed: 2023-01-05T02:45:47.000Z (almost 2 years ago)
- Last Synced: 2023-03-02T20:05:50.500Z (almost 2 years ago)
- Language: TypeScript
- Size: 8.51 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native ReTween
> Blazing fast and easy tween animation.
## Installation
Open a Terminal in the project root and run:
```sh
yarn add react-native-retween
```
Now we need to install [`react-native-reanimated`](https://github.com/kmagiera/react-native-reanimated).
If you are using Expo (this might work slower with latest Expo SDK 35 than vanilla RN, since it has outdated version of reanimated with no proces), to ensure that you get the compatible versions of the libraries, run:
```sh
expo install react-native-reanimated
```
If you are not using Expo, run the following:
```sh
yarn add react-native-reanimated
```
If you are using Expo, you are done. Otherwise, continue to the next steps.
Next, we need to link these libraries. The steps depends on your React Native version:
- **React Native 0.60 and higher**
On newer versions of React Native, [linking is automatic](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md).
To complete the linking on iOS, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:
```sh
cd ios
pod install
cd ..
```
- **React Native 0.59 and lower**
If you're on an older React Native version, you need to manually link the dependencies. To do that, run:
```sh
react-native link react-native-reanimated
```
## Quick overview
You can find this in the [example](example) folder.
```tsx
function TweenExample() {
const { play, values, stop } = useTween(() => ({
timing: {
duration: 400,
},
// otherwise you can use spring
// spring: {
// mass: 1,
// },
from: {
width: 50,
height: 50,
left: 20,
borderRadius: 0,
},
to: {
width: 200,
height: 200,
left: windowWidth - 20 - 200,
borderRadius: 2,
},
}));
const [backward, setBackward] = React.useState(false);
function onPress() {
play(backward);
setBackward((val) => !val);
}
return (
);
}
```
## License
[MIT](LICENSE)