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
$ 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.

<AnimatedLogo
  paths={[
    // 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

Preview:

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: https://github.com/anastely/react-native-logo-animation

License: MIT

You Might Be Interested In:

Add Comment