SVG Path Animation In React Native – Logo Animation

Logo Animation is a React Native component to create configurable, repeatable SVG path animation in your app.

Requires react-native-reanimated and react-native-svg.

How to use it:

1. Install and import the Logo Animation component.

# Yarn
$ yarn add react-native-logo-animation

$ npm i react-native-logo-animation
import AnimatedLogo from 'react-native-logo-animation';

2. Add the AnimatedLogo component to the app and define the SVG path in the paths prop.

    // SVG path here

3. Default options to customize the component.

  • margin: marin in px
  • vWidth: width
  • vHeight: height
  • duration: duration of the animation
  • strokeWidth: stroke width
  • strokeColor: stroke color
  • animatedStrokeColor: stroke color when animating
  • isRepeat: whether to repeat the animation


SVG Path Animation In React Native - Logo Animation

Download Details:

Author: anastely

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

You Might Be Interested In:

Add Comment