react-native-snowfall 🌨️

react-native-snowfall is a library that provides an animated snowy background for your React Native applications. It utilizes the Reanimated and Skia Atlas libraries to create a smooth and efficient snow effect.

Installation ❄️

yarn

yarn add react-native-snowfall

Peer Dependencies 🔗

This library relies on the following peer dependencies. Make sure they are installed in your project:

yarn add react-native-reanimated @shopify/react-native-skia

Demo 💫

Usage 🎨

import React from 'react';
import { View } from 'react-native';
import { Snowfall } from 'react-native-snowfall';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      {/* Add the SnowFall component */}
      <Snowfall />
      {/* Rest of your app components */}
    </View>
  );
};

export default App;

Customization ✨

You can customize the snowfall effect by passing props to the Snowfall component:

import React from 'react';
import { View } from 'react-native';
import { Snowfall } from 'react-native-snowfall';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <Snowfall
        count={100}
        duration={15000}
        minSize={5}
        maxSize={25}
        imageScale={0.5}
        imagePath={require('./assets/customSnowflake.png')}
      />
      {/* Rest of your app components */}
    </View>
  );
};

export default App;

Props 🎛️

| Prop | Type | Default | Description | | ------------- | ------------------ | ---------------------------- | ------------------------------------------------------------------------- | | count | number | 70 | Number of snowflakes to display. | | duration | number | 10000 | Duration of the snowfall animation in milliseconds. | | minSize | number | 10 | Minimum size of the snowflakes. | | maxSize | number | 20 | Maximum size of the snowflakes. | | imageScale | number | 0.7 | Scale factor for the snowflake image. | | imagePath | DataSourceParam | require('./snowflake.png') | Path to the snowflake image asset. | | customImage | SkImage | undefined | Custom Skia image to use as snowflake. Overrides imagePath if provided. |

Contributing 🙌

See the contributing guide to learn how to contribute to the repository and the development workflow.

License 📜

MIT

Made with react-native-builder-bob ❄️

Feel free to customize the snowfall effect and enjoy the winter magic in your React Native apps! 🎅