![William Candillon](/img/default-banner.jpg)
- 268
- 5 783 166
William Candillon
Switzerland
Приєднався 17 чер 2007
React Native Tutorials
Binging with William: Chocolate Cake from Matrix
Previous tutorial inspired from the Matrix: ua-cam.com/video/49QR0wUDMG0/v-deo.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”
Переглядів: 3 024
Відео
Heart Beat Animation
Переглядів 4,6 тис.4 місяці тому
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
Переглядів 11 тис.4 місяці тому
The concept was originally introduced by Motion Canvas: motioncanvas.io/ ua-cam.com/video/WTUafAwrunE/v-deo.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
Переглядів 7 тис.5 місяців тому
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
Переглядів 2,7 тис.5 місяців тому
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
Переглядів 12 тис.8 місяців тому
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
Переглядів 9 тис.9 місяців тому
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?”
Переглядів 21 тис.9 місяців тому
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
Переглядів 10 тис.9 місяців тому
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
Переглядів 7 тис.9 місяців тому
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?”
Переглядів 11 тис.10 місяців тому
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
Переглядів 18 тис.Рік тому
@mkbhd announcement: ua-cam.com/video/1eI8HpJtq-s/v-deo.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)
Переглядів 35 тис.Рік тому
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?”
Переглядів 10 тис.Рік тому
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
The Joy of Painting with React Native
Переглядів 12 тис.Рік тому
The Joy of Painting with React Native
Riveo Page Curl - “Can it be done in React Native?”
Переглядів 18 тис.Рік тому
Riveo Page Curl - “Can it be done in React Native?”
Gradient along Path with React Native Skia
Переглядів 11 тис.Рік тому
Gradient along Path with React Native Skia
Headspace Player - “Can it be done in React Native?”
Переглядів 21 тис.Рік тому
Headspace Player - “Can it be done in React Native?”
“Can it be done in React Native?” - Season 5 Trailer
Переглядів 10 тис.Рік тому
“Can it be done in React Native?” - Season 5 Trailer
The React Native Avengers: GestureHandler, Reanimated, and Skia
Переглядів 19 тис.Рік тому
The React Native Avengers: GestureHandler, Reanimated, and Skia
Has anyone managed to make the Gestures work. I can only move our my Stickers but can't rotate or resize :/
How to animation for it like this video? Thanks you! ua-cam.com/video/t0FD4x0tX4E/v-deo.html
Hi William, is there a way to play an mp4 video (10 sec) in loop as a background? I was able to accomplish it using expo-av but it flickers when it reaches the end of every loop. Any ideas or a better approach with Skia?
here it is shopify.github.io/react-native-skia/docs/video/
@@wcandillon Hi, the useVideo export member is not available on Skia v1.2.3, somehow that is what I have in my project. Is there a trick for force an upgrade? Thanks
Awesome content! Just subscribed to your channel! Merci!
Hi William, With react-native-lottie library once memory allocated to running Lottie is not removed after its finished. Can this Skottie can remove allocated and is it high execution in IOS ?
it's possible that some JSI objects would needed to be garbage collected more explicitly. did you try to call gc() from JS? best way is to file a github issue
It's a good project, but I can't update the last expo sdk 51 properly.
If you are interested on working with skia in a work context, reach out to me
I want, could you say more?
Love the paragraph api! Looking forward to play around with the new features!
great
great
Thank You for the explanation
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: ua-cam.com/video/5yM4NPcTwY4/v-deo.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: ua-cam.com/video/eUbj_NxcgKg/v-deo.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 UA-camr, 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.