An animated snowy background using reanimated and Skia Atlas
npm install react-native-snowfallreact-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.
!npm
!GitHub issues
!GitHub stars
!GitHub license
yarn
``sh`
yarn add react-native-snowfall
This library relies on the following peer dependencies. Make sure they are installed in your project:
`sh`
yarn add react-native-reanimated @shopify/react-native-skia
`jsx
import React from 'react';
import { View } from 'react-native';
import { Snowfall } from 'react-native-snowfall';
const App = () => {
return (
{/ Add the SnowFall component /}
{/ Rest of your app components /}
);
};
export default App;
`
You can customize the snowfall effect by passing props to the Snowfall component:
`jsx
import React from 'react';
import { View } from 'react-native';
import { Snowfall } from 'react-native-snowfall';
const App = () => {
return (
duration={15000}
minSize={5}
maxSize={25}
imageScale={0.5}
imagePath={require('./assets/customSnowflake.png')}
/>
{/ Rest of your app components /}
);
};
export default App;
`
| 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. |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with react-native-builder-bob ❄️
Feel free to customize the snowfall effect and enjoy the winter magic in your React Native apps! 🎅