Light

simformsolutionspvtltd / react-native-skia-catalog Goto Github PK

View Code? Open in Web Editor NEW

53.0 9.0 2.0 9.96 MB

A collection of animated React Native Skia components 🌟

License: MIT License

JavaScript 0.72% Ruby 0.32% Starlark 0.22% Kotlin 1.74% Swift 0.63% Objective-C 0.07% TypeScript 96.24% Shell 0.07%

components react-native skia typescript animation

react-native-skia-catalog's Introduction

react-native-skia-catalog

This custom animated skia component library provides multiple custom animated skia components like Indicator, StrikeImage, Notification, ThemeSwitch, SkiaLike, AnimatedWallet and many more!

It also provides an example app and a detailed usage overview of every available component.
All the available components are fully Android and iOS compatible.
See our available Components.

🎬 Preview

Indicator	StrikeImage	Notification

ThemeSwitch	SkiaLike	AnimatedWallet

AnimatedScanner	MediaButton	HeartRate

WirelessCharger	SkiaCharging	AnimatedCheckmark

Components

Ⅰ. Indicator

More about Indicator component

ⅠI. StrikeImage

More about StrikeImage component

ⅠII. Notification

More about Notification component

IV. ThemeSwitch

More about ThemeSwitch component

V. SkiaLike

More about SkiaLike component

VI. AnimatedWallet

More about AnimatedWallet component

VII. AnimatedScanner

More about AnimatedScanner component

VIII. MediaButton

More about MediaButton component

IX. HeartRate

More about HeartRate component

X. WirelessCharger

More about WirelessCharger component

XI. AnimatedCheckMark

More about AnimatedCheckMark component

XII. SkiaCharging

More about SkiaCharging component

Example

A full working example project is here Example.

$ yarn
$ yarn example ios   // For ios
$ yarn example android   // For Android

Find this library useful? ❤️

Support it by joining stargazers for this repository.⭐

🤝 How to Contribute

We'd love to have you improve this library or fix a problem 💪 Check out our Contributing Guide for ideas on contributing.

Bugs / Feature requests / Feedbacks

For bugs, feature requests, and discussion please use GitHub Issues.

Awesome Mobile Libraries

Check out our other available awesome mobile libraries.

License

MIT License

react-native-skia-catalog's People

Contributors

Stargazers

Watchers

Forkers

thanhpcc96 brugarolas

react-native-skia-catalog's Issues

really need your help about skia like

Hi, first thanks for great library @ravir-simform.

I want to start show a skia-like with like state = true, but I dont know how to do it
I have tried to set

const SkiaLike = ({
  size = 180,
  onChangeValue = () => {},
}: Partial<SkisLikeProps>): React.ReactElement => {
  const value = useValue<number>(1);
  const [isLike, setIsLike] = useState(true);
  const halfSize = size / 2;
 ...

but it's not working to me, can u help? Thanks so much
P/S: I just want so show red color heart immediately without animation on first time if user liked this message

how to install this lib?

Hi, I am using this command npm i react-native-skia-catalog --force but got this error:

'react-native-skia-catalog@*' is not in this registry.

can u help?

Recommend Projects

React

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

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.