react-native-snow-backgroud

A simple snow background effect for React Native CLI using Skia. This library renders a falling snow animation on a full-screen canvas with minimal setup.

It is designed to be lightweight, easy to understand, and suitable for learning or simple UI effects.

Requirements

• React Native CLI
• React Native >= 0.72
• React >= 18
• @shopify/react-native-skia

Note: This library is intended for React Native CLI projects. It may not work correctly in Expo environments.

Installation

npm install react-native-snow-backgroud
npm install @shopify/react-native-skia

For iOS:

cd ios && pod install

Usage

import './global.css';
import {View,Text} from 'react-native';
import { SnowView } from "react-native-snow-backgroud";
export default function App(){
  return(
    <SnowView count={120} color='#E0FFFF' speed={5}>
    <View className='flex-1 justify-center items-center bg-black'>
      <Text className='text-white'>Hello, World!</Text>
    </View>
    </SnowView>
  )
}

SnowView renders a full-screen Skia canvas with falling snow particles.

Props

SnowView

| Name | Type | Default | Description | | ----- | ------ | ------- | ----------------------------------------------- | | count | number | 100 | Number of snow particles rendered on the screen | | speed | number | 100 | The speed of snow falling on the screen |

Performance Notes

• The default particle count is optimized for general usage.
• Increasing the particle count may affect performance on lower-end devices.
• Future versions may include rendering optimizations and additional effects.