# rn-tween

> Help create animated react native tween component

Latest version **1.0.4** (published 2019-08-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install rn-tween
pnpm add rn-tween
yarn add rn-tween
bun add rn-tween
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-08-29 |
| First published | 2019-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Karona Tourn |
| Maintainers | tournkarona |
| Keywords | tween, rn-tween, react-native-tween, react-native-motion, rn-motion, tween, motion, rn-animation, animation |

## Links

- npm: https://www.npmjs.com/package/rn-tween
- Repository: https://github.com/Karona-Tourn/rn-tween
- Homepage: https://github.com/Karona-Tourn/rn-tween#readme
- Issues: https://github.com/Karona-Tourn/rn-tween/issues
- npm.io page: https://npm.io/package/rn-tween

## 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.0.4 (latest) — 2019-08-29
- 1.0.3 — 2019-08-28
- 1.0.2 — 2019-08-28
- 1.0.1 — 2019-08-28

## README

# **rn-tween**

It can help animating components by timing.

## Installation

- Using **Npm**

```bash
npm install rn-tween --save
```

- Using **Yarn**

```bash
yarn add rn-tween --dev
```

## Tween components

- RNTween
- RNTweenView
- RNTweenImage
- RNTweenText

## Example

### Auto start

```jsx
import {RNTweenView} from 'rn-tween';

<RNTweenView
  autoStartName="transit"
  initialConfig={{
    transit: {
      mode: 'parallel',
      configs: [
        {
          from: 0,
          to: 1,
          duration: 1000,
          styleProperty: 'opacity',
          loop: true,
        },
        {
          from: 0.2,
          to: 1,
          duration: 1000,
          styleProperty: 'scale',
          loop: true,
        },
      ],
    },
  }}
  style={{
    width: 100,
    height: 100,
    backgroundColor: 'red',
  }}
/>;
```

### Call functions

```jsx
import {RNTweenView} from 'rn-tween';

<RNTweenView
  ref={ref => (_tween = ref)}
  firstUsedConfigName="transit"
  initialConfig={{
    transit: {
      mode: 'parallel',
      configs: [
        {
          from: 0,
          to: 1,
          duration: 500,
          styleProperty: 'opacity',
        },
        {
          from: 0.2,
          to: 1,
          duration: 500,
          styleProperty: 'scale',
        },
      ],
    },
  }}
  style={{
    width: 100,
    height: 100,
    backgroundColor: 'orange',
  }}
/>;

// Stop animating the tweeen with a specific configuration name
_tween.start({name: 'transit'});
_tween.start({name: 'transit', reversed: true});
_tween.start({name: 'transit', reversed: true, onComplete: () => alert('Finished')});

// Stop animating the tween
_tween.stop();

// Reprepare tween animation configurations
_tween.prepare({
  transit: {
    mode: 'sequence',
    configs: [
      {
        from: 0,
        to: 1,
        duration: 500,
        styleProperty: 'opacity',
      },
      {
        from: 0.2,
        to: 1,
        duration: 500,
        styleProperty: 'scale',
      },
    ],
  },
});
```

## Available component props

## RNTween

| Name                | Type      | Default | Description                                                                  |
| ------------------- | --------- | ------- | ---------------------------------------------------------------------------- |
| autoStartName       | string    | null    | Tell which animation tween should automatically start at the first time      |
| firstUsedConfigName | string    | null    | Tell which animation tween configuration should be applied at the first time |
| initialConfig       | object    | null    | The initial tween configurations to be used                                  |
| AnimatedComponent   | Component | null    | The animated component to be animated                                        |
| onComplete          | function  | null    | The callback invoked after the tween animation completed                     |

## RNTweenView

Also inherits [ViewProps](https://facebook.github.io/react-native/docs/view)

| Name                | Type     | Default | Description                                                                  |
| ------------------- | -------- | ------- | ---------------------------------------------------------------------------- |
| autoStartName       | string   | null    | Tell which animation tween should automatically start at the first time      |
| firstUsedConfigName | string   | null    | Tell which animation tween configuration should be applied at the first time |
| initialConfig       | object   | null    | The initial tween configurations to be used                                  |
| onComplete          | function | null    | The callback invoked after the tween animation completed                     |

## RNTweenText

Also inherits [TextProps](https://facebook.github.io/react-native/docs/text)

| Name                | Type     | Default | Description                                                                  |
| ------------------- | -------- | ------- | ---------------------------------------------------------------------------- |
| autoStartName       | string   | null    | Tell which animation tween should automatically start at the first time      |
| firstUsedConfigName | string   | null    | Tell which animation tween configuration should be applied at the first time |
| initialConfig       | object   | null    | The initial tween configurations to be used                                  |
| onComplete          | function | null    | The callback invoked after the tween animation completed                     |

## RNTweenImage

Also inherits [ImageProps](https://facebook.github.io/react-native/docs/image)

| Name                | Type     | Default | Description                                                                  |
| ------------------- | -------- | ------- | ---------------------------------------------------------------------------- |
| autoStartName       | string   | null    | Tell which animation tween should automatically start at the first time      |
| firstUsedConfigName | string   | null    | Tell which animation tween configuration should be applied at the first time |
| initialConfig       | object   | null    | The initial tween configurations to be used                                  |
| onComplete          | function | null    | The callback invoked after the tween animation completed                     |

## initialConfig

```jsx
initialConfig: {
  [name: string]: {
    mode,
    configs
  }
}
```

| Name    | Type   | Description                                                    |
| ------- | ------ | -------------------------------------------------------------- |
| mode    | string | Specify tween animation mode like **parallel** or **sequence** |
| configs | array  | Array of tween animation configuration                         |

### initialConfig[name].configs[index]

| Name          | Type   | Description                                                                |
| ------------- | ------ | -------------------------------------------------------------------------- |
| styleProperty | string | Specify any style property to be animated like **opacity**, **scale**, etc |
| from          | number | Value from where the animation starts                                      |
| to            | number | Value to where the animation must reach                                    |
| duration      | number | Duration of animation                                                      |
| delay         | number | Delay before the animation starts                                          |
| loop          | bool   | Tell if the animation should play as loop                                  |
| easing        | function | Easing function to define curve. Default is TweenEasing.linear           |
| useNative     | bool   | Uses the native driver when true. Default is true                          |

## Available instance functions

### start({ name, reversed, onComplete })

| Name       | Type     | Description                                   |
| ---------- | -------- | --------------------------------------------- |
| name       | string   | Name of tween animation configuration         |
| reversed   | bool     | Tell if the animation should play in reverse  |
| onComplete | function | Callback invoked after the animation complete |

### stop()

Stop a running animation

### prepare({ mode, configs })

| Name    | Type   | Description                                                    |
| ------- | ------ | -------------------------------------------------------------- |
| mode    | string | Specify tween animation mode like **parallel** or **sequence** |
| configs | array  | Array of tween animation configuration                         |

## License

- [MIT](LICENSE)

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