ReactNative - Animated Toggle Button

A two states button that can be animated when trasitioning between them.

Installation

Requirements

This library depends on lottie-react-native in order to work. You must add this library as a dependency before installing this package.

yarn add lottie-react-native
yarn add [email protected]

The version to install depends on the react native version being used in the project, you can see the corresponding version of the library for each react native version next:

| App built in React Native version | Requires lottie-react-native version | Requires lottie-ios version | |-----------------------------------|--------------------------------------|-----------------------------| | >= 0.59 | 3.0.2 | 3.0.3 | | >= 0.60 | 4.0.2 | 3.2.3 | | >= 0.63 | 4.0.3 | 3.2.3 | | >= 0.64 | 4.1.3 | 3.2.3 | | >= 0.66 | latest | 3.2.3 |

With yarn

yarn add @amalgamaco/react-native-animated-toggle-button

With npm

npm install @amalgamaco/react-native-animated-toggle-button

Usage

The AnimatedToggleButton component can be used in a declarative way:

import React, { useState } from 'react';
import { AnimatedToggleButton } from '@amalgamaco/react-native-animated-toggle-button';

import animation from './animation.json';

const BasicExample = () => {
   const [ isActive, setIsActive ] = useStsate( false );

   return (
      <AnimatedToggleButton
         source={animation}
         isActive={isActive}
         onPress={() => setIsActive( !isActive )}
         activeFrame={20}
         inactiveFrame={0}
         toActiveFrameRange={[ 10, 20 ]}
         toInactiveFrameRange={[ 20, 30 ]}
      />
   );
}

There is also a non-button animated component that you can use if you don't need a button and want to show only an animated view between two states:

import React from 'react';
import { AnimatedIcon } from '@amalgamaco/react-native-animated-toggle-button';

import animation from './animation.json';

const BasicExample = () => (
   <AnimatedIcon
      source={animation}
      isActive={true}
      activeFrame={20}
      inactiveFrame={0}
      toActiveFrameRange={[ 10, 20 ]}
      toInactiveFrameRange={[ 20, 30 ]}
   />
);

API

The AnimatedToggleButton accepts several props. They are describe in the following table:

| Prop | Description | Default | |----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ------- | | source | Mandatory - The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a uri property, or it can be an actual JS object of an animation, obtained (for example) with something like require('../path/to/animation.json'). | None | | inactiveFrame | Mandatory - A number indicating the still frame to show when the animation is in inactive state. | None | | activeFrame | Mandatory - A number indicating the still frame to show when the animation is in active state. | None | | toActiveFrameRange | Mandatory - A range of two numbers indicating an start and end frame for the animation to show when the button passes from inactive to active state. The end frame must be always greater that the start frame. Example: [ 10, 20 ] | None | | toInactiveFrameRange | Mandatory - A range of two numbers indicating an start and end frame for the animation to show when the button passes from active to inactive state. The end frame must be always greater that the start frame. Example: [ 20, 30 ] | None | | isActive | A boolean flag indicating whether or not the button is in an active state or not. If the button is active it will show the animation frame set in the activeFrame prop, otherwise it will show the animation frame set in the inactiveFrame prop. | false | | onPress | A callback to call when the button is pressed. | undefined | | speed | The speed the animation will progress. Sending a negative value will reverse the animation |1| | iconSize | The size of the animated icon. This prop will set the width and height of the animation view. |50| | style | Style attributes for the view, as expected in a standard View. | undefined | | containerStyle | Style attributes for the container view, as expected in a standard View. | undefined |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT