JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q14968F
  • License MIT

Help create animated react native tween component

Package Exports

  • rn-tween

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rn-tween) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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' });

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

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

License