Using React Native Animatable to Add Animations in React Native App

Creating Animations in React Native Apps

Animation List

React native animatable packages a lot of animations. Below is the list of all the animations offered by this package:

• swing
• tada
• wobble
• bounceOutUp
• bounceOutLeft
• bounceOutRight
• fadeIn
• bounceIn
• bounce
• flash
• jello
• fadeInRight
• slideOutLeft
• slideOutRight
• fadeInRightBig
• fadeOutUp
• pulse
• rotate
• rubberBand
• shake
• bounceInDown
• bounceInUp
• bounceInLeft
• bounceInRight
• fadeOut
• fadeOutDown
• fadeOutDownBig
• bounceOut
• zoomOut
• zoomOutDown
• zoomOutUp
• lightSpeedOut
• slideInDown
• slideInUp
• slideInLeft
• zoomOutLeft
• zoomOutRight
• bounceOutDown
• fadeInDown
• fadeInDownBig
• fadeInUp
• fadeInUpBig
• fadeInLeft
• zoomIn
• zoomInDown
• zoomInUp
• zoomInLeft
• fadeInLeftBig
• fadeOutUpBig
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightBig
• flipInX
• flipInY
• flipOutX
• flipOutY
• lightSpeedIn
• slideInRight
• slideOutDown
• slideOutUp
• zoomInRight

Installing React-native-animatable

Installation command for react-native-animatable is as follows:

React Native Animatable Usage

Use the createAnimatableComponent composer, which is comparable to the Animated.createAnimatedComponent, to make objects animated. The pre-composed and accessible Animatable namespace contains the common components View, Text, and Image. Simply wrap your component in an Animatable. View if you want to animate it or compose it with:

Declarative

Animations:

Looping:

Just modify the iterationCount to infinite to create looping animations. Except for attention-seekers, most animations function best when the direction is set to alternating.

Generic transitions:

You may design your straightforward transitions using any style parameter you choose. The following animated, declarative example will enlarge the text size by 5 with each tap. A spring animation shall be utilized if a duration attribute is not provided.

Please use the rgba() syntax if you're utilizing colors.

Props of React Native Animatable

• animation:
  The name of the animation; a list of available animations is given in the above section of the article.
• duration (Milliseconds):
  The amount of time the animation will play for.
• delay :
   Animation can be delayed (in milliseconds).
• direction:
    Animation direction is extremely helpful for repeating animations. Normal, reverse, alternative, and alternate-reverse are all valid values.
• easing:
  The animation's timing function. Valid values are: linear, ease, ease-in, ease-out, ease-in-out, ease-in-cubic, ease-out-cubic, ease-in-out-cubic, ease-in-circ, ease-out-circ, ease-in-out-circ, ease-in-expo, ease-out-expo, ease-in-out-expo, ease-in-quad, ease-out-quad, ease-in-out-quad, ease-in-quart, ease-out-quart, ease-in-out-quart, ease-in-quint, ease-out-quint, ease-in-out-quint, ease-in-sine, ease-out-sine, ease-in-out-sine, ease-in-back, ease-out-back, ease-in-out-back or a custom function.
• iterationCount:
  How many times the animation should be played; use infinite for looping animations.
• iterationDelay:
  How long should the wait between animation repetitions be (in milliseconds)?
• transition :
  Which style attribute to transition, such as opacity, rotation, or fontSize? For many properties, use an array.
• onAnimationBegin:
  When the animation begins, this function is invoked.
• onAnimationEnd:
  When the animation has finished successfully or has been canceled, this method is invoked. The function is called with an endState parameter; check endState.finished to determine if the animation was completed.
• onTransitionBegin:
   When the transition of a style has begun, this function is invoked. To distinguish between styles, the function is invoked with a property parameter.
• onTransitionEnd:
   When a style transition has been performed successfully or canceled, this method is invoked. To distinguish between styles, the function is invoked with a property parameter.
• useNativeDriver :
   Which animation driver to use: native or JavaScript. Although native drivers can improve performance, they cannot handle all sorts of styles.

What are Custom Animations?

A global name or a definition object can be used to refer to animations.

Schema for Animation Definition

An animation definition is a simple object with an optional easing property, a style property for static non-animated styles (useful for zIndex, backfaceVisibility, perspective, and so on), and a list of keyframes. The keyframes are identified by a number ranging from 0 to 1 or by the words from and to. To view more detailed examples, look at the definitions folder.

A basic animation fade:

Creating a zoom out animation by combining several styles:

You may use initializeRegistryWithDefinitions to make your animations accessible globally by referring to them by name. This method may also be used to replace built-in animations if you need to change a value.

Applications of React Native Animatable

React Native Animatable is a popular library that provides a set of pre-defined animations for React Native applications. It simplifies the process of animating components by allowing developers to apply animations using a declarative syntax.

Here are some common applications of React Native Animatable:

• User interface (UI) animations:
  React Native Animatable can be used to create eye-catching animations for various UI elements such as buttons, text inputs, images, and transitions between screens. This library provides a wide range of animations, including fades, slides, zooms, rotations, and more.
• Onboarding screens:
  Onboarding screens are used to introduce new users to an app and showcase its features. React Native Animatable can be utilized to create appealing animations for onboarding screens, such as slide-ins, pulsating effects, or sequential reveals of content.
• Loading indicators:
  Loading indicators are essential for providing feedback to users when performing time-consuming tasks. React Native Animatable can be used to create loading animations, including spinners, progress bars, or animated transitions that indicate the loading state.
• Gestures and interactions:
  React Native Animatable can be used to animate components in response to user gestures and interactions. For example, you can apply animations to buttons when they are pressed, swiped, or dragged.
• Visual feedback:
  Animations can be used to provide visual feedback to users, enhancing the user experience. React Native Animatable allows you to animate components based on certain events or conditions, such as successful form submissions, error notifications, or changes in data.
• Custom transitions:
  React Native Animatable can be used to create custom transitions between screens or different states of an application. By combining different animations and defining custom transitions, you can create unique and visually appealing effects.
• Parallax effects:
  Parallax effects create an illusion of depth by moving different layers at different speeds. React Native Animatable can be used to achieve parallax effects by animating different components with varying speeds and directions.

These are just a few examples of how React Native Animatable can be applied in a React Native application. The library provides a flexible and straightforward way to incorporate animations and bring life to your user interfaces.