0.0.43 • Published 2 years ago

react-native-background-animations v0.0.43

Weekly downloads
84
License
MIT
Repository
gitlab
Last release
2 years ago

React Native Background Animations Library

A React Native library for adding beautiful background animations to your mobile apps. This library provides a collection of customizable components to create stunning(hopefully) visual effects that enhance user experience.

Installation

To get started with the library, you can install it using npm or yarn:

npm install react-native-background-animations

yarn add react-native-background-animations
import React from 'react';
import { View } from 'react-native';

import {StarryNight, RainyBackground, CloudyBackground} from 'react-native-background-animations';

function App() {
  return (
    <View style={{ flex: 1 }}>
      <StarryNight>
      {/* Your other components */}
      </StarryNight>
      
      <RainyBackground>
      {/* Your other components */}
      </RainyBackground>
      
      <CloudyBackground>
      {/* Your other components */}
      </CloudyBackground>
    </View>
  );
}

export default App;

Props

<StarryNightBackground ... />
PropTypeDefaultRequiredDescription
minScalenumber1.00NoMinimum value to animate in scaling of the stars.
maxScalenumber1.25NoMaximum value to animate in scaling of the stars.
starSizenumber8NoSize of the each star.
starAmountnumber16NoTotal amount of stars which will be used in animation.
animationDurationnumber3000NoTotal duration of the animation as milliseconds.
transitionDelaynumber500NoTransition delay before the fade-out animation.
shootingStarsbooleanfalseNoWhen enabled each star each star will move towards random direction before the fading out.
containerStyleViewStyleNoStyles of the container.
childrenJSX.Element[]NoStyles of the container.

Starry-Plain

<RainyBackground ... />
PropTypeDefaultRequiredDescription
dropSizenumber30NoSize of each rain drop.
dropAmountnumber32NoTotal amount of drops in the animation.
animationDurationnumber1000NoTotal duration of the animation as milliseconds.
windEffectRatenumber0NoRate of wind effect in the animation.
minDelaynumber500NoMinimum possible delay before the start of the animation of each drop.
maxDelaynumber5000NoMaximum possible delay before the start of the animation of each drop.
containerStyleViewStyleNoStyles of the container.
childrenJSX.Element[]NoStyles of the container.

Starry-Plain

<CloudyBackground ... />
PropTypeDefaultRequiredDescription
cloudSizenumber50NoSize of the each cloud.
cloudSetnumber4NoTotal amount of cloud set the be animated.
cloudAmountInSetnumber3NoTotal amount of the clouds in each set.
animationDurationnumber3000NoTotal duration of the animation as milliseconds.
animationDelaynumber0.5 * animationDurationNoAnimation delay before the start of each animation.
containerStyleViewStyleNoStyles of the container.
childrenJSX.Element[]NoStyles of the container.
0.0.41

2 years ago

0.0.42

2 years ago

0.0.43

2 years ago

0.0.3

3 years ago

0.0.4

3 years ago

0.0.2

6 years ago

0.0.1

6 years ago