Success Animation

react native component success animation is for react native developers.This npm is for people who can not work with lottie animation for animations.This npm module is completly customizable.hope this helps lot of us make your project even more cooler.

Note: Feel free to raise issues and ask for new features.

Table of Contents

• Installation

• Import

• Usage

• Demo

• Props table

• Support

• Contributing

Installation

npm install react-native-success-animation

Import

import { SuccessAnimation} from react-native-success-animation

Usage

import React, { useState } from "react";
import { View, Text, Button } from "react-native";
import { SuccessAnimation } from "react-native-success-animation";

const App = () => {
  const [state, setState] = useState(false);
  return (
    <View style={{ flex: 1 }}>
      <View
        style={{ flex: 0.3, justifyContent: "center", alignItems: "center" }}
      >
        <Text>React Native Success Animation Demo</Text>
      </View>
      <View
        style={{ flex: 0.5, justifyContent: "center", alignItems: "center" }}
      >
        {state && (
          <SuccessAnimation
            size={120}
            iconSize={120 * 0.7}
            dotColor={"#44c6b1"}
            iconColor={"white"}
            dotSize={20}
            duration={2000}
            backgroundColor={"#44c6b1"}
            animatedLayerColor={"white"}
            onAnimationEnd={() => alert("Animation Ended")}
          />
        )}
      </View>
      <View style={{ flex: 0.2 }}>
        <Button
          title={state ? "Hide" : "Show"}
          onPress={() => setState((prevState) => !prevState)}
        />
      </View>
    </View>
  );
};

export default App;

Demo

Click here to navigate to snack code example

note:its not comptaible for react-native web yet;

Props table

| prop | description | default | type | required | | --------------- | ------------------------------------------------------------------------------- | ----------- | ------------- | ------------ | | size | Size of success Animation component | 120 | Number | yes | | iconSize| Check icon Size | 84 | Number | yes | | dotColor | color for particles in animation| #44c6b1 | hexcolor | no | | iconColor | icon color (check icon) | #ffff | hexcolor | no | | dotSize | particle size | #44c6b1 | hexcolor | no | | duration| duration for animation to last| 2000 | milliseconds | yes | | backgroundColor| background color for animation(check icon background)| #44c6b1 | hexcolor | no | | animatedLayerColor| animated face layer (leave it as default for best experience)| #ffff | hexcolor | no | | onAnimationEnd | trigger event when animation is complete | null | function | no |

Support

Please open an issue for support.

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.