# react-native-arrival

> Animation when component mount

Latest version **1.2.2** (published 2021-02-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-arrival
pnpm add react-native-arrival
yarn add react-native-arrival
bun add react-native-arrival
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2021-02-22 |
| First published | 2019-06-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Behnam Mohammadi |
| Maintainers | itten |
| Keywords | react-native, animation, spring, timing, easing |

## Links

- npm: https://www.npmjs.com/package/react-native-arrival
- Repository: https://github.com/behnammodi/react-native-arrival
- Homepage: https://github.com/behnammodi/react-native-arrival#readme
- Issues: https://github.com/behnammodi/react-native-arrival/issues
- npm.io page: https://npm.io/package/react-native-arrival

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.2.2 (latest) — 2021-02-22
- 1.2.1 — 2021-02-22
- 1.2.0 — 2019-06-09
- 1.1.2 — 2019-06-09
- 1.1.1 — 2019-06-09
- 1.1.0 — 2019-06-08
- 1.0.0 — 2019-06-08

## README

# Animation when Component is mount

react-native-arrival

[![NPM](https://nodei.co/npm/react-native-arrival.png)](https://nodei.co/npm/react-native-arrival/)

![react-native-arrival](http://itten.ir/file/react-native-arrival.gif)

Left without react-native-arrival and right with react-native-arrival

## Install

`npm i react-native-arrival`

## Use

```jsx
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import Arrival from 'react-native-arrival';

class ScreenA extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Text>Screen A</Text>
      </View>
    );
  }
}

export default Arrival(ScreenA, {
  translateX: { from: 500, to: 0 },
  translateY: { from: 100, to: 0 },
  opacity: { from: 0, to: 1 }
});
```

## More

You can use all tranform property:

```
p or perspective: number
r or rotate: string
rx or rotateX: string
ry or rotateY: string
rz or rotateZ: string
s or scale: number
sx or scaleX: number
sy or scaleY: number
x or translateX: number
y or translateY: number
skewX: string
skewY: string
opacity: number
```

## Options

```jsx
const ScreenA_ = Arrival(
  ScreenA,
  {
    translateX: { from: 500, to: 0 },
    translateY: { from: 100, to: 0 }
  },
  {
    toValue: 1,
    delay: 0,
    useNativeDriver: true
  }
);
```

## Advance Options

You can change Arrival 'extends' from `Component` to `PureComponent` or other React Class

```jsx
import React, { PureComponent } from 'react';

const ScreenA_ = Arrival(
  ScreenA,
  {
    scale: { from: 0, to: 1 }
  },
  {
    extends: PureComponent
  }
);
```

You can change Animated method from `spring` to `timing` and add method config

https://facebook.github.io/react-native/docs/animated#timing

```jsx
import { Easing } from 'react-native';
const ScreenA_ = Arrival(
  ScreenA,
  {
    scale: { from: 0, to: 1 }
  },
  {
    method: 'timing',
    timing: {
      easing: Easing.linear,
      duration: 5000 // 5sec
    }
  }
);
```

Or change `spring` config

https://facebook.github.io/react-native/docs/animated#spring

```jsx
import { Easing } from 'react-native';
const ScreenA_ = Arrival(
  ScreenA,
  {
    scale: { from: 0, to: 1 }
  },
  {
    spring: {
      friction: 7,
      tension: 40,
      speed: 12,
      bounciness: 8
    }
  }
);
```

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