- 44
- 861 589
Reactiive
Italy
เข้าร่วมเมื่อ 8 พ.ค. 2021
Hi, I'm Enzo. On this channel I'll try to bring you as much content about React Native as often as possible.
Don't worry all the videos will be accompanied by my cute Italian accent!
For any doubt or advice contact me!
Don't worry all the videos will be accompanied by my cute Italian accent!
For any doubt or advice contact me!
React Native Demos - 2024 Rewind
I recently migrated from Patreon to Demos, a platform where I publish React Native animations every week.
This video showcases a recap of all the main animations from this year 🎉
👉 reactiive.io/demos
This video showcases a recap of all the main animations from this year 🎉
👉 reactiive.io/demos
มุมมอง: 1 478
วีดีโอ
Animated Blur Cards with React Native (Skia)
มุมมอง 3.4K3 หลายเดือนก่อน
Building custom lists is always fun. In this tutorial, we'll discover how to achieve a Story List UI animation by using just React Native Reanimated. My React Native course: reanimate.dev Shared 100 Animations on Demos: reactiive.io/demos Twitter: reactiive_ Recommended tutorials before this one: - Custom Animated Loader with Skia: th-cam.com/video/7pCiGUrJuow/w-d-xo.html - Explorin...
Animated Loader with React Native (Skia)
มุมมอง 3.5K3 หลายเดือนก่อน
Creating animated custom loaders seems like a simple task. However, this little tiny component can be really tricky if you don't know which tools to use. In this tutorial, we'll solve this problem using both Reanimated and React Native Skia. As always, we'll start with an empty Expo project :) Written Tutorial: reactiive.io/articles/animated-loader-skia My React Native animations course: reanim...
Animated Bar Chart with React Native (Reanimated)
มุมมอง 3.4K4 หลายเดือนก่อน
Have you ever felt the need to keep track of the pages you view on an Onboarding? Here it comes in handy to know how to make a custom pager from scratch. In this tutorial, we'll do exactly that by using Reanimated. My React Native course: reanimate.dev Shared 100 Animations on Demos: reactiive.io/demos Twitter: reactiive_ Animate with Reanimated Playlist: th-cam.com/video/yz9E10Dq8B...
Pager Dots Animation with React Native (Reanimated)
มุมมอง 3.7K4 หลายเดือนก่อน
Have you ever felt the need to keep track of the pages you view on an Onboarding? Here it comes in handy to know how to make a custom pager from scratch. In this tutorial, we'll do exactly that by using Reanimated. My React Native course: www.reanimate.dev Shared 100 Animations on Demos: reactiive.io/demos Twitter: reactiive_ Animate with Reanimated Playlist: th-cam.com/video/yz9E10...
Building a Story List UI with Reanimated (React Native)
มุมมอง 7K5 หลายเดือนก่อน
Building custom lists is always fun. In this tutorial, we'll discover how to achieve a Story List UI animation by using just React Native Reanimated. My React Native course: www.reanimate.dev Shared 100 Animations on Demos: reactiive.io/demos Twitter: reactiive_ Recommended tutorials before this one: - Exploring Interpolate: th-cam.com/video/8_hvNoZJsc8/w-d-xo.html - Advanced Onboar...
The secret behind Jotai and MMKV (React Native)
มุมมอง 4.4K5 หลายเดือนก่อน
In this tutorial, we'll learn how to solve two very common problems when creating React Native apps: 1. State Management - Jotai 2. Data Persistence - React Native MMKV In detail, we're going to combine these two packages together and use the atomWithMMKV. Checkbox Interactions Tutorial: th-cam.com/video/NPq_MFLnQrQ/w-d-xo.html My React Native animations course: reanimate.dev Shared 100 Animati...
Checkbox Interactions - The beauty of Layout Transitions (React Native Reanimated)
มุมมอง 4.1K5 หลายเดือนก่อน
This tutorial unveils the simplicity and ease of using the Layout Transitions from Reanimated. In detail, as always, we're going to recreate this Checkbox Interactions demo from scratch starting with a lovely blank expo project. Do you like React Native animations? My React Native animations course: reanimate.dev Shared 100 Animations on Demos: reactiive.io/demos Twitter: reactiive_...
Animated Stacked Cards - Exploring the interpolate function (React Native Reanimated)
มุมมอง 6K6 หลายเดือนก่อน
In this tutorial, we're going to create from scratch a very simple yet powerful animation about Animated Stacked Cards. It will also be a perfect opportunity to dive deep into using the interpolate function from Reanimated. Do you like React Native animations? My React Native animations course: reanimate.dev Shared 100 Animations on Demos: reactiive.io/demos Twitter: reactiive_ Sour...
Animated Split Button in React Native (Reanimated)
มุมมอง 6K6 หลายเดือนก่อน
This tutorial is about recreating a beautiful Split Button animation with Reanimated. Although the animation seems simple enough, it actually hides so many pitfalls. In this video, we are going to disassemble the animation piece by piece and gradually rebuild it from scratch. Do you like React Native animations? My React Native animations course: reanimate.dev Shared 100 Animations on Demos: re...
Announcing my React Native animations course: Reanimate.dev
มุมมอง 2.3K7 หลายเดือนก่อน
Yes, I know. It took me a while but I finally managed to prepare my animation course in React Native. You can access the course here: reanimate.dev/ Twitter announcement: reactiive_/status/1795080337522888858
Shake Animation in React Native (Reanimated)
มุมมอง 7K10 หลายเดือนก่อน
This tutorial is about a Shake animation made with Reanimated. Building it will be extremely helpful also from a didactic perspective because we're going to discover one by one, the most interesting high-order functions from Reanimated, such as: withTiming, withSequence, withRepeat, and withSpring. Do you like React Native animations? My React Native animations course: reanimate.dev Shared 100 ...
Improving Tap Gestures in React Native
มุมมอง 4.6K11 หลายเดือนก่อน
Today we're going to unleash the power of Tap Gestures in React Native with Gesture Handler 👌 Don't forget to leave a ⭐ Source code: github.com/enzomanuelmangano/what-about-gestures/tree/main/04-improve-tap-gestures My React Native animations course: reanimate.dev Shared 100 Animations on Demos: reactiive.io/demos Twitter: reactiive_ Chapters: 00:00 Introduction 01:57 Setup the Touc...
Custom Segmented Control in React Native (Reanimated)
มุมมอง 10Kปีที่แล้ว
What's going on mobile devs? Today we're going to create together this awesome custom Segmented Control, deeply inspired by Steddy. My React Native animations course: reanimate.dev Shared 100 Animations on Demos: reactiive.io/demos Twitter: reactiive_ Checkout Steddy here: www.steddy.health/ Follow Raffi on Twitter: raffichill If you like this tutorial, don't forget to s...
Skeleton Animation in React Native with Moti
มุมมอง 17Kปีที่แล้ว
Today, we're going to explore the potential of Moti by using the Skeleton component. The purpose of this tutorial is to cover the implementation of the Skeleton UX Pattern in React Native. You're going to learn how to create your own skeletons and how to reuse them across your apps! My React Native animations course: reanimate.dev Shared 100 Animations on Demos: reactiive.io/demos Twitter: twit...
Animated Gradient in React Native (Skia)
มุมมอง 10Kปีที่แล้ว
Animated Gradient in React Native (Skia)
Circular Carousel Animation in React Native (Reanimated)
มุมมอง 13Kปีที่แล้ว
Circular Carousel Animation in React Native (Reanimated)
Dropdown Menu Animation in React Native (Reanimated 3)
มุมมอง 13Kปีที่แล้ว
Dropdown Menu Animation in React Native (Reanimated 3)
Metaball Animation in React Native (Skia)
มุมมอง 8Kปีที่แล้ว
Metaball Animation in React Native (Skia)
Creating a BottomSheet Backdrop in React Native
มุมมอง 14Kปีที่แล้ว
Creating a BottomSheet Backdrop in React Native
Animated FlatList in React Native (Reanimated)
มุมมอง 34K2 ปีที่แล้ว
Animated FlatList in React Native (Reanimated)
Grid Magnification in React Native (Skia)
มุมมอง 10K2 ปีที่แล้ว
Grid Magnification in React Native (Skia)
Animated 3D Card in React Native (Reanimated and Skia)
มุมมอง 20K2 ปีที่แล้ว
Animated 3D Card in React Native (Reanimated and Skia)
Building a BottomSheet from scratch in React Native
มุมมอง 97K2 ปีที่แล้ว
Building a BottomSheet from scratch in React Native
The Secret Ingredient: Haptic Feedback (React Native)
มุมมอง 8K2 ปีที่แล้ว
The Secret Ingredient: Haptic Feedback (React Native)
The magic of Layout Animations in Reanimated (React Native)
มุมมอง 32K2 ปีที่แล้ว
The magic of Layout Animations in Reanimated (React Native)
Introduction to Gesture Handler 2 (React Native)
มุมมอง 19K2 ปีที่แล้ว
Introduction to Gesture Handler 2 (React Native)
Clock Loader Animation in React Native (Reanimated 2)
มุมมอง 10K3 ปีที่แล้ว
Clock Loader Animation in React Native (Reanimated 2)
Sliding Counter Animation in React Native (Reanimated 2)
มุมมอง 13K3 ปีที่แล้ว
Sliding Counter Animation in React Native (Reanimated 2)
Perspective Menu Animation in React Native with Reanimated 2
มุมมอง 13K3 ปีที่แล้ว
Perspective Menu Animation in React Native with Reanimated 2
Very helpful.Thank you💯
Bro, trust me, your content is extremely premium. Good blessing you.
Great tutorial. Thank you very much
Great video! Would love that if user does sequential taps, all tap animations are independent.
tks bro, Awesome
Thanks for the tutorial, but I ran into an error when there's a lot of content and it needs scrolling. How can I handle the animation in this case?
Love you man ! You're helping us all grow
Thank you! I'm learning and growing a lot by sharing here too :)
Why haven't I seen your great video until now? Thanks bro
Wow 🎇 looking forward to see what's coming up next in 2025. Keep it up🐢💯
Cool ❤
Would you please make a video how to create a circular slider with reanimated 3?
Nothing really changes. You can use the same exact code :)
amazing.
Thanks to your videos I started working with ReactNative. Greetings from Mexico!
Really happy to hear that! Learning React Native is the best choice you could have made :)
this will make my app 10000x more beautiful, thanks
🎉 Glad to hear that, thanks a lot!
Amazing work this year @Reactiive! You always make the most inspirational stuff 🙂. I am excited to see what is next 🔥💪
Thanks Dan, I absolutely love your channel and your content as well. Really appreciate your words, it means a lot!
Hello there 👋 I’ve been sharing React Native animations almost every week this year on X/Twitter x.com/reactiive_ The source code for all the animations is available on Demos: reactiive.io/demos Thank you so much for your support 🙏
How we can start from top? not right.
This video was incredibly helpful! I'm finally starting to understand animations in React Native. Thank you for creating such a clear and concise tutorial
Thank you, I really appreciate the feedback :)
Nice tutorial, good introduction to gesture handler and reanimated!
Thanks man
Thanks for the awesome playlist. I was try to remake the tattoodo app image card slider but can’t manage the smooth scrolling and image item width. If possible create a video or give some of your valuable guide Screen record: drive.google.com/file/d/1CwfELcz0xIkAfV2GGGUgtYE_eBB-AZtA/view?usp=drivesdk
Another question: what if the shape of loader is rectangle, how to animate it?
great tutorial! BTW, i want to learn the animated text of skia, like animate to write " skia ", right on the official website, but i cannot find the tutorial video.
Awesome tutorial 🏩 Please, what color picker extension do use?
This is by far the most interesting, the most explanatory, the most creative and the most step-by-step tutorial for bottom sheet I've came across. Thanks!
At 11:50 you made a crucial mistake, this callback runs on JS Thread and you should be using the `useAnimatedScrollHandler` from React Native Reanimated to run it directly the UI Thread (aka native side) and change FlatList to be an Animated.FlatList and modify the shared value inside the callback and keep everything on the UI Thread. Most probably Android is screaming in performance regression now :)
Hi Catalin, thanks a lot for pointing that out! Unfortunately while recording I missed that completely. In the latest videos fortunately I always used an Animated List with useScrollViewOffset or useAnimatedScrollHandler. I'll definitely fix the issue in the GitHub repo 🙌
Hi please make tutorial for react native music app transition
Do you have drag and drop item to react native flatlist?
I guess, react-native-gesture-handler keep updating, the code is using deprecated one.
It would be wonderful if implemented dot press functionilty to scroll its own screen, but amazing tutorial, thanks for sharing your wisdom with us
I doubt anybody can name a better tutorial for this.Thanks G.
0:24, i mean, bold claim. i have been able to make such thing with no js directly just html + css. maybe i just didn't quite get how you meant it but directly, just with modern css, this is totally possible
@@Cuwubiqof course it's possible on the web. But achieving this behavior on a native Android app with React Native can be quite challenging 👀
@@Reactiive yeah, thought you mean it some sort of that way, thanks for the explanation, wonderful work with the whole thing btw! shows how rnskia is so much more competent and robust. Incredible video, thanks for it!
amazing content, thank you from israel ! i would love to learn more about skia! can we add a text and views inside the blur cards of react-native on top of canvas of skia?
Thanks! Unfortunately we can't use react native components in a Skia Canvas but there are a lot of solutions (such as using Skia Text)
Great Work bro! 🎉 Amazing animation! 😃
This is awesome 🎇
Your tutorials are very practical for real world animations. Subtle small designs brings comfortable engagement.
Thanks for the feedback ❤
Hello there 👋 I hope you'll enjoy this tutorial 🎥 If you want to dive deeper into Skia, Reanimated, and Gesture Handler, this is the last month to enroll in my course: reanimate.dev/ Registration closes on November 8th and will reopen in 2025 👀
How to create a animated custom Drawer withe animated Bottom Tabs having same 4-5 items to toggle between. (My suggestion for new Video), because I loved loved your animation videos specially in TS.
Works like a charm! that you have the source code available in github aswell is awsome. Thx!
Outdated, doesnt work with v3
@@chorazytorpeda16 I recently made a new video about Layout animations with v3 th-cam.com/video/NPq_MFLnQrQ/w-d-xo.htmlsi=fl1MNJvtAfKmCDgl Although you can still use this one and replace layout=Layout with layout=LinearTransition and it will work as well. Hopefully this is helpful
There isn't much skia tutorials pls go on with them. Thanx👌
I was using React Native CLI and I faced some challanges with the Linear gradient. This should resolve the issue when using React Native CLI instead of Expo. Install react-native-linear-gradient: npm install react-native-linear-gradient Replace all instances of: import { LinearGradient } from 'expo-linear-gradient' with: import { LinearGradient } from 'react-native-linear-gradient' Files where the change is needed: node_modules/moti/src/skeleton/expo.tsx node_modules/moti/src/skeleton/skeleton.tsx node_modules/moti/src/skeleton/types.ts node_modules/moti/build/skeleton/expo.js
I appreciate your comment but you shouldn't update the node_modules since they get overwritten on each yarn/npm/bun install. To use Moti skeletons with react-native-linear-gradient I strongly recommend to follow moti's docs: moti.fyi/skeleton#option-2-react-native-linear-gradient
holy crap THANK YOU SO MUCH for providing a written version of this tutorial. you have NO idea how incredibly helpful that is for those of us who are hard of hearing (and also, just, like, really really bad at youtube tutorials)!!!!
it's crazy, I am new at react native but this Skia and Reanimated are revolutionary for react native animations otherwise it would be so hard to implement them and pretty sure not quite performant, it takes a lot of practice I guess to be good with these tools, thanks for this great tutorial
Great video! Learning so much, every video!
Thanks a lot for the feedback!
Sir kindly bring drawing, panting, animation etc complete skia playlist like you've made RN Reanimated.
Thanks for the feedback! I will 👀
Great tutorial that combines skia and reanimated ! Thank you !
Why are you using by startAnimated useDerivedValue and not useSharedValue? What's the difference. And how to know when I should use useDerived or useShared?
That's a great question! I use 'useSharedValue' for independent shared values, such as progress. However, 'useDerivedValue' is better suited for values that depend on others. For example, since 'startAnimated' is dependent on 'progress', you're essentially 'deriving' it from the 'progress' value and applying additional computations. Hopefully this helps!
@@ReactiiveYes. Thanks. So when I got it right. When Values depending on something then useDerived is the choice. And in all other cases useShared
@4:50 what extension are you using for code suggestions like that.
@@HaiderAli-oi5fm I'm using Cursor! It's a fork from vscode cursor.com
he is using cursor ide
@@AlbertoVasquez1 Thanks
Great tutorial. Never tried Skia. This makes me want to try it
@@ravindusha thanks! I made this tutorial because I think it's a great way to get used to Skia 👀