For those who having issue with old Android phones, there are 2 issues #1 overlay1 being rendered from 50 / 60 px pushed down.... to fix it in ColorSchemeContext file, where William getting the dimensions, change the screen to window #2 on Android you are losing scroll functionality once you wrap your app with the provider. The problem is the Canvas in ColorSchemeContext file. pointerEvents not working somehow on Android. to fix it wrap Canvas with a View like this
@@veedjohnson it’s like picking apple or orange. Each of them are suitable for different situations. But in general, reanimated is much easer to begin with. And also more practical for basic usages.
awesome! i think best thing about using one screenshot is that it's more performant and if there are any ongoing animation in the destination transition, it will continue to play.
great question :)) Circle + shader is slightly better because if we use a clip path, we would have to create a new JSI Path on every frame but we will have a clean solution for this very soon.
@@wcandillon William thanks for the response! It seems that React Native is only updated about twice a year but more importantly, there is VERY little talk of React Native which had me wondering if Facebook is going to give up soon. I'm sure you have a bit of inside information that most don't.
Many thanks for this video; it met all my expectations. I hope you are in good health to continue creating useful videos like this. One more question: Can we add animation when changing the statusBarStyle? Because I've noticed it doesn't seem very smooth. From a developer in Vietnam with love ❤❤❤
Can you somehow easily modify this example to behave like telegram when switching back from light to dark mode? On android it basically shrinks instead of expanding the mask to the click point?
it is the native behavior of the component. they are not the same and i'm not entirely sure if there's an option for it without having to use custom reanimated animation or something..
@@wcandillon Exactly. I checked and the crash happened when the snapshot was taken, I tried to use react-native-view-shot to take a snapshot, but it was unsuccessful
The example works on Android with the latest version of RN Skia (the performance is actually very pleasing). will update the project to use expo dev client probably
this is likely because you are missing the android collapse view attribute to false. File an issue with a small reproducible example if needed. Maybe we should throw a warning if we see that this header is not set.
@@wcandillon I added "collapsable={false}" and the error stopped. Strange, if I don't pass anything, this property says that "undefined" will be set, but "undefined" is interpreted as false by JavaScript anyway. Is this property set to true by default?
![NLE Choppa - Or What ft. 41 (Orchestra Mix) [Official Music Video]](http://i.ytimg.com/vi/biOFASEgSOM/mqdefault.jpg)
This dude is real magician, we’re luck to learn these cool things for free, what a wonderful time to be alive and coding 😊😊
then pay for it
@@apidas , already paid ; which got me watching this.
Where I live , we buy internet subscriptions buddy. :)
For those who having issue with old Android phones, there are 2 issues
#1 overlay1 being rendered from 50 / 60 px pushed down.... to fix it in ColorSchemeContext file, where William getting the dimensions, change the screen to window
#2 on Android you are losing scroll functionality once you wrap your app with the provider. The problem is the Canvas in ColorSchemeContext file. pointerEvents not working somehow on Android. to fix it wrap Canvas with a View like this
the magician is back
Thanks for the video. I wish we could change the font size of the ide while watching the video.
When I grow up I want to be like you, you're amazing bro
Unlike the other complicated Skia videos, I fully understood the code in this video😅
Seriously 😂
Is Skia that good?
I’m stuck between learning reanimated or skia for a start
@@veedjohnson it’s like picking apple or orange. Each of them are suitable for different situations. But in general, reanimated is much easer to begin with. And also more practical for basic usages.
bro, do u have an example of rn skia hand drawing app?
do you need 2 snapshot? why can't you get just take 1 snapshot and animate the masking to the current dark view?
in this particular transition that would work, to do the 2 snapshot would help if you have more complex transitions between the two snapshots.
just tried it and I can confirm that it works, good catch!
awesome! i think best thing about using one screenshot is that it's more performant and if there are any ongoing animation in the destination transition, it will continue to play.
Hey ! What's the intro music ? Event Shazam doesn't know 🤷♂
it's custom made :)
@@wcandillon I love the ratatat vibe to it, nice job !
Thank you very much for his tutorial!!! One question: doesnt a tap gesture make more sense than a pan here?
Это просто праздник!!!
Great to see here not only about Skia
I've been asking myself how to recreate this for ages, love you dude
Great video, thanks! 👍
What plugin do you use for autocomplete code?
github copilot
I run on react native cli.
Just switch themes. animation circle not working :(
Use ImageShader inside a Circle component instead a Mask is better for performance or is the same?
great question :))
Circle + shader is slightly better because if we use a clip path, we would have to create a new JSI Path on every frame but we will have a clean solution for this very soon.
@@wcandillon You do GREAT work, so I'm wondering what your honest unbiased opinion is on the future is for React Native?
@@daa5249 I genuinely that its best days are still very much ahead. Also betting on TypeScript is the way to go I think.
@@wcandillon William thanks for the response! It seems that React Native is only updated about twice a year but more importantly, there is VERY little talk of React Native which had me wondering if Facebook is going to give up soon. I'm sure you have a bit of inside information that most don't.
FInally!!! I've been waiting for this. Thank you William! You're the GOAT
Many thanks for this video; it met all my expectations. I hope you are in good health to continue creating useful videos like this.
One more question: Can we add animation when changing the statusBarStyle? Because I've noticed it doesn't seem very smooth.
From a developer in Vietnam with love ❤❤❤
Amazing video! Thank you William 🙏🏽🙏🏽🙏🏽
Hey :) are the videos on your courses up to date? Alot of packages changed so i was just wondering if it still is up to date
Can you somehow easily modify this example to behave like telegram when switching back from light to dark mode? On android it basically shrinks instead of expanding the mask to the click point?
it is the native behavior of the component. they are not the same and i'm not entirely sure if there's an option for it without having to use custom reanimated animation or something..
Thank You for the explanation! 🥰
Thank You for the explanation
Great video! what font do you use in vscode?
I think firacode
Yep. Thanks for video, it so magic
Eagerly waiting 😊😊😊
Awesome.. Found someone else excited..
Can we connect?
Good video, Thanks William
gege banget om ded
awesome!
Has anyone get it on Android? I get it perfectly on iOS, but on Android the app crashes as soon as I touch the button
there is a crash on Android when taking the snapshot, looking to fix it asap 🙏
@@wcandillon Exactly. I checked and the crash happened when the snapshot was taken, I tried to use react-native-view-shot to take a snapshot, but it was unsuccessful
The example works on Android with the latest version of RN Skia (the performance is actually very pleasing). will update the project to use expo dev client probably
It's fixed on android, forgot to add collapsible={true} to the root view.
when a run snapshot my app crash :(
this is likely because you are missing the android collapse view attribute to false. File an issue with a small reproducible example if needed. Maybe we should throw a warning if we see that this header is not set.
@@wcandillon
I added "collapsable={false}" and the error stopped. Strange, if I don't pass anything, this property says that "undefined" will be set, but "undefined" is interpreted as false by JavaScript anyway. Is this property set to true by default?
Can it be done in React?
I really like new profession of Jonny sins
Please start to do flutter animation videos too 🙏🙏🙏
flutter must die