@hikaaam/react-native-reanimated-confetti

A confetti animation build using react-native-reanimated.

Installation

npm install @hikaaam/react-native-reanimated-confetti

Usage

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useConfetti } from '@hikaaam/react-native-reanimated-confetti';

export default function App() {
  const { RenderConfetti, startconfetti, isPlaying } = useConfetti();
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <RenderConfetti />
      <TouchableOpacity onPress={startconfetti} disabled={isPlaying}>
        <Text style={styles.text}>{isPlaying ? 'playing' : 'press me!'}</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: { color: '#000', fontSize: 16 },
});

DEMO

expo snack demo

API

useConfetti(options?)

| Option | Type | Default | Description | | ----------------- | -------- | ------------------ | ---------------------------- | | particlesAmount | number | android:80,ios:200 | Number of confetti particles | | colors | string[] | See source | Array of confetti colors | | duration | number | 2000 | Animation duration (ms) |

Customization

You can pass options to useConfetti to customize the animation.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useConfetti } from './modules';

export default function App() {
  const { RenderConfetti, startconfetti, isPlaying } = useConfetti({
    duration: 3000,
    colors: ['#a864fd', '#29cdff', '#78ff44', '#ff718d', '#fdff6a'],
    particlesAmount: 300,
  });
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <RenderConfetti
        particleStyle={{
          width: 5,
        }}
      />
      <TouchableOpacity onPress={startconfetti} disabled={isPlaying}>
        <Text style={styles.text}>{isPlaying ? 'playing' : 'press me!'}</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: { color: '#000', fontSize: 16 },
});

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT