- 268
- 5 763 012
William Candillon
Switzerland
Registrace 17. 06. 2007
React Native Tutorials
Binging with William: Chocolate Cake from Matrix
Previous tutorial inspired from the Matrix: czcams.com/video/49QR0wUDMG0/video.html
Source code: github.com/Shopify/react-native-skia/pull/2325
Music by Broke for Free (brokeforfree.bandcamp.com/)
“XXV”
“Juparo”
Source code: github.com/Shopify/react-native-skia/pull/2325
Music by Broke for Free (brokeforfree.bandcamp.com/)
“XXV”
“Juparo”
zhlédnutí: 2 804
Video
Heart Beat Animation
zhlédnutí 4,4KPřed 3 měsíci
Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/bonuses/skia-examples/src/Heartrate Boilerplate: bit.ly/heartrate-boilerplate Learn React Native Gestures and Animations at start-react-native.dev/ Chapters: 0:00 Intro 2:04 Solution 1 10:52 Solution 2
JavaScript Animations in 2024
zhlédnutí 10KPřed 4 měsíci
The concept was originally introduced by Motion Canvas: motioncanvas.io/ czcams.com/video/WTUafAwrunE/video.html Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/bonuses/skia-examples/src/Generators Learn React Native Gestures and Animations at start-react-native.dev/ Chapters: 0:00 Intro 1:00 Example 1 8:27 Example 2 17:23 Example 3
3D transformations with React Native Skia
zhlédnutí 7KPřed 4 měsíci
Source code: github.com/Shopify/react-native-skia/pull/2163 Learn React Native Gestures and Animations at start-react-native.dev/ Chapters: 0:00 Intro 2:07 Step 1 9:20 Step 2 12:56 Step 3
Rewind 2023 - Drops of Code
zhlédnutí 2,7KPřed 5 měsíci
Let me know who you would like to see in 2024. In order of appearance: @Honeypotio @TheCodingTrain @KylieYYing @SoftwareJournal @robmulla @WIRED @romanqc @thedotisblack @TheCoderCoder @LowLevelLearning @Hyperplexed @AndrejKarpathy @CodeWithHarry @kishimisu @jomakaze @SebastianLague @freecodecamp @Fireship @CodeBullet @devaslife @AdrianTwarog @amigoscode @programmersarealsohuman5909 @onesandzero...
Back to the Web
zhlédnutí 12KPřed 7 měsíci
It's a React Native developer's first love... Technical preview of canvaskit-js is available for all start-react-native.dev/ members
Circular Progress in React Native
zhlédnutí 9KPřed 8 měsíci
Apple Activity Rings implemented in React Native Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/bonuses/skia-examples/src/Rings Boilerplate: bit.ly/apple-rings-boilerplate Learn React Native Gestures and Animations at start-react-native.dev/ Chapters: 0:00 Intro 3:12 Background circle 7:02 Circular path 16:55 Sweep Gradient 25:00 Progress head (method 1) 29:42 Pro...
Telegram Dark Mode - “Can it be done in React Native?”
zhlédnutí 21KPřed 8 měsíci
Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/season5/src/Telegram Boilerplate: bit.ly/telegram-boilerplate Learn React Native Gestures and Animations at start-react-native.dev/ Chapters: 0:00 Intro 2:43 Setup the gesture 6:24 Take the first snapshot 10:46 Take the second snapshot 12:39 Transition between snapshots 18:16 Concurrent touches 20:44 Styling the statu...
Experimental Blur Gradient in React Native
zhlédnutí 10KPřed 8 měsíci
Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/bonuses/skia-examples/src/BlurGradient Boilerplate: firebasestorage.googleapis.com/v0/b/start-react-native.appspot.com/o/boilerplates/iphone-wallpaper-boilerplate.zip?alt=media&token=3c3e1a01-2769-49a1-81b7-1fa9eccc55a5 Learn React Native Gestures and Animations at start-react-native.dev/
iPhone wallpapers, but in React Native Skia
zhlédnutí 7KPřed 9 měsíci
Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/bonuses/skia-examples/src/Wallpaper Boilerplate: firebasestorage.googleapis.com/v0/b/start-react-native.appspot.com/o/boilerplates/iphone-wallpaper-boilerplate.zip?alt=media&token=3c3e1a01-2769-49a1-81b7-1fa9eccc55a5 Learn React Native Gestures and Animations at start-react-native.dev/ Chapters: 0:00 Intro 2:14 Wallpa...
Instagram Stickers - “Can it be done in React Native?”
zhlédnutí 11KPřed 9 měsíci
Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/season5/src/Instagram Boilerplate: bit.ly/instagram-sticker-boilerplate Learn React Native Gestures and Animations at start-react-native.dev/ Example of Sticker with Skia: github.com/Shopify/react-native-skia/blob/main/example/src/Examples/Stickers/LocationSticker.tsx Matrix Swap PR in Skia: github.com/Shopify/react-n...
React Native Transitions with Skia
zhlédnutí 18KPřed rokem
@mkbhd announcement: czcams.com/video/1eI8HpJtq-s/video.html Transitions: gl-transitions.com/ This code shown in the video relies on an unreleased version of React Native Skia, we will update the link once it's merged: github.com/Shopify/react-native-skia/pull/1542 boilerplate: github.com/Shopify/react-native-skia/tree/transitions-starter/example/src/Examples/Transitions start-react-native.dev/...
My animations are faster than Ben Awad's (and so should yours)
zhlédnutí 35KPřed rokem
shopify.github.io/react-native-skia/ start-react-native.dev/ chapters: 0:00 Intro 1:18 Level 0 3:18 Level 1 5:00 Level 2 5:49 Final Boss
Song of Bloom - “Can it be done in React Native?”
zhlédnutí 10KPřed rokem
Source code: github.com/wcandillon/can-it-be-done-in-react-native/tree/master/season5/src/SongOfBloom Boilerplate: bit.ly/songofbloom-boilerplate Learn React Native Gestures and Animations at start-react-native.dev/ Chapters: 0:00 Intro 3:22 Mondrian Scratch 11:01 Shredded Art 29:52 Outro 32:16 Teaser
Riveo Page Curl - “Can it be done in React Native?”
zhlédnutí 18KPřed rokem
Riveo Page Curl - “Can it be done in React Native?”
Gradient along Path with React Native Skia
zhlédnutí 11KPřed rokem
Gradient along Path with React Native Skia
Headspace Player - “Can it be done in React Native?”
zhlédnutí 20KPřed rokem
Headspace Player - “Can it be done in React Native?”
“Can it be done in React Native?” - Season 5 Trailer
zhlédnutí 10KPřed rokem
“Can it be done in React Native?” - Season 5 Trailer
The React Native Avengers: GestureHandler, Reanimated, and Skia
zhlédnutí 19KPřed rokem
The React Native Avengers: GestureHandler, Reanimated, and Skia
hello sir. just come from free code camp video in that video you are using the react-native redash with reanimated v1 and using usePanGestureHandler from redash. can you please make the video to use of redash with v3 reanimated.(heart):)
cool..!
Thanks for sharing 😀👍
For anyone who wants this to animate clockwise: const d = `M ${x2} ${y2} A ${r} ${r} 0 1 1 ${x1} ${y1}`;
Man you are a blessing In my life and I really mean it .. this is what I wanted to learn and here it is wowwwwww, God bless you !❤️
Does anyone know what app it is in Margelo demo where the messages can be dragged & dropped in chat? 🤯
First of all, a massive thank you for all your work. I'm subscribed to your course and since then, I've been able to understand gestures and animations more and more. I've been trying to implement this same logic, adapting the code to the new APIs from Reanimated and RNGH, so using SharedValue and the Gesture APIs, but I haven't been successful. I would be very grateful if you implemented this again with the new APIs since I'm not sure what I'm missing to get it working properly.
Thank you for the kind words, here is an updated tutorial with gesture handler v2: czcams.com/video/5yM4NPcTwY4/video.html hope this helps
Can't wait for the actual babish crossover
What is the color scheme you use? Also loved how the rgb codes are color highlighted. It's an extension?
How would it look today using reanimated 3?
Hey brother what are you using for connect IOS device wireless it is Vicer or scrcpy ? can you tell us ?
browsers interally also use skia as drawing engine! I hope they expose that API so no need to canvaskit
I think this debate was pretty much solved when they decided you need to login to their platform to use expo. I'm not going to use this garbage.
Hello, can you make a video about converting base 64 audio data into sound output in react-native? Thank you!
"how easily" ---- aahhhh yes, very easy mr senior engineer man xP
Wow I need it! Love 3D object, GLSL and it rotateable!
Not only great coder but also a baker 😭😭❤️🔥
Wow, that’s something new, very creative, like it 🙌❤️
note: useAnimation not in redash, check the linked repo. 🔥content ty William!
Yum 🎂 Next cake do the scary numbers
This video inspired me to make a pizza with Skia
this is a great idea 💡
great recipe!
William makes the best content for sure.
.. it is vegan and gluten-free ;-)
I want to code AND eat at the same time now 😭
Skia is faster than python 😅
Sorry, I barely understood anything because of the accent.
Skill issue.
Yo! Great stuff guys, and great pres Will! Keep it up 💪
Inspiring, but also very humbling video. William knows this stuff so much better than all of us... :D
Please how do you make the intros to your videos! They are really amazing!
this particular intro is explained here: czcams.com/video/eUbj_NxcgKg/video.htmlsi=fL25yObpT4EXF28C&t=717
Thank you for sharing! Thank you for all you do! I will bring this into my video editing style. Can you share more about how you use it in your video editing workflow.@@wcandillon
I am also going to buy your course on Remotion. If you can make a Skia full course. I will be on the waitlist for this. Amazing work. I am also a Tech CZcamsr, so I know the work you put in. Amazing!
Please how do you make the intros to your videos! They are really amazing!
Cool job
man … .. all that was missing was tim cook … .. next time, try to have some unique ideas… dunno, maybe starting with just choosing your own words…. 🤦♂️🤦♂️🤦♂️🤦♂️🤦♂️🤦♂️🤦♂️🤦♂️🤦♂️🤦♂️
This indian guy does not look real 3:22
Cool! Is there new code when using the new libraries? the 'transform2d' no longer exsist from react-native-redash
that's literally the topic of next week's video ☺️
Oh no, more doom scrolling. Worst UI decision of our era.
Hi William, big fan of your work! If you're taking requests for new content ideas, I'd love to see your breakdown of the new spotify search pills or filtering in the library tab, it's a really cool animation and I'd love to see how you would do it. Also have you worked at all with the slight haptic feedback that is very popular with new apps, what are your thoughts on that? The Chatgpt app is a good example of this.
THANK YOU SO MUCH FOR THIS
How can we get the currentIndex of the image so we can store the transition to next or previous image. Currently the transition is happening for more then 1 index of image. Can anyone help me with having transition to next or previous offset only.
Are you headed to an online course about Skia? I mean something like "Skia - Zero to hero"
skia >> react native
Does anyone know what typeface was used throughout this presentation in the code samples? 7:10
We need tutorial videos. Something like a paint/figma/design mobile app
GREAT!
any alternatif for usevalues? because i not using react native reanimated v1
This very cool! Thanks
I have bought you react native animation course, I have found out that is not up to date. Are you planning to update the course?
So are we ready to remake wonderous in react native!
15:34 what profiler is this?
🎉🎉 good