rn-tween

It can help animating components by timing.

Installation

• Using Npm

npm install rn-tween --save

• Using Yarn

yarn add rn-tween --dev

Tween components

• RNTween
• RNTweenView
• RNTweenImage
• RNTweenText

Example

Auto start

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

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

| 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

| 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

| 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

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