https://github.com/behnammodi/react-native-arrival

Animation when Component is mount
https://github.com/behnammodi/react-native-arrival

animation easing react-native spring timing

Last synced: about 1 month ago
JSON representation

Animation when Component is mount

• Host: GitHub
• URL: https://github.com/behnammodi/react-native-arrival
• Owner: behnammodi
• Created: 2019-06-08T07:57:51.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-02-22T11:31:37.000Z (over 3 years ago)
• Last Synced: 2024-05-21T15:18:26.975Z (6 months ago)
• Topics: animation, easing, react-native, spring, timing
• Language: JavaScript
• Homepage:
• Size: 242 KB
• Stars: 9
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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 (

      

        Screen A

      

    );

  }

}

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

    }

  }

);

```