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