DOCSEARCHbyAlgolia
Submit Docs

React Native Fiesta

website·Indexed 30 days ago

https://mateoguzmana.github.io/react-native-fiesta/

A set of animations for React Native ideal for celebrations and user engagement. Includes components for balloons, fireworks, hearts, stars, emojis, and a popper for throwing elements across the screen, all manageable via the Fiesta context.

Tokens
3.4K
Snippets
16
Records
21
Agent score
74%

What's inside React Native Fiesta

  1. Overview of react-native-fiesta celebration animations

    react-native-fiesta provides out-of-the-box celebration animations for React Native applications, allowing developers to trigger celebratory effects (such as for first orders or birthdays) without implementing complex animation logic. The library is powered by React Native Skia, a high-performance 2D graphics library.

  2. Render a single animated star with the Star component

    The Star component allows for the placement of a single animated star.

    Critical Requirement: The Star component must be wrapped inside a Canvas component from @shopify/react-native-skia. Failure to do so will cause the application to crash because the animation requires a Skia Canvas to execute.

    import { StyleSheet } from 'react-native';
import { Canvas } from '@shopify/react-native-skia';
import { Star } from 'react-native-fiesta';

function App() {
  return (
    <Canvas style={styles.canvas}>
      <Star 
        x={100} // Required: Initial x position
        y={200} // Required: Initial y position
        autoplay={true} // Optional: Whether to animate automatically (default: true)
        color="rgba(255, 255, 0, 1)" // Optional: Star color
      />
    </Canvas>
  );
}

const styles = StyleSheet.create({
  canvas: {
    flex: 1,
  },
});

  3. Render a single animated heart with the Heart component

    The Heart component allows for the display of a single animated heart.

    Critical Requirement: The Heart component must be wrapped inside a Canvas component from @shopify/react-native-skia. Failure to do so will cause the application to crash because the animation requires a Skia Canvas context.

    import { StyleSheet } from 'react-native';
import { Canvas } from '@shopify/react-native-skia';
import { Heart } from 'react-native-fiesta';

function App() {
  return (
    <Canvas style={styles.canvas}>
      <Heart 
        x={100} // Required: Initial x position
        y={100} // Required: Initial y position
        autoplay={true} // Optional: Whether to animate automatically (default: true)
        color="rgba(238, 17, 131, 1)" // Optional: Heart color
      />
    </Canvas>
  );
}

const styles = StyleSheet.create({
  canvas: {
    flex: 1,
  },
});

  4. Trigger animations using the useFiesta hook

    Use the useFiesta hook to access the runFiestaAnimation function. This function accepts an object containing an animation property, which should be a value from the FiestaAnimations enum to determine which animation to execute.
    import React from 'react';
import { Button } from 'react-native';
import { useFiesta, FiestaAnimations } from 'react-native-fiesta';

export function Example() {
  const { runFiestaAnimation } = useFiesta();

  const onPress = () =>
    runFiestaAnimation({ animation: FiestaAnimations.Balloons });

  return <Button onPress={onPress} title="Run Animation" />;
}

  5. Install react-native-fiesta

    react-native-fiesta is a library of animations for celebrations and user engagement. It is powered by @shopify/react-native-skia, which must be installed first. No additional pods or dependencies beyond the core peer dependencies are required.
    # Install required peer dependencies and the library
yarn add @shopify/react-native-skia
yarn add react-native-reanimated
yarn add react-native-fiesta

  6. Render a single customizable balloon with Balloon

    The Balloon component allows for the placement of a single balloon on the screen.

    Critical Requirement: The Balloon component must be wrapped inside a Canvas component from @shopify/react-native-skia. Failure to do so will cause the application to crash because the animation requires a Skia Canvas to run.

    Props Reference

    PropTypeDefaultDescription
    xnumber0X position of the balloon on the screen
    ynumber0Y position of the balloon on the screen
    colorstringblueColor of the balloon
    rnumber40Radius of the balloon
    depthnumber1Depth of the balloon (suggested range: 0 to 1; 1 means no depth)
    import { StyleSheet } from 'react-native';
import { Canvas } from '@shopify/react-native-skia';
import { Balloon } from 'react-native-fiesta';

function App() {
  return (
    <Canvas style={styles.canvas}>
      <Balloon x={50} y={50} color={'rgba(255, 0, 255, 0.4)'} depth={0.4} />
    </Canvas>
  );
}

const styles = StyleSheet.create({
  canvas: {
    flex: 1,
  },
});

  7. Configure emoji fonts for react-native-fiesta

    Emoji fonts are not bundled with react-native-fiesta to keep the library size small. You must provide a font file (such as OpenMoji, NotoColorEmoji, or OpenSansEmoji) from your own application assets and pass it to the emoji components using a Skia font object.

  8. Set up the FiestaProvider for global animations

    Wrap your application with the FiestaProvider to enable the use of the useFiesta hook in any child component. If you intend to use emojis, you must load a font using @shopify/react-native-skia and pass it as the font prop to the provider.
    import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { FiestaProvider } from 'react-native-fiesta';
import { useFont } from '@shopify/react-native-skia';

import { Examples } from './components/Examples';

function App() {
  // optional, only needed if you want to use the emojis
  const font = useFont(require('./fonts/OpenMoji-Color.ttf'), 30);

  if (!font) return null;

  return (
    <SafeAreaView style={styles.container}>
      <FiestaProvider font={font}>
        <Examples />
      </FiestaProvider>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

  9. Render a set of animated stars with the Stars component

    The Stars component renders a set of animated stars. It supports custom theming via a color array and adjustable horizontal spacing between the stars.
    import { StyleSheet, View } from 'react-native';
import { Stars } from 'react-native-fiesta';

function App() {
  return (
    <View style={styles.container}>
      <Stars 
        theme={['#FF0000', '#00FF00']} // Optional: Array of colors for theming
        spacing={40} // Optional: Horizontal space between items (default: 30)
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

  10. Render animated elements using the Popper component

    The Popper component from react-native-fiesta allows you to compose a set of elements that are 'thrown' across the screen. It is designed to work within a Skia Canvas. You define the visual representation of the elements using the renderItem prop, which provides the current coordinates (x, y) and a set of colors for each item.
    import { StyleSheet } from 'react-native';
import { Canvas, Circle } from '@shopify/react-native-skia';
import { Popper, PopperDirection } from 'react-native-fiesta';

function App() {
  return (
    <Canvas style={styles.canvas}>
      <Popper
          direction={PopperDirection.Ascending}
          spacing={10}
          renderItem={({ x, y, colors }, index) => (
            <Circle
              key={`circle-${index}`}
              cx={x}
              cy={y}
              r={10}
              color={colors[index]}
            />
          )}
          positionSpringConfig={{
            stiffness: 100,
            damping: 100,
            mass: 11000,
          }}
          fadeSpringConfig={{
            stiffness: 1,
            damping: 1,
            mass: 1000,
          }}
        />
    </Canvas>
  );
}

const styles = StyleSheet.create({
  canvas: {
    flex: 1,
  },
});

  11. Prevent Fiesta Animations Canvas from blocking UI pointer events

    The Canvas component in Fiesta Animations has pointer events enabled by default, which can block interactions with the UI elements behind it. While some components like Popper disable pointer events automatically, individual animations may require manual configuration. To prevent the Canvas from intercepting touch events, set the pointerEvents prop to none.
    <Canvas pointerEvents="none">
  <YourSkiaComponent />
</Canvas>

  12. Implement a balloon celebration using the Balloons component

    The react-native-fiesta library provides out-of-the-box components for celebrations. To display balloons on a screen, import and render the Balloons component. For a centered layout, wrap the component in a View with flexbox centering styles.
    import { StyleSheet, View } from 'react-native';
import { Balloons } from 'react-native-fiesta';

function App() {
  return (
    <View style={styles.container}>
      <Balloons />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});