# rnal

> Small animation library for react-native'

Latest version **0.2.1** (published 2019-03-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install rnal
pnpm add rnal
yarn add rnal
bun add rnal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2019-03-28 |
| First published | 2019-03-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 2.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 68 |
| Author | Said Hayani |
| Maintainers | saidhayani |
| Keywords | android, ios, react native, component library, animation, react-native animation |

## Links

- npm: https://www.npmjs.com/package/rnal
- Repository: https://github.com/hayanisaid/react-native-animation-library
- Homepage: https://github.com/hayanisaid/react-native-animation-library#readme
- Issues: https://github.com/hayanisaid/react-native-animation-library/issues
- npm.io page: https://npm.io/package/rnal

## Dependencies (7)

- [react](https://npm.io/package/react.md) 16.6.3
- [enzyme](https://npm.io/package/enzyme.md) ^3.9.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.4
- [jest-enzyme](https://npm.io/package/jest-enzyme.md) ^7.0.2
- [react-native](https://npm.io/package/react-native.md) 0.58.4
- [styled-components](https://npm.io/package/styled-components.md) ^4.1.3
- [enzyme-adapter-react-16](https://npm.io/package/enzyme-adapter-react-16.md) ^1.10.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.2.1 (latest) — 2019-03-28
- 0.1.2 — 2019-03-26
- 0.1.1 — 2019-03-25
- 0.1.0 — 2019-03-16

## README

## React Native animations library that makes using react-native animations API easy 🚀

<img src="./images/Fade.gif"
     alt="Markdown Monster icon"
     width="150px"
     height="300px"
     style="float: left; margin-right: 5px; width:200px"   />
<img src="./images/SlideUp.gif"
     alt="Markdown Monster icon"
      width="150px"
     height="300px"
     style="float: left; margin-right: 5px; width:200px" width="150px"
     height="300px" />
<img src="./images/infinite.gif"
     alt="Markdown Monster icon"
      width="150px"
     height="300px"
     style="float: left; margin-right: 5px; width:200px"   />
<img src="./images/ZoomIn.gif"
     alt="Markdown Monster icon"
      width="150px"
     height="300px"
     style="float: left; margin-right: 5px; width:200px"   />
<img src="./images/SlideInRight.gif"
     alt="Markdown Monster icon"
      width="150px"
     height="300px"
     style="float: left; margin-right: 5px; width:200px"/>

# Installation ⚓️

- NPM

```
npm -i rnal --save
```

- Yarn

```
yarn add rnal
```

# Simply usage 💪🏽 🙌

## 🎈 Fade 🎈

```
import { Fade } from "rnal";
export default class App extends Component<Props, State> {

  render() {

    return (
      <View style={{flex:1}}>
        <Fade >
          <Image
            source={require("./images/flowrs.jpg")}
            height={200}
            width={450}
            style={{ width: 350, height: 200 }}
            resizeMode="cover"
          />
        </Fade>
      </View>
    );
  }
}


```

## Options and props 🎁

| Props     | Value   | Default           | Description                                                                                   |
| --------- | ------- | ----------------- | --------------------------------------------------------------------------------------------- |
| duration  | number  | 300               | Play the audio track that matches the system language. If none match, play the first track.   |
| startWhen | boolean | false             | set when the animation should start, by default the animation start when the component mount. |
| infinite  | boolean | false             | Determine if the animation is infinite or just run once.                                      |
| direction | string  | 300               | specify the direction of the animation ex("toRight", "toLeft", "up","down).                   |
| sets      | Object  | `{from:0,to:180}` | set the point start and the end of the animation, used with `Rotate` animation .              |

---
_Source: https://npm.io/package/rnal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._