Giter VIP home page Giter VIP logo

mateoguzmana / react-native-fiesta Goto Github PK

View Code? Open in Web Editor NEW
418.0 7.0 11.0 7.97 MB

๐ŸŽ‰ A set of celebration animations powered by @shopify/react-native-skia. Engage more with your users by celebrating in your React Native application.

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

License: MIT License

JavaScript 5.64% TypeScript 56.99% Ruby 1.54% Java 19.65% Makefile 1.94% C++ 8.91% Objective-C 0.50% Objective-C++ 4.63% C 0.13% Swift 0.07%
animations javascript react react-native react-native-skia react-native-web skia typescript hacktoberfest

react-native-fiesta's Introduction

React Native Fiesta ๐ŸŽ‰

A set of celebration animations powered by @shopify/react-native-skia. Engage more with your users by celebrating in your React Native application.

Gifs React Native Fiesta

Fiesta is a set of animations ideal for celebration and user engagement.

react-native-fiesta is fully powered by @shopify/react-native-skia.

Getting Started

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

Documentation

Examples

Library Under Construction ๐Ÿšง

This library is still under construction, right now it is experimental. You can read more about it here.

Contributing

Please read the guidelines.

  • If you have any questions or suggestions, please open an issue on Github.
  • To contribute adding a new animation or by improving the existing ones, please open a pull request.
  • If you have a cool theme the community can use, don't hesitate opening an issue to suggest it (or just shoot a PR).

License

MIT


React Native Fiesta Demo

react-native-fiesta's People

Contributors

mateoguzmana avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native-fiesta's Issues

Christmas animation

To make Fiesta more complete, would be nice to have some christmas animations. Christmas is still a couple of months away but something can be introduced in the meantime.

It can be maybe some ornaments, lights or something else representing Christmas.

Ideally this Christmas animation can be use with the Popper component. You can refer to the Hearts as an example for the implementation.

I leave the image below for inspiration:

image

Documentation for the Popper component

Currently there is no documentation for the Popper component.

This component can be very useful for custom animations. Would be good to expose the how to use it under the components section on the Fiesta website. You can follow the documentation structure of the other components

Error when installing

Hey, just encountered this bug when installing via yarn.

Command failed.
Exit code: 127
Command: patch-package
Arguments: 

Version 0.3.1 and below seem to install as expected, but 0.4.0 onward raises this error.

Can not find module for react-native-fiesta

Describe the bug
Im trying to install this package, then appear error can not find module for react-native-fiesta, I already tried remove node_modules, yarn.lock, yarn install...

To Reproduce
Steps to reproduce the behavior:

  1. Install package with
    yarn add @shopify/react-native-skia 0.1.172
    yarn add react-native-fiesta 0.5.1

  2. See error

Screen Shot 2023-05-20 at 12 09 09

Screenshots
If applicable, add screenshots to help explain your problem.
Screen Shot 2023-05-20 at 12 04 13

Musical notes animation

As part of the roadmap for Fiesta, would be great to have some musical notes animation as part of the set.

Ideally the animation can be used with the Popper component, you can use the Hearts or Balloons as examples. The animation can either be created using an SVGs as a string or SVGs built with components.

Perhaps an option to choose which musical notes would be a great addition for the component.

<MusicNotes notes=['...'] />

And below an image as inspiration:

(No need for all of them, leaving it up to the contributor)

musical notes

Enable passing more options to the Fiesta context

Currently, the Fiesta context only allows running an animation passing an animation name, but it is very limited since we can't pass some specific configs such as direction, theming, speed, e.t.c...

Halloween pumpkins animation

As part of the roadmap for Fiesta and because halloween is just around the corner, would be great to have some pumpkins animation as part of the set.

Ideally the animation can be used with the Popper component, you can use the Hearts or Balloons as examples. The animation can either be created using an SVG as a string or an SVG built with components.

Ideal API:

<Pumpkins theme={FiestaThemes.Halloween} />

Below an image for inspiration:

image

UI is not touchable after the animation was executed

Describe the bug
When an animation was executed, I can't interact with my app anymore. It's like there is an invisible Container overall. I need to restart the app.

To Reproduce
I am using the runFiesta hook inside a navigating container/stack together with s button onPress.

Expected behavior
I can still interact with my app/UI after running an animation.

Do you have any idea how such behavior occurs?

Flowers animation

It would be great to have some animated flowers in Fiesta to celebrate some special occasions.

Ideally the animation can be used with the Popper component, you can use the Hearts or Balloons as examples. The animation can either be created using an SVG as a string or an SVG built with components.

Keeping in mind performance, perhaps the animation can include some flower opening or something else. Leaving it up to the contributor.

Leaving this animation I found in Codepen, some animated flowers with css and canvas.

And below an image as inspiration:

image

Fireworks: Improve animation

Currently the animation is quite basic, you can see it below:

Screen.Recording.2022-08-22.at.15.06.07.mov

The aim is to get something a bit closer to this, but considering keeping a decent performance as well.

image

Popper direction prop

Currently, the Popper component pops the elements in a descending direction by default. We should allow passing a prop to choose the popping direction.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.