Charts with React Native Skia

Подписаться 101 тыс.

Просмотров 51 тыс.

50% 1

Example: github.com/Shopify/react-nati...
Marc Rousavy has packaged these recipes into the following library: github.com/margelo/react-nati...
Learn React Native Gestures and Animations at start-react-native.dev/
Library to scale and smooth graphs:
* d3js.org/
* airbnb.io/visx/
The getYforX function is explained at pomax.github.io/bezierinfo/#y...
Chapters:
0:00 Intro
2:34 Point smoothing
4:04 getYforX
10:03 Path interpolation
22:16 Closing notes
Music in this video:
Swørn - Tumbling chll.to/973f9c2d
Blue Wednesday - Into The Wind chll.to/55279190
L'Indécis - keep on chll.to/dded65a5
Swørn - Reflection chll.to/fbce26de
Nymano - Sleepover chll.to/4dee60b1

Наука

Опубликовано:

4 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 58

@tridibeshnag782 2 года назад

I have always been you fan but your recent videos just keep getting yummier!! 😋

@rikeudi 2 года назад

Always awesome contents and tutorials. Great video

@pplytas 2 года назад

Great tutorial once again! Thanks William

@Cornerbet Год назад

I just don't understand why God didn't introduce me to you sooner. What a wonderful class, greetings from Brazil.

@taminhtri7002 2 года назад

Awesome ! Thanks Mr. William :3

@r_alisher 2 года назад

Thank you so much🔥🔥🔥

@inaki2414 Год назад

Hey Willian, awesome tutorials and library. Would be possible to use the LinearGradient component to change the color of a line based on a y-threshold?. For example when the line is above the median value, it would become green and when the line is below the median value, it will become red...

@yahacomua Год назад

Hey William. Could you please suggest some way to implement realtime chart that will move from right to left? Is it possible with Skia? I got the new chunk of data periodically (1-2 sec) and need to animate chart move while this period goes. For user it should be like endless chart...

@swampdonkeys96 Год назад

Has anybody figured out a way to make this graph pan-able and pinch scaleable? I've got a slightly rubbish way of doing it by using d3-zoom to recalculate the axis but the animation isn't smooth and I can pan right infinitely and pan left into minus values

@PlayerHeader 2 года назад

i love you thank you very much!!!!!!

@alecmather Год назад

Do you have any videos out that demonstrate Text transitions? When swiping across the graph, it changes the total number correctly, but I'd love to see some sort of smooth transition between the previous value and the new value. A simple animation would be a simple, old value opacity fades out and new value opacity fades in. But an even cooler animation would be something like, the text transforming to the new text the way the line graph transforms when you change the timeframe. That would be really awesome!

@muhammadmehdi1304 2 года назад

Can fluid animation be done with the react native skia

@Pixalynx 2 года назад

what vs code theme are you using ?

@mohamedfkr 2 года назад

Great tutorial Mr William. Can you make a video to show how to implement flatlist to load huge data without losing performance.

@somadsuwoto113 2 года назад

Just implement lazy load

@JokeBookGames 2 года назад

Same question

@kartikyadav4068 2 года назад

huse Pagination like if you have 100 items you only pass 10 items to flat list and after scrolling of 10 items pass another 10 items

@mohamedfkr 2 года назад

@@kartikyadav4068 Thank's for your answer. In my case i have a flatlist with infinite scroll more than 1000 items and in each item i have a horizontal scrollable list with 3 items that show the next elements related to the first.

@Gustavo-bi4hv 2 года назад

There will be updates on your curse using Skia?

@devcaand 2 года назад

Hey William, it’s all nice thanks for vid. But can you explain SKIA from 0 to 100. You always start your videos as everybody is aware of how it works. Please do tutorial from installing SKIA into building this graph. Or for instance I need to build multiple lines on the graph, each has different colour representing a value of the item and also graph should be horizontally scrollable if you have 20-50 data points that you are not able to fit in one screen.

@jefriaritambunan2796 2 года назад

Yes I agreed it seemed like william's video not for the beginners, He should do every details including how to install Skia itself..

@miles45ful Год назад

yeah dude he starts the video with half of everything already written.

@calapp Год назад

Documentation exists for some reason, not to talk about our good friend Google...

@stilljunior1764 Год назад

@@calapp, of course it exists, dude, but it'll be better to watch it with some explainations

@wallabeebeetles2519 10 месяцев назад

how to solve the end.interpolate(start, transition.value) tried to synchrously call function {interpolate} from a different thread?

@alexsirenko9580 2 года назад

Hi William When we can expect examples with new architecture and fabric? Shall it improve the amination performace?

@reflex2627 2 года назад

agree

@nazarm6215 Год назад

Are curves supported in path?

@cristiantomescu5805 2 года назад

Hi William, Can we use react-native-skia in production?

@wcandillon 2 года назад

It's still in alpha but it looks like some people are already using it in production. We're making good progress on the stability.

@georgispeaking 2 года назад

Can we use react-native-skia with expo dev client?

@cody9430 2 года назад

Yes you can, I have that working

@Ifywritecodes 2 года назад

Do you have a react native course

@MinhTechie 2 года назад

Hi William. Can you share how to make the intro of this video? Thank you

@wcandillon 2 года назад

I use remotion: remotion.dev/

@MinhTechie 2 года назад

@@wcandillon wow this is mind-blowing. Thanks for sharing

@io_inc Год назад

I find it hard to learn react native skia, the documentation is the same as couchdb and wanted to know what or can i find proper docs to under this library.

@drplxrd Месяц назад

Same here, I'm guessing you have to pay for his courses. The doc are not that much great for a beginner. Or basically for onboarding new users

@omega.developer Год назад

I used the d3 for scaling, but the cursor is going wrong position for first and last points. Please help me to fix this

@sebastianmontes7319 Год назад

Can resolve that ? i need to lear how to du that, sorry my english dont good

@SAHIBSINGH-fk6hx 2 года назад

Hello Sir can u do something for Live Chart that will be really great . Thanks in Advance .

@user-vu7ew6qm4c 2 года назад

wow

@dissolvesoftware 2 года назад

Wow....

@lavisharma3210 2 года назад

Which vs code theme is this ??

@wobsoriano 2 года назад

pmndrs

@wcandillon 2 года назад

marketplace.visualstudio.com/items?itemName=pmndrs.pmndrs

@VinaySingh-ls4bv Год назад

259mb unpacked size on npmjs?

@wcandillon Год назад

this because we ship a lot of binaries part of the package, you can read more about the package size at shopify.github.io/react-native-skia/docs/getting-started/bundle-size

@alexanderrojas3213 2 года назад

does it works on RN Expo?

@reflex2627 2 года назад

Same question William

@Will4_U 2 года назад

You need EAS or Expo Bare Workflow in order to use it.

@toun2 2 года назад

Pour moi le problème principal c’est l’interpolation entre deux path quand ils ne font pas la même longueur.

@wcandillon 2 года назад

did you try www.npmjs.com/package/polymorph-js?

@talalmohammad1177 2 года назад

@@wcandillon Can you explain how to use it in your example ? I am facing the same problem, can not figure out how to make it work :/. Thanks again for the great work, very useful !