Charts with React Native Skia

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

[@tridibeshnag782]

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

[@rikeudi]

Always awesome contents and tutorials. Great video

[@pplytas]

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]

Awesome ! Thanks Mr. William :3

[@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...

[@devcaand]

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]

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.

[@zavirydantes]

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

[@stilljunior1764]

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

[@mohamedfkr]

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

[@timotiussimanjuntak9148]

Just implement lazy load

[@JokeBookGames]

Same question

[@kartikyadav4068]

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]

@@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.

[@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!

[@r_alisher]

Thank you so much🔥🔥🔥

[@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]

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

[@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...

[@alexsirenko9580]

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

[@reflex2627]

agree

[@muhammadmehdi1304]

Can fluid animation be done with the react native skia

[@Gustavo-bi4hv]

There will be updates on your curse using Skia?

[@wallabeebeetles2519]

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

[@Pixalynx]

what vs code theme are you using ?

[@nazarm6215]

Are curves supported in path?

[@cristiantomescu5805]

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

[@wcandillon]

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.

[@MinhTechie]

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

[@wcandillon]

I use remotion: remotion.dev/

[@MinhTechie]

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

[@georgispeaking]

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

[@cody9430]

Yes you can, I have that working

[@SAHIBSINGH-fk6hx]

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

[@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

[@Ifywritecodes]

Do you have a react native course

[@user-vu7ew6qm4c]

wow

[@toun2]

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

[@wcandillon]

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

[@talalmohammad1177]

​@@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 !

[@dissolvesoftware]

Wow....

[@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

[@nxte8506]

Is it just me or is react native state management looking a lot different to react? No useState? Can anyone explain?

[@enterteg]

React-native state management does not differ from React - it's just because William is using separate library to handle the state in other way :)

[@nxte8506]

@@enterteg ah thank you

[@alexanderrojas3213]

does it works on RN Expo?

[@reflex2627]

Same question William

[@Will4_U]

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

[@lavisharma3210]

Which vs code theme is this ??

[@wobsoriano]

pmndrs

[@wcandillon]

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